Asset Listing Page using ajax to load content

(Nick Papadatos) #1

Hi

 

I have an asset listing page showing x items with "previous 1 2 3 next" etc pagination. Is there a way to load the targeted content (click next/previous) without page refresh using ajax .load?

 

In a nutshell load content dynamically using ajax with pagination.

 

 

(Aleks Bochniak) #2

Yes.

 

See an example on our website here:

http://www.aqa.org.uk/news

 

It uses a 'search page' asset, but the same thing can be done with an asset listing.

(Nic Hubbard) #3

Pretty easy using jQuery. Quick example: http://jsfiddle.net/zedsaid/8tamm614/

(Nick Papadatos) #4

Thanks Nic and Aleks

 

Hi Nic - I had a similar block of code. It worked fine on the first instance i.e clicked on 2 of 5 in the pagination and loaded successfully but failed on the next 3 of 5 etc. I'm close but I'll keep at it.

 

Aleks - Very cool implementation! Do you mind me having a squiz (pardon the pun)

 

Regards

Nick

(Nic Hubbard) #5

 I had a similar block of code. It worked fine on the first instance i.e clicked on 2 of 5 in the pagination and loaded successfully but failed on the next 3 of 5 etc. I'm close but I'll keep at it.

 

Well, make sure if you are loading the navigation back in using ajax, that you are using the jQuery "on" event like I did in the example. So that it will "live" bind the click.

(Nick Papadatos) #6

Hey Nic - I made the changes you advised and now it works, thank you!

from this:
  $('.pagination a').on('click', function (e) {
to this:
 $(document).on('click', '.pagination a', function(e) {
(Nic Hubbard) #7

 

Hey Nic - I made the changes you advised and now it works, thank you!

from this:
  $('.pagination a').on('click', function (e) {
to this:
 $(document).on('click', '.pagination a', function(e) {

 

Glad to help!