Jump to content

Loading and paginating child pages


houseofdeadleg
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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" );
});
  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

  • 7 months later...

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

 

 

 

Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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');

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

/* 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 ;) 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...