使用jquery加载不会加载带有jQuery Tabs的页面上的功能

Question

Is this possible or am I totally off base:

I have a ASPX User Control that is named UserInfo.ascx

It has the following load method to load an AJAX page

$("#qhcContent").load("infopage.aspx #userDisplay", function (response, status, xhr) {

        if (status == "error") {

            ///// Show Error Message

            $("#qhcThrobber").fadeOut(500, function () {
                $("#qhcContent").fadeIn(300);
            });

        }
        else {

            $("#qhcThrobber").fadeOut(500, function () {
                $("#qhcContent").fadeIn(300);
            });

        }



    });

Then I have the ASPX page that has two tabs (via jQuery UI Tabs) and this is called to create the the basic tabs. I know it works if I just navigate to the page regularly, but not when I envoke the load method.

 $().ready(function () {



        $("#quickCheckTabs").tabs();


  });

But the tabs are never being created on the aspx page. Is this because of the way that jquery.load() works ?

Thanks alot.

-Seth

Answer 1

the #quickCheckTabs isn't present when the dom is ready. ie $().ready() The quickCheckTabs is only present after the load command has finished. So what you need to do is to add $("#quickCheckTabs").tabs(); to the onComplete callback of the load() function.

In Other Words:

$("#qhcContent").load("infopage.aspx #userDisplay", function (response, status, xhr) {

        if (status == "error") {

            ///// Show Error Message

            $("#qhcThrobber").fadeOut(500, function () {
                $("#qhcContent").fadeIn(300);
            });

        }
        else {

            $("#qhcThrobber").fadeOut(500, function () {
                $("#qhcContent").fadeIn(300);
            });
            $("#quickCheckTabs").tabs();    
        }



    });

Oh and by the way.. ready() methods present in the pages that you load through ajax calls will never be fired.