CODEWITHSUNDEEP
phpjqueryjquery-uijquery-ui-dialog
Shenoy Tinny
Shenoy Tinny

Reputation: 1335

jquery ui dialog box not opening

I am trying to implement a jquery ui dialog box in my web app but it doesnt seem to work at all. I am using PHP.

I have a PHP code which defines the for dialog and a button which on clicked will open the dialog.

    <div id="dialog">This should show up </div> 
<button id="opener">Open Dialog</button>

I have a separate JS file and inside the ready function, I have the following code

$("#dialog").dialog({autoOpen:false}); 


$("#opener").click(function()
{
    $("#dialog").dialog("open");
});

On clicking the button, the dialog doesnt seem to open up. I am using

Can anyone help me with why it wouldn't work.

Also, I tried setting autoOpen to true and the dialog seems to work fine on page loading but not when clicked.

Thanks for ur help

Upvotes: 0

Views: 1874

Answers (2)

tozlu
tozlu

Reputation: 4865

This should work:

$("#opener").on('click', function(){
    $("#dialog").dialog("open");
});​

Here is working JSFiddle

Upvotes: 0

Jordan Mack
Jordan Mack

Reputation: 8723

Make sure that the click code is run after the page has loaded, or it may not be able to find it and attach. I wrapped your JS code in jQuery's .ready() to be sure.

The following example should do as you ask. If you want further assistance, I suggest you post a URL that we can look at and debug.

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    //Wait until the document is ready to be processed.
    jQuery(document).ready(function()
    {
        //Init your dialog box.
        $("#dialog").dialog({autoOpen:false}); 

        //Attach you click handler to the button.
        $("#opener").click(function(event)
        {
            //Stop any default actions on the button.
            event.preventDefault();
            //Open your dialog.
            $("#dialog").dialog("open");
        });
    });
    </script>
</head>
<body>

<div id="dialog">This should show up </div> 
<button id="opener">Open Dialog</button> 

</body>
</html>

Upvotes: 1

Related Questions