jQuery UI对话框功能

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!

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.

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.

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.