0

I am using this code to populate the html pages to a div. 

$(document).ready(function(){                       
      // Load Home Content
       $('#content').load('pages/sample.html');

      //Load Content Using Menu Links
      $('.main-menu a').click(function(){
        var page = $(this).attr('href');
        $('.content').load('pages/' + page + '.html');
        return false;
      });
});

And i have anchors tags on loaded html. similar to my main page. a code example:

<div class="main">
<a href="sample">Go To Next Page</a>
</div>

Now i have multiple anchors on loaded div like above and i want to use same load procedure on it to change the code content div.

Any help would be appreciated.

CreativeDip
  • 184
  • 1
  • 2
  • 19

1 Answers1

1

You need to call the second load sequence after the first one has completed. You can do this by calling it in the callback function of the first load like so --

$('#content').load('pages/sample.html', function(){
    //load your second set of html here with another load.
    $('#previouslyloadeddiv').load('pages/anotherpage.html');
});

The reason it isn't working right now is because Jquery can't find the anchors in the loaded HTML as it hasn't finished loading yet.

charsi
  • 2,917
  • 22
  • 40
  • I have the same div for first load and second load. And the content needs to be reloaded within the same div. – CreativeDip Aug 12 '16 at 17:54
  • You can do a `$('#content').empty()` to remove the previous content before the second load. I think I am misunderstanding you here. Why do you need the content from first load at all? – charsi Aug 12 '16 at 17:58
  • This code works well two loads i have like 50+ loads. load within a load then load within a load. Can you please let me know if its possible. Thanks – CreativeDip Aug 12 '16 at 18:06
  • I want to navigate between different loads for example reset a load on click and perform a new load. something like this. Thank – CreativeDip Aug 12 '16 at 18:07
  • For more clarity i have a next and previous button on each loaded html. That loads the next page. – CreativeDip Aug 12 '16 at 18:08
  • Are you iteratging through an array of webpages (or know the links beforehand) that should be loaded depending on if the user presses previous or next? – charsi Aug 12 '16 at 18:11
  • I have like 14 pages e.g page1, page2, page3, page4, page 5, page 6. Now the page 1 is loaded by default through load. And page1 has link to load next page. On page2 it has link to go back to page 1 and move to next page page 4 without refreshing just loading. So now i need a code for next and previous links also i have a 10th page which have links for all pages that loads. – CreativeDip Aug 12 '16 at 18:15
  • I would reccomend creating next and previous button outside your main div. Then just create a function that loads either the next link or the previous link from your array of URLS. If you cant modify the pages being loaded at source hide the input buttons after they are loaded with `$("#button").css("display:none;")` . Much cleaner and mantainable than chaining 50 load requests. – charsi Aug 12 '16 at 18:20