jQuery UI Dialog Functions

Question

I am loading an external php page into a jQuery UI Dialog through the open event like so:

$.ajax({
    url: "page.php",
    success: function(data){ 
        $("#loadDiv").dialog({
            open: function(){
                $(this).html(data);
            },
            autoOpen: false,
            resizable: false,
            minWidth:900,
            minHeight:480,
            modal:true,
            title: "Add Page",
            buttons: {
                "Add": function() {
                    $.post("script.php", $("#addPageForm").serialize() ,
                    function(data){
                        if( data.search("<b>Error</b>") != -1 ||  data.search("<strong>Error</strong>") != -1) {
                            // Error occured 
                        }else{
                            // Success
                        }
                    });
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });
    }
});

(#loadDiv is just an empty div that is hidden on the page)

The problem is that when you click the cancel button, it is supposed to close the dialog - but it doesn't. I use FireBug for FF and it tells me the error "$(this).dialog is not a function ... $(this).dialog("close");". When I try to re-open it with $("#loadDiv").dialog("open") doesn't work either and I think the two are related problems.

The problem is that the content of the dialog is being loaded dynamically through ajax, because it works if I take out the ajax part. I need to figure out how to get it to work with the way I am loading the content now.

Any suggestions would be appreciated! Thanks!

Victor · Accepted Answer · 2011-02-03 18:15:35Z

2

declare your dialog outside the ajax call, set the autoOpen to false. Now inside the success callback, you can then append the data to your empty div, and then just show it. Something like this:

$(function() {
    $("#loadDiv").dialog({            
            autoOpen: false,
            resizable: false,
            minWidth:900,
            minHeight:480,
            modal:true,
            title: "Add Page",
            buttons: {
                "Add": function() {
                    $.post("script.php", $("#addPageForm").serialize() ,
                    function(data){
                        if( data.search("<b>Error</b>") != -1 ||  data.search("<strong>Error</strong>") != -1) {
                            // Error occured
                        }else{
                            // Success
                        }
                    });
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });

});

$.ajax({
    url: "page.php",
    success: function(data){ 
        $('#loadDiv').html(data);
        $('#loadDiv').dialog('open');
    }

});

EDIT Modified and verified the code with JSLint.

edited Feb 3, 2011 at 18:15

answered Feb 3, 2011 at 17:40

Victor

4,7311 gold badge28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Key Over a year ago

I did that and I still have the problem with the dialog functions not working. I have a click event that triggers $("#loadDiv").dialog("open"); and it is not working - firebug just tells me it is not a function. When I take the ajax away it all works fine

Victor Over a year ago

do you have the dialog declaration inside document ready? I added a couple of lines. That should work.

Key Over a year ago

just put it inside the document ready and it still generates the same error message.

Victor Over a year ago

there was a typo in my code on the closing brackets. If you copy and paste, that might be it.

Key Over a year ago

@Victor: Nope, I just fixed the brackets and its still not working.

|

Key · Accepted Answer · 2011-07-03 05:31:19Z

0

Figured it out, the page that I was putting into the dialog included the jQuery source, so I removed that line and it all works fine.

answered Jul 3, 2011 at 5:31

Key

1722 silver badges10 bronze badges

Comments

Be Brave Be Like Ukraine · Accepted Answer · 2012-11-18 06:59:16Z

0

Please check that its not an issue to do with the dialog loading after the document has finished loading, try using live on the click event, and also check if $(this) still refers to the dialog.

You may assign a variable to hold a reference to $(this) early in your code so that you know that when you are referencing $(this) you will be referencing the correct object/element.

edited Nov 18, 2012 at 6:59

Be Brave Be Like Ukraine

7,8153 gold badges48 silver badges69 bronze badges

answered Jul 1, 2011 at 14:41

Judge

1

Collectives™ on Stack Overflow

jQuery UI Dialog Functions

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related