Trying to make $(document).ready work with load()

Question

I'm loading my page using the load function. The page contains initialization code for the orbit slider (Im using foundation).The images load but the slider does not initialize.

Code to load the slider.html

$("a#1").click( function () {
    $("#center_content").load("pages/slider.html");
});

Code in slider.html

<div class="row">
    <div class="four columns">Welcome</div>
    <div class="eight columns" id="featured">
        <img src="images/slides/1.jpg" alt="Overflow: Hidden No More" />
        <img src="images/slides/2.jpg"  alt="HTML Captions" />
        <img src="images/slides/3.jpg" alt="and more features" />
        <img src="images/slides/1.jpg" alt="Overflow: Hidden No More" />
        <img src="images/slides/2.jpg"  alt="HTML Captions" />
        <img src="images/slides/3.jpg" alt="and more features" />
    </div>
</div>
<script type="text/javascript">
     $(document).ready(function() {
         $('#featured').orbit();
     });
</script>

score 2 · Answer 1 · answered Jun 14 '12 at 17:53

2

I guess this would help. Bind the orbit function once the load is completed and remove the binding in the slider.html page.

$(function(){
    $("a#1").click( function () {
        $("#center_content").load("pages/slider.html",function(){
             $('#featured').orbit();
        });
    });
});

answered Jun 14 '12 at 17:53

Shyju

214,206
104
411
497

Still doesn't work. This is the error I found in the firebug console $("#featured").orbit is not a function – Codename Jun 14 '12 at 18:05
do you have reference to the script which has the orbit function in the main page ? – Shyju Jun 14 '12 at 18:05
@Dez Make sure you have reference to jQuery and other script which have the orbit function in the main page(not the slider page). the script in my answer should be in the main page. – Shyju Jun 14 '12 at 18:13
@Dez try this: $("#center_content").load("pages/slider.html .row, script"); – didxga Jun 14 '12 at 18:16
Still getting the same error: $("#featured").orbit is not a function. One more thing is that the page is actually being loaded from a page loaded by load(), does this matter? – Codename Jun 14 '12 at 18:25
I have index.html which loads portfolio into #center_content and then the portfolio page loads slider.html – Codename Jun 14 '12 at 18:26
@Dez, then probably you need to put this script in the page where you originally calling the loading chain. – Shyju Jun 14 '12 at 18:27
put in index.html load call back – Shyju Jun 14 '12 at 18:27
@didxga nothing happens when I click the a#1, I guess theres some syntax error. – Codename Jun 14 '12 at 18:29
@Shyju $("#featured").orbit is not a function – Codename Jun 14 '12 at 18:33
@Dez, considering extract your javascript into a js file, and load it along with slider.html into #center_content, like this: $("#center_content").load("pages/slider.html", function(){ $.getScript("js/jscontainingorbit.js"); }); – didxga Jun 14 '12 at 18:34
I just noticed that none of the js effects/scripts (tabs, nav bar) provided by foundation work on the pages loaded by the load() function. – Codename Jun 14 '12 at 18:42
@Dez you tried $.getScript("js/jscontainingorbit.js") as in my previous comment? – didxga Jun 14 '12 at 18:49
Yes, same result. I think I should changethe way Im loading the page... because the load() function is preventing any of the jquery effects provided by foundation from appearing. – Codename Jun 14 '12 at 19:02
@Dez I tested it on my side, it works. Dunno know what exactly your situation is, using chrome developer tool or firebug to dig out. – didxga Jun 14 '12 at 19:09

score 2 · Answer 2 · answered Jun 14 '12 at 17:57

taken from the documentation:

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

If you need to have the code inside the html, I don't think you need to use $.ready(), given that the script tag is located after the html you are trying to bind. It should execute just fine without it. I guess your code is not working because when the script is interpreted by the load() function, the html has not yet been inserted. Later, when the html is inserted, there is no code to be executed anymore

Trying to make $(document).ready work with load()

2 Answers2

Script Execution