CODEWITHSUNDEEP
jqueryjquery-load
MrCooL
MrCooL

Reputation: 926

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 ?

Upvotes: 0

Views: 1218

Answers (2)

MrCooL
MrCooL

Reputation: 926

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.

Upvotes: 0

funerr
funerr

Reputation: 8176

Ok if I understood you correctly,
You want a way to load more content after the ajax call for those links has finished.
For this (If your using jQuery) I would do this:
You will need to use :".delegate()" function. (for more info read here).
Now for the code: 

<script>
var href = $(this).attr('href');
$('#content_pane').load( href );
$('#content_pane').delegate('#your-link-id-here', 'click', function(){
var href2 = $('.your-link-class-here').attr('href');
$('#content_pane').load( href2 );//If you want your links to stay, put another div insted of content_pane.
});
</script>

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

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

Upvotes: 1

Related Questions