Loading and paginating child pages

[houseofdeadleg]

This may have been covered before, I did a search through the forum and found a couple of similar topics, but they went a bit over my head:)

I have a page that currently has around 14 child pages. There's a section in the parent that finds and displays the children as a list and I've added pagination to it without any trouble. However, clicking on next, etc reloads the whole page, I'd like to just reload the section with the list.

Hopefully that all makes sense.

[LostKobrakai]

Changing only parts of a page is javascript territory and therefore not a ProcessWire topic. I'd suggest looking into ajax and especially the pjax implementation, as it's quite simple to get started.

[diogo]

That would have to be done with Ajax. If you're using jQuery try something like this:

$(".MarkupPagerNav a").on("click", function() {
    $("#container").load( $(this).attr("href") + " #content" );
});

Where the markup would be something like:

<div id="container">
    <div id="content">
        <!--list and pagination go here-->
    </div>
</div>

I'm including the pagination on the loaded content, so you don't have to update its state manually with JS. But you can leave it out of the container and update the active link to the one you just pressed in that moment also.

[Sergio]

That would have to be done with Ajax. If you're using jQuery try something like this:

$(".MarkupPagerNav a").on("click, function() {
    $("#container").load( $(this).attr("href") + " #content" );
}");

Just a small correction, prevent default click behavior:

$(".MarkupPagerNav a").on('click', function(event) {
   event.preventDefault();
   $("#container").load( $(this).attr("href") + " #content" );
});

[diogo]

Just a small correction, prevent default click behavior:

Of course, completely forgot! Obrigado Sérgio!

I actually prefer to return false for this:

$(".MarkupPagerNav a").on('click', function() {
   $("#container").load( $(this).attr("href") + " #content" );
   return false;
});

Besides being slightly simpler, it also prevents propagation. Not that it matters that much in this case, but it makes sense to me to use preventDefault() only in the specific cases when i want to keep the propagation working and stopPropagation() in the opposite case.

Anyway, good catch! The code wouldn't work without it.

[Sergio]

Besides being slightly simpler, it also prevents propagation. Not that it matters that much in this case, but it makes sense to me to use preventDefault() only in the specific cases when i want to keep the propagation working and stopPropagation() in the opposite case.

Good point! Obrigado!

[houseofdeadleg]

Thanks guys, that works a treat. The only issue I've spotted so far is that it sometimes reloads the whole page, it doesn't seem to be always the same page number or any pattern I can make out.

[diogo]

Open the console and see if you get some errors.

[Kemal]

i need help about this code

here is my page: www.sediremlak.com

i am trying pagination with ajax 

<div id="container1">
	<div id="content1">
			<?php $pagination = $vitrin->renderPager();?>
			<?php echo $pagination; ?>		
      	
      		<?php foreach($vitrin as $p) { ?>
      			bla bla
      		<?php } ?>
	</div>
</div>

<script>
$(".MarkupPagerNav a").on('click', function() {
   $("#container1").load( $(this).attr("href") + " #content1" );
   return false;
});
</script>

 

every second click of next button on pagination,  page jump to top on load. reload page i think,  whats wrong?

everything i need is pagination like this forum uses on .

you can test it from www.sediremlak.com

 

 

 

[diogo]

You're loading the links dynamically, so your 'click' event won't be bound to them, and the click assumes the default behaviour (without JS). That's why the url changes, and you get a page refresh. Try this instead:

$("#container1").on('click','.MarkupPagerNav a', function() {

Like that. the event is delegated to "#container1" — that will never change — and the dynamic content is searched for from there down.

Documented here: http://api.jquery.com/on/#direct-and-delegated-events

 

Edit: FYI I have it working on the live website only by executing this block of code on the console:

$("#container1").on('click','.MarkupPagerNav a', function() {
   $("#container1").load( $(this).attr("href") + " #content1" );
   return false;
});

The miracle of inspector tools

[Kemal]

Just one word -> Appriciate! 

[Kemal]

what about ?

 $("#container1").animate({ scrollTop: 0 }, 'slow');

i change the script as

 $("#container1").on('click','.MarkupPagerNav a', function() {
	$("#container1").load( $(this).attr("href") + " #content1" );
    $("#container1").animate({ scrollTop: 0 }, 'slow');
	return false;
});

but not scroll to #container1 after i click on next button of pagination

what if i use

 $("html, body").animate({ scrollTop: 0 }, 'slow');

it goes to top of the page normally not top of the container1 div

 

[diogo]

On the first code you're trying to scroll inside the element itself. On the second code you're animating the whole page to it's top. You don't want either, what you want is to animate the whole page to the position of the top of the element, that you can get by using  $("#container1").offset().top

$("html, body").animate({ scrollTop: $("#container1").offset().top }, 'slow');

 

[Kemal]

thanks for your solution. i hope this helps other beginners who try to use pagination with ajax.

i have one last problem.

loading gif!

$("#container1").on('click','.MarkupPagerNav a', function() {
 
  $('#loading').show();  -> show loding gif 
  $('#container1').animate({opacity:0.1}, 200);  -> back ground dark
                              
  $("#container1").load( $(this).attr("href") + " #content1" );
  $("html, body").animate({ scrollTop: $("#container1").offset().top }, 'slow');

  $('#loading').hide(); ->hide loading gif
  $('#container1').animate({opacity: 1},200);  ->background light
  
	return false;
});

 

how should i place them? 

[diogo]

/* JS */

var $container = $("#container1"); // avoid calling jQuery all the time

$container.on('click','.MarkupPagerNav a', function() {
  
  $container.load( $(this).attr("href") + " #content1", function() {
  	$container.removeClass('loading');
  }).addClass('loading');
  
  return false;
});

/* CSS */

#container1 > * {
  opacity: 1;
  transition: opacity 200ms;
}
#container1.loading {
  background: url('http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif') no-repeat center 40vh;
}
#container1.loading > * {
  opacity: 0;
  transition: opacity 200ms;
}

Much simpler and lighter  

[Kemal]

Thanks,  you forgot to add jump top of div code i add it

var $container = $("#container1"); // avoid calling jQuery all the time

$container.on('click','.MarkupPagerNav a', function() {
  
  $container.load( $(this).attr("href") + " #content1", function() {
	$("html, body").animate({ scrollTop: $("#container1").offset().top }, 'slow');   // add old code here to scroll top of the div
  	$container.removeClass('loading');
  }).addClass('loading');
  
  return false;
});

now works fine.

Thanks for your help diogo!

[diogo]

You can still replace one instance of $("#container1") by $container on the line you just added. 

$("html, body").animate({ scrollTop: $container.offset().top }, 'slow');

It's good practice to avoid calling the jQuery function when not needed to save processing, and since you have the element already in a variable.