Question

I´ve been working with on a Asp.NET web app using jQuery to generate a sweet , flexible and fast UI. I´ve created the skeleton

<div id='title'>
    &nbsp;&nbsp;
    <h3 class='color-black h3'>
        Choose the career</h3>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;</p>
</div>
<div id='tabbedContent' class='tabbed_content'>
    <div id='tabs' class='tabs'>
        <div class='moving_bg'>
            &nbsp;
        </div>
    </div>
    <div id='contentID' class='slide_content'>
        <div id='tabsliderID' class='tabslider'>
        </div>
    </div>
</div>

Now onStart I will append some dynamically created DOM elements using jQuery. I do this by calling two js functions from the Page_Load method (ASP) that will do all the magic . Then I’ll need to init a couple of scripts (tabbedContent and iNettuts).
The thing is that those scripts need to be initialized only after the whole page is created -including the dynamically created content- so i CANT use $(document).ready and when I use $(window).load sometimes it works and sometimes it doesn’t.

I´ve been googling it for at least two weeks and still nothing. What should I do? Isn’t jQuery supposed to handle this issues? and if not .. is there any workaround?

ps. Tryin’ to make it work in IE7-8, Chrome 10 and FF 6

BTW, once I achieve this i´ll need to do some web services calls to get data from the db. Will this affect the behavior ? Should I expect more headaches?

Answer 1

after a bit of research on your suggestions and a very very long night implementing Radus suggestion -which could be interpreted as flags for each element to be loaded- I started to ask myself : what if ready() has a flag? in that case I shouldn’t worry about the timing of the initialization. Well, turns out that this flag ,indeed, exists and it’s called holdReady().
Basically, it prevents the ready() event to be launched until the flag is set to false.

“The $.holdReady() method allows the caller to delay jQuery’s ready event. This advanced feature would typically be used by dynamic script loaders that want to load additional JavaScript such as jQuery plugins before allowing the ready event to occur, even though the DOM may be ready. This method must be called early in the document, such as in the immediately after the jQuery script tag. Calling this method after the ready event has already fired will have no effect.”[1]

So, I did:

$.holdReady(true); 
//using ASPs page_load so it will be triggered everytime 
//a postback happens -gonna need it for the AJAX requests i'm planning to do.
//Then I create the dynamic content
$.holdReady(false); //then I let the event fire


$(document).ready(function(){
  //append the dynamic content
  iNettuts.init();
  tabbedContent.init();
});

And that’s it, problem solved. Hope this helps someone else, and thank you all.

[1] http://api.jquery.com/jQuery.holdReady/