Search code examples
jqueryjquery-load

Ajax Load + Refresh the same div

Snippet code to load the content of the template into the div (main.html):

var href = $(this).attr('href');
$('#content_pane').load( href );


<a href="/main" class="active"> MAIN  </a>
<a href="/review"> REVIEW </a>

<div id="#content_pane"> </div>

review.html:

<a href="review/1" class="pageLink"> 1 </a>
<a href="review/2" class="pageLink"> 2 </a>

My question now is that:

  1. Let's say, I've loaded the review page into the div #content_pane by clicking on href="/review"
  2. Part of the review content, contains the href link of page numbers.
  3. QUESTION !! When I click on those link (page number), I want the content of the link clicked on this review page to be loaded back into this div #content_pane with the AJAX effect just like the jQuery load like above.

EDIT

Current Problem:

The class .pageLink from review.html is not accessible from main.html, after review.html being loaded into div #content_pane

Can anyone help on this please ?

Solution

  • The problem solved by following:

    1. The div element in main.html loads review.html.
    2. review.html can access the div element in main.html.
    3. Hence, any links clicked on review.html, jQuery/javascript can be performed to refresh the div in main.html.