Why does this JQuery Dialog Box appears again and again? - javascript

I am using Blogspot and My code is as follows:
//JQuery Code above <head> tag:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog({ autoOpen: false });
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ position: 'center' });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ width: 280 });
//$("#dialog").dialog({ height: 530 });
//$("#dialog").dialog({ closeText: 'hide' });
//$("#dialog").dialog({ closeOnEscape: true });
//$("#dialog").dialog({ hide: 'slide' });
//$("#dialog").dialog({ show: 'slide' });
$("#dialog").dialog({ title: 'Help!' });
/*$("#dialog").dialog({ buttons: [{
text: "Close",
click: function() { $(this).dialog("close"); }
}] });*/
$("#dialog").dialog();
setTimeout(function(){
$("#dialog").dialog("open");
}, 30000);
});
</script>
//html code above </body>
<div id="dialog" title="Dialog Title">
<br>
<span style="text-align:center; font-weight:bolder;font-size:15px; display:block">Make this Hindi Site Popular. <br>
Please Share.</span>
<br>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=kuldeep06march"></script>
<!-- AddThis Button END -->
<br>
</div>
I have set timeout 30000 ms in setTimeout JS Function so after 30 seconds, a dialog box appears and asks for "Sharing". The problem is that after closing the Dialog Box, it appears again and again. See the live working code at "http://www.bccfalna.com"
How Can I solve this problem?

$("#dialog").dialog({ autoOpen: false,
modal: true,
position: 'center',
resizable: false,
draggable: false,
width: 280,
height: 530 ,
closeText: 'hide',
closeOnEscape: true,
hide: 'slide',
show: 'slide',
title: 'Help!' }).dialog();
and
var timeoutId = setTimeout(function(){
$("#dialog").dialog("open");
clearTimeout(timeoutId)
}, 30000);
Try this.

Well, in the link you provided you have the code snippet above wrapped in:
$window.scroll(function() {
Which means every time the user scrolls, you are creating a new timeout. :)

Related

jquery dialog not load iframe

I have this code:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<style>
#myIframe{
width: 100%;
height: 100%;
}
</style>
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'https://www.onet.pl';
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
I need to open in the jquery dialogbox https://www.onet.pl (in iframe).
The current code shows me the dialogbox correctly - but without the onet.pl website. Iframe is empty
how to fix it?
With jQuery we use the attr() method to modify the attributes of an HTML element.
Your code after the fix will looks like this:
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
//$("#myIframe").src = "https://www.onet.pl";
$("#myIframe").attr("src", "https://www.onet.pl");
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
#myIframe{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog">
<iframe id="myIframe"></iframe>
</div>
</body>
</html>
Read more about the attr() from the following link: https://api.jquery.com/attr/
Side Note: next time please reveal the libraries or frameworks you're using (e.g. jQuery UI in this question) , this help whoever want to answer your question.

jQuery-ui dialog don't show on click event

My jQuery-ui dialog don't show when clicking on a submit button
html :
<input id="pdfsub" type="button" name="pdfsub" value="PDF">
Javascript
$(document).ready(function() {
$("#PDFdialog").dialog({
width: 500, autoOpen: false, resizable: false, draggable: false,
modal: false,
title: "pdf",
buttons: [
{
text: "Annuler",
click: function() {
$( this ).dialog( "close" );
}
}]
});
$("#pdfsub").click(function(){
$("#PDFdialog").dialog("open");
alert("btn");
});
});
it show me my alert box but not the dialog , did I make a mistake somewhere ?
also my jQuery and jQuery-ui libs are working (have the same in my "connexion" page with same dialog and it's working)
EDIT :
There are my libs
<script src="/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You are applying dialog function to a div that does not exist in your HTML structure and you don't create it in javascript/jquery either.
So you must have an element with that id inside your html so you can call that dialog on it
As you can see in the example on jQueryUI site
https://jqueryui.com/dialog/
$(document).ready(function() {
$("#PDFdialog").dialog({
width: 500, autoOpen: false, resizable: false, draggable: false,
modal: false,
title: "pdf",
buttons: [
{
text: "Annuler",
click: function() {
$( this ).dialog( "close" );
}
}]
});
$("#pdfsub").click(function(){
$("#PDFdialog").dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="pdfsub" type="button" name="pdfsub" value="PDF">
<div id="PDFdialog">
</div>

Dialog box not displaying upon clicking button

I have a site which has the button 'Currency Converter'. When clicked on it, it should open the dialog box and conversion should happen. Following is the code:
currency_converter.php
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
var page = "https://www.google.com/finance/converter";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 250,
width: 350,
title: "Currency Converter"
});
$dialog.dialog('open');
return false;
});
});
</script>
</head>
<body>
<button id="opener">Currency Converter</button>
<div id="wrapper">
</div>
</body>
</html>
The problem is: dialog box is not getting opened in my browser.
Can anyone please help. Thanks in advance
Chnage your jquery and css url with these
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css
You have listen for document ready twice, other then that it should work just fine.
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
var page = "https://www.google.com/finance/converter";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 250,
width: 350,
title: "Currency Converter"
});
$dialog.dialog('open');
return false;
});
});
</script>
</head>
<body>
<button id="opener">Currency Converter</button>
<div id="wrapper">
</div>
</body>
</html>

How to create jquery modal popup?

What am I doing wrong that this popup isn't working?
$(document).ready(function () {
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dialog">testing popup</div>
click me
You have to include jquery-ui also read the doc:
html
<a href="#" id="dialog_link">click me
<div id="dialog">testing popup</div>
</a>
jquery
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "show",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
$("#dialog_link").click(function () {
$("#dialog").dialog("open");
});
css
#dialog_link {
display: block;
}
fiddle
Those are the links from google host libraries:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Can't seem to store val into var to be called back later

I need your help,
How can the code below be modified such that when a date is selected, that it will store the selected date into (var z) and then its value can be called back later. I can't seem to figure this out, it should be simple, and right by eyes. What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var z
window.onload = function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$('#d1').datepicker({
onSelect:function(){
z = $(this).val()
alert(z)
$("#dd").dialog("close")
}
});
}//end of window.onload
function callback() { alert(z) }
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<p><input onlick="callback()" type="submit" value="Submit" name="B1"></p>
</body>
</html>
There are too many missing semicolons in your code. Plus , In spite of putting in window.onload put your code in $(document).ready(function() { }); .
I made some changes in your code. Its working now.
Have a loot at This.
I think this is exactly what you are asking for.
There seem to be a few things going on. The onclick was mispelled, and as was pointed out - semicolons were missing. This should work.
<script type="text/javascript">
var z;
$(document).ready(function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$("#B1").click(function(){
callback();
});
$('#d1').datepicker({
onSelect:function(){
z = $(this).val();
alert(z);
$("#dd").dialog("close");
}
});
});//end of window.onload
function callback() {
alert(z);
}
</script>
I also modified the input button to:
<input type="button" value="Submit" name="B1" id="B1">
And you can also play around with the fiddle, here: http://jsfiddle.net/jE8tL/

Categories

Resources