jquery tools: Calling doc ready initialization in script loaded by ajax

I have a jquery tools based tabs working great, and on each tab I load pages using ajax. One of the pages has got tools from another party, which requires the following code be run when ready:

$(function() { $('.scroll-pane').jScrollPane({showArrows: true}); });

I'm note sure where to put this code (in the ajax loaded page). According to the flowplayer guys:

"The script tag should be placed below the HTML elements not inside the document.ready() event because that event is not fired for th开发者_StackOverflowe pages that are loaded with AJAX."

Does that mean encapsulate the above in <script></script> tags, and place after the </html> tag? That's outside the whole doc so it doesn't seem right...

Help anyone...where should I put my initialization code in the ajax doc?

Thanks

---

Run it as a callback for the AJAX load, this way the code will be run after the HTML has been loaded into the DOM.

$('#result').load('ajax/test.html', function() {
  $(function() { $('.scroll-pane').jScrollPane({showArrows: true}); });
});

Read more in the API for load().

---

This is kind of a long shot, but I'm pretty sure you could tap into the onClick event. I believe this is fired after the tab content is loaded, even via AJAX. You would write something like this:

$("ul.tabs").tabs("div.panes > div", {
    effect: 'ajax',
    onClick: function(event, index) {
        $('.scroll-pane').jScrollPane({showArrows: true});
    }
});

I hope this works for you. If it does, it's severely undocumented.

---

If I understand your issue properly , there will be two ways to fix this issue .

a ) load the script prior to tab load , so you should not wait for the script to load

b ) load the scripts dynamically to main page and invoke a call back

in case b you will should do sht like this:

 function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementById('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

To me its structural issue , not script issue . It means , WHEN/HOW/WHERE tab data and script is loaded on ajax call. A better way will be if you share demo link where this is happening . I ll be glad help .

Let me know if I am understanding your issue