jQuery-ui dialog don't show on click event

jQuery-ui dialog don't show on click event - javascript

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>

Related

How to make jQuery UI Dialog pop up with an else{} function?

I am using a jQuery UI dialog. This code here makes the dialog pop up when clicking an HTML button.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
This works fine, but I have an if else function here:
if(form.pswrd.value === "password")
{
window.open('page.html')/*opens the target page while Id & password matches*/
}
else
{
//jQuery Dialog opens HERE
}
}
The else function at the bottom is what I want to trigger the jQuery UI dialog. How can I make the else open up the jQuery dialog? I have already tried things like including this part of the script in my else but to no avail:
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );

Your code seems fine, you just need to trigger the dialog open inside the else clause:
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").on("click", function() {
if (form.pswrd.value === "password") {
window.open("page.html");
} else {
$("#dialog").dialog("open");
}
});
});
</script>

You don't need the click listener to open it manually
Just do:
else {
$( "#dialog" ).dialog( "open" );
}

$( "#opener" ).on( "click", function() {
if(form.pswrd.value === "password") {
window.open('page.html'); /*opens the target page while Id & password matches*/
} else {
$( "#dialog" ).dialog( "open" );
}
}
});

jquery ui dialog box not opening in html on click of a link

I am trying to open a dialog box in html page on click of a link but its showing me an error like-Object doesn't support property or method 'dialog' on click in ie.
Please check my code below
source files
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Dialog code
$("#link").click(function(c){
e.preventDefault();
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function() {alert('you chose yes');},
"No": function() {alert('you chose no');},
"Cancel": function() {
dialog.dialog('close');
}
}
});
});
});

Replace the "c" with an "e" and remove the closing brackets at the end. You had one too many.
$("#link").click(function(e){
e.preventDefault();
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function() {alert('you chose yes');},
"No": function() {alert('you chose no');},
"Cancel": function() {
dialog.dialog('close');
}
}
});
});

You need a div set up that will be the dialog, like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
Here's a jsbin with a working example with buttons

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>

Setting height and width not function in dialog

I am new to jQuery and I am trying to use the dialog function.
When I am looking at the demo (animated.html) provided with the jquery.ui, I have tried to insert an huge image inside the dialog box.
It works well when inserting the following code, it restricted the size of dialog box.
However when I removed the stylesheet (jquery.ui.all.css and demos.css) ref from the demo, the dialog box now are not under restriction and show the whole image without scroll bar in the dialog box.
(And hence the parent contain scroll bar now, which is not favorable)
Which subject in style sheet enable to set the size of dialog box?
For the first time:
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
maxWidth:400,
maxHeight: 300,
width: 400,
height: 300,
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
For the second time:
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
maxWidth:400,
maxHeight: 300,
width: 400,
height: 300,
overflow: 'auto',
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>

Why does this JQuery Dialog Box appears again and again?

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. :)

Develop Reference

JavaScript is the programming language of the Web.

jQuery-ui dialog don't show on click event - javascript

Related

How to make jQuery UI Dialog pop up with an else{} function?

jquery ui dialog box not opening in html on click of a link

How to create jquery modal popup?

Setting height and width not function in dialog

Why does this JQuery Dialog Box appears again and again?

Categories

Resources