Home/ Questions/Q 8840971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T10:35:40+00:00

I am trying to implement a jquery ui dialog box in my web app

  • 0

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

  • jquery V1.7.1
  • jquery UI V 1.8.20

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0