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!

Answer 1

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.