Jquery – How to give Ajax call in modal dialog box

jqueryjquery-uilightboxmodal-dialog

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.

Best Answer

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.

Related Topic