How to create a JQuery Dialog box dynamically

This article will demonstrate how to create a JQuery dialog box dynamically. In many instances client side web developers need to show certain messages or data to users dynamically. How do they do it? Good old days they use javascript alert() function to show the message. Alert messages will not offer great control over the message display process.

Rate this article

4 out of 5 stars from 22 ratings of JQuery Dynamic Dialog box

JQuery Dialog Box Overview

But JQuery UI offers a powerful widget to display such messages in Jquery dialog boxes. JQuery Dialog boxes offer greater control over the message display. Jquery dialog API offers series of events to control the flow, such as while the dialog box opening(can use open() event) or while closing (can use close()). You can refer more Dialog Widget Jquery API Documentation. In order to display a message box using Jquery all you need to select the html element containing the message and call the dialog function as follows;

Default JQuery UI Dialog

<!DOCTYPE html >
<html>
<head>
    <title>Dynamic JQuery Dialog</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#def-dialog").click(function () {
                $("#MyDialog").dialog();
            });
        });
    </script>
</head>
<body>
    <input id="def-dialog" type="button" value="Default Dialog" />
    <div id="MyDialog" style="display: none;">
        This is the default dialog box</div>
</body>
</html>

In above code MyDialog is the Div ID of the message box hidden in the html page as follows;

<div id=”MyDialog” style=”display:none”>Updated successfully …!</div>

Button click event trigger JQuery dialog using following JQuery script.

Output of the code on the browser as follows;

Dynamic JQuery Dialog Scenario

Assume your Jquery or Javascript script needs to display a confirm message while execution saying “Customer records updated successfully”. Lazy coders will use the alert() function to display the message, which will not going to fit into existing design. In such scenario you can create a JQuery UI dialog box programmatically and append the message into it and display.

Create JQuery Dialog box dynamically

This demonstration will be done while clicking a button creates the message using JQuery code without using any hidden divs. Add another button call Dynamic JQuery Dialog into the same page and give an ID. Add a click event shown below into javascript section to create JQuery Dynamic dialog;


$("#dyn-dialog").click(function () {
});

Then you need to declare a variable to hold the html content of the message. In this example it is a div tag with a simple paragraph with a message. Based on your requirement it can be anything may be another form to capture data or a message etc. You can code it as follows;

 var dynamicDialog = $('<div id="MyDialog">\
            <P>You have successfully updated the database…..</P>\
            </div>');


Above variable is equal to selecting the hidden div on a web page using JQuery, because now it has the div with the message. Next step will be creating the JQuery dialog box using the dialog variable as follows;




 dynamicDialog.dialog({ title: "Success Message",
                    modal: true,
                    buttons: [{ text: "Yes", click: function () {//action code here } }, { text: "No", click: function () {$(this).dialog("close"); } }]
                });

JQuery UI Dialog function accept list of parameters and events to handle various scenarios. Above function call uses three parameters. The title parameter represents the message box title. Modal parameter will stop accessing other functionality of the web page. Buttons function is accept array of buttons as parameter. In this case I’m using two buttons. One button for “Yes”, another button for “No”. Each button can handle its own events and in the “No” button event handler I’m closing the dialog box.

Complete code

<!DOCTYPE html >
<html>
<head>
    <title>Dynamic JQuery Dialog</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //default dialog obx
            $("#def-dialog").click(function () {
                $("#MyDialog").dialog();
            });

            //dyanmic jquery dialog box
            $("#dyn-dialog").click(function () {
                //declare a variable to hold the message
                var dynamicDialog = $('<div id="MyDialog">\
            <P>You have successfully updated the database…..</P>\
            </div>');
                dynamicDialog.dialog({ title: "Success Message",
                    modal: true,
                    buttons: [{ text: "Yes", click: function () { } }, { text: "No", click: function () { $(this).dialog("close"); } }]
                });


            });
        });
    </script>
</head>
<body>
    <input id="def-dialog" type="button" value="Default Dialog" />
    <input id="dyn-dialog" type="button" value="Dynamic JQuery Dialog" />
    <div id="MyDialog" style="display: none;">
        This is the default dialog box</div>
</body>
</html>

© 2014 wecode

More by this Author


2 comments

Jessica 2 years ago

Worldwide Friend Finder website - free registration. Millions of people, fast registration, senior, asian and japanese friend finder.


prasad 2 years ago

very good article

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working