user2111911 user2111911 - 3 months ago 5
Javascript Question

Load Content in a div with already loaded content and so on

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 and so on.

So now i need a code for next and previous links for each load also i have a 10th page which have links for all pages that loads and it should be also loaded.
The code i am using for loads. But its only working upto 2 loads. I need to make load through all pages with next and previous links and one loaded page for all links. I have html and css ready need help in js. Thanks

$(function(){
$('.modal-body').load('pages/page1.html', function(){
//load your second set of html here with another load.
$('.changed').click(function(){
var page = $(".changed").attr('href');
console.log(page);
var loaded = $('.modal-body').load('pages/' + page + '.html');
return false;
});
});

});


Every Loaded page have link like

<a href="changed">Next</a>


Any help would be appreciated. I have already one navigation working outside the loaded content. But i need navigation within every new loaded page as well.

Answer

you can put a page counter in the Javascript. And you can use event delegation so you don't need to bind new handlers every time you reload the body.

$(function(){
  $('.modal-body').load('pages/page1.html'); // Load page 1 at start
  var curPage = 1;
  $(document).on("click", ".nextpage", function() {
    curPage++;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
  $(document).on("click", ".prevpage", function() {
    curPage--;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
});

The HTML should then have:

<a class="prevpage" href="#">Previous</a> <a class="nextpage" href="#">Next</a>