CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Tim
Tim

Reputation: 4099

Why is my jQueryUI Modal dialog not working?

I've got a simple task that's driving me nuts.

My jQuery code:

        $(document).ready(function() {
        $("#dialog_open").button().click(function () {
             $("#dialog_frame").open();
        });
        });
    
    $(document).ready(function() {
        $('#dialog_frame').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true;
        });
    });

HTML for the button:

                    <td>
                    <input type="button" id="dialog_open" value="Open" />
                </td>

HTML for the content of the modal popup:

<div id="dialog_frame" style="display:none;">
    <p>I am here!</p>    
</div>

When I click on my button, nothing happens. I also see the content for the dialog doesn't hide unless I put the display:none; in there.

What am I doing wrong? I've included links to jQuery, jQueryUI, and the jQueryUI CSS files but can't get this to work! (I've got other sites that work fine)

Upvotes: 1

Views: 4977

Answers (2)

LeGEC
LeGEC

Reputation: 52226

The open method of the .dialog widget should be invoked using :

$("#dialog_frame").dialog('open');

(instead of $("#dialog_frame").open() - doesn't this line of code raise an error in your javascript console ?)

Upvotes: 4

code_rum
code_rum

Reputation: 922

Use this

$(document).ready(function() {
   $("#dialog_open").button().click(function () {
       $('#dialog_frame').dialog({
           height:500,
           width:500,
           modal:true
       });
    });
});

Upvotes: 0

Related Questions