Question

I am using modal dialog box from jQuery UI. I want to make a Ajax call to display the content in my dialog box.

$(function(){
    $( #myLink ).live("click", function(){
        $( #lbContent ).dialog( open );
        var url= $(this).attr("href");
        $( div#lbContent ).empty();
        $( div#lbContent ).load(url);
        return false;
    });

    $( #lbContent ).dialog({
        stack:true,
        bgiframe: true,
        autoOpen: false,
        height:500,
        width:700,
        modal: true,
        resizable:true
    });
});

Now, when I click on the link it displays the content in the modal dialog box as expected.

But when I close that dialog box and again click on the same link then that dialog box is not opening. I tried to give alerts in between.

When I refresh the page and click the link then it works as expected.

Answer 1

Thank you Peter for editing my initial comment. However, after further investigation to this I have found Shruti s problem to be a true problem for dynamic content. I have even went as far as duplicating jitter s link.

The problem is dynamic content that also uses jQuery files. If I use an URL that goes to the server and requests data from a database using a Cold Fusion page I get the same results as Shruti, it works the first time but not subsequent accesses. If I use a simple HTML page that displays an image on in the dialog it will work ever time.

I removed the jQuery functions from the dynamic content page and it works every time. So there is issues with jQuery if it is also used in the url that is being loaded.

++++++++++++++++++++++++++++++++++++++++++++++

Ok after afew minutes tinkering with this....

If the dynamic page uses the same jQuery files that the main page uses then don t load those files within the dynamic script. That is, the main page is the only page that should load the jQuery files not the dynamic pages that you are trying to load in an element on "the main page". The draw back to this is that the dynamic page in a stand-alone environment won t work because you are not calling jQuery UI.

This is kind of weird because because I can show and hide a standard div tag with dynamic content without modifying anything. But when I want to use the dialog functions in jQuery everything breaks. hmmm!! Still a very valuable library of JavaScript routines --- just need to tweak it a little. That s software.

Answer 2

Can t reproduce your problem. Consider adding a condensed sample consisting of javascript + html code which reproduces the problem consistently.

Also add which browser you use. And what if any errors are shown in your error console.

Check http://jsbin.com/opigo for a working sample based on your code.

And http://jsbin.com/opigo/edit to check the code pieces

Answer 3

Just a word for those developing for systems still using IE 7.0.

$( #lbContent ).dialog({
    stack:true,
    bgiframe: true,
    autoOpen: false,
    height:500,
    width:700,
    modal: true,
    resizable:true,

The last comma in the dialog parameter list will cause the code not to work for IE 7.0.

友情链接