Chris Chris - 7 months ago 11
Javascript Question

Using Jquery load to bring content in from 2 HTML pages

I am trying to load some content from multiple pages into one page. I know that these fire in order, so only pageB2's content will load since it's last. Is there a way to have both pageB and pageB2's content appear in the new page when the user clicks on #nav_b?

$(function(){
$("#nav_b").on("click", function(){
$("#main_text").load("pageB.html h2,h3,span,#hidden");
});
$("#nav_b").on("click", function(){
$("#main_text").load("pageB2.html h2,h3,span,#hidden");
});
});

Answer

Here's a hacky but working solution:

        $(function() {
            $("#nav_b").on("click", function(){
                var pageB = '', pageB2 = '';
                var $mainText = $("#main_text");
                $mainText.load("pageB.html h2,h3,span,#hidden", function() {
                    pageB = $mainText.html();
                    $mainText.html(pageB + pageB2);
                });
                $mainText.load("pageB2.html h2,h3,span,#hidden", function() {
                    pageB2 = $mainText.html();
                    $mainText.html(pageB + pageB2);
                });
            });
        });