Introduction
This chapter demonstrates about the jQuery UI Dialog Methods and Events which are used to manipulate and control the Dialog box and following are the concepts covered in this chapter.
- Dialog Methods
- Dialog events
Description
jQueryUI Methods are used to manipulate and control the dialog box and jQuery UI consist of a rich set of methods by which programmatically control and manipulate the dialog widget and the list of some methods are tabulated below.
Toggling the Dialog Box
In jQuery UI Dialog widget gets opened and closed by using the methods open, isOpen and close the code below demonstrates the isOpen which is used to check the dialog box is open or not, depending on the if-else statement either dialog box is opened or closed is as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : Toggling on Dialog Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var dialogOptions = {
autoOpen: false
};
$("#demoDialog").dialog(dialogOptions);
$("#toggleBtn").click(function() {
if(!$("#demoDialog").dialog("isOpen")) {
$("#demoDialog").dialog("open");
} else {
$("#demoDialog").dialog("close");
}
});
});
</script>
</head>
<body>
<h1>Modal Dialog Box</h1>
<div id="demoDialog" title="My Dialog Box">
jQuery UI : SPlessons Tutorials
</div>
<button id="toggleBtn">Display Dialog</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When a user clicked on the Display Dialog the Dialog Box will appear is as shown below.
Retrieving Data From the Dialog
The jQuery UI Dialog widget will pass data to and from the page, the method is easy since it's structurally a vicinity of the page. The code below demonstrates the widget contain some radio buttons and text and the program is used to get the results of the radio buttons if the dialog box closes are as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : Retrieve Data from the Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>.myStyle{ color:#fa4b2a; font-family:Verdana; }</style>
<script>
$(document).ready(function() {
var callback= function(){
var answer = $("#demoDialog").find("input:checked").val();
$("<p>").html("You Response is <b>" + answer + "</b>" ).
appendTo($("body"));
$("#demoDialog").dialog("close");
}
var close = function() {
$("#demoDialog").dialog("close");
}
$("#demoDialog").dialog({
buttons: {
"Ok": callback,
"Close": close
}
});
});
</script>
</head>
<body>
<p>Please answer the Question</p>
<div id="demoDialog" title="Questionaire">
<p>Your Fav Tutorial</p>
<label for="jQuery">jQuery</label>
<input type="radio" id="jQuery" value="jQuery" checked="checked"><br>
<label for="jQuery UI">jQuery UI</label>
<input type="radio" id="jQuery" value="jQuery" name="checked">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If the user clicked on OK button it will show the message as shown in below image.
| Metrhods | Description |
|---|---|
| close | Is used to close or hide the dialog box. |
| isOpen | Is used to demonstrate whether the dialog box open or not. |
| destroy | Is used to disable the dialog box permanently and return back to HTML document to an original state. |
| closeOnEscape | When it is set to true the dialogue box get closed by clicking the ESC button. |
| moveToTop | I used to move the specified dialog box to the top of the index. |
| widget | Is used to return the outer element which dialog widget is called on. |
| option | Is used to get configuration after the dialog has been initialized. |
Description
jQuery UI Dialog events is used to trigger functions which support several rich sets of functions which can be used for trigger callback functions which are tabulated below.
The jQuery UI Dialog event beforeClose allows you to get a notification once the dialog box is near to be closed. A good development observe is to permit the user to close the dialog, however, a user creates the user perform some task before the dialog is closed is as shown in below code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : beforeClose Event </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var closeable = false;
var delay = 5;
$('#demoDialog').dialog({
modal: true,
autoOpen: false,
beforeClose: function() {
return closeable;
},
open: function() {
var counter = delay;
var intID = setInterval(function() {
counter--;
$('#delayTime').text(counter);
if (counter == 0) {
clearInterval(intID)
closeable = true;
$('#demoDialog').dialog("close")
}
}, 1000)
}
})
$('button').click(function(e) {
$('#demoDialog').dialog("open")
})
});
</script>
</head>
<body>
<h1>jQuery UI Dialog : beforeClose</h1>
<div class="ui-widget">
<label for="userId">Username: </label><input id="user"/>
<label for="passwrd">Password: </label><input id="passwrd"/>
<button id="login">Login</button>
</div>
<div id="demoDialog" title="Incorrect Password">
Incorrect Password! Try Again in 5 Seconds. Time Left
<span id="delayTime">5</span> seconds.
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If the user clicked on Log in button then a dialog box will appear as shown in below image.
Toggling The Dialog Box
The jQuery UI Dialog widget is toggled to open and close using methods of open, isOpen and close. The code below demonstrates, the method isOpen is used to check whether the dialog is open or not, depending on the results of an if-else statement, the dialog box is either opened or closed.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : Toggling on Dialog Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var dialogOptions = {
autoOpen: false
};
$("#demoDialog").dialog(dialogOptions);
$("#toggleBtn").click(function() {
if(!$("#demoDialog").dialog("isOpen")) {
$("#demoDialog").dialog("open");
} else {
$("#demoDialog").dialog("close");
}
});
});
</script>
</head>
<body>
<h1>SPLESSONS Dialog Box</h1>
<div id="demoDialog" title="My Dialog Box">
Simple Programming Lessons
</div>
<button id="toggleBtn">Display Dialog</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Events | Description |
|---|---|
| create | Is get into action when the dialog is being initialized. |
| close | Is get into action when the dialog is being closed. |
| beforeClose | Is get into action when the dialog is being to be closed. |
| dragStart | Is get into action when the dialog started being dragged. |
| dragStop | Is get into action when the dialog stopped being dragged. |
| open | Is get into action when the dialog is opened. |
| resize | Is get into action when the dialog is resized. |
| resizeStop | Is get into action when the dialog stops being resized. |
| resize | Is get into action when the dialog stops being resized. |
Key Points
- Open and close methods can be used to trigger any other events as well.
- The filter checked is used to determine the radio buttons.
- The timer is executed for 5sec before the page gets active.