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

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" );
}
}
});

Related

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>

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

jQuery ui Dialog not working when clicked to button

I'm trying to modify a web page template which is based on bootstrap and jquery. I tried to add a dialog like in this page but it's not working. (It's the button that's not working on "Open Positions" section)
Below you can download my files. You can check index.html file.
I add this javascript from the link
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
And added following lines for that javascript:
<div id="dialog" title="Contact Us">
<p>info#info.info</p>
</div>
<button id="opener">Open Dialog</button>
Why it's not working?
Another question; instead of using this jquery ui component, how can i jump to content to "Contact Us" section from "Open Positions" section? This also i wonder because they both in same html file.
Did you try show?
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "show" );
});
Got the error in your file: It is incorrect reference to the CSS:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
There's an extra reference to jQuery twice that caused the issue. Please remove the other version of jQuery and move all the scripts to the bottom.

jquery and HTML placement

I am trying to play with jQuery UI, dialog in particular. First I tried the sample code and it works fine:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>
Now, I am trying to create button and dialog dynamically in the script, so I rewrote the code as:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>
<script>
// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");
document.body.appendChild(open_button);
// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");
document.body.appendChild(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</head>
<body>
</body>
</html>
And now it fails with the error "body is null". Why is that?
But even if I create dummmy DOM inside the body:
<div id="dummy_div"></div>
... and then, inside the script, append both the button and the dialog to it instead of body it still does not work.
$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);
I am probably missing some HTML basics, I would appreciate any explanation.
Thanks.
You are attempting to create the element before your HTML is rendered.
Use this:
$(function() {
$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
Good luck
Note
$(function() { ... }); is the same thing as $(document).ready()
Read about document.ready() here
Read that for more information about DOM ready.
JavaScript is executed immediately when it is encountered in the page. So in your second case, you are trying to write to the <body> element before the browser has created it. Hence why it is null.
Wrap the script in a window.load() or a $(document).ready() function and you should have everything working.
This will have the JavaScript wait until the entire DOM has been rendered before trying to do your stuff.
This is your code on jsfiddle. It's work
http://jsfiddle.net/abdennour/795Yp/
If you want to embedded it in web page you should call it in the following function :
$(function(){
})
so :
$(function(){
// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");
document.body.appendChild(open_button);
// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");
document.body.appendChild(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
})

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>

Categories

Resources