houseofdeadleg Posted February 25, 2016 Share Posted February 25, 2016 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 More sharing options...
LostKobrakai Posted February 25, 2016 Share Posted February 25, 2016 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. Link to comment Share on other sites More sharing options...
diogo Posted February 25, 2016 Share Posted February 25, 2016 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. 2 Link to comment Share on other sites More sharing options...
Sergio Posted February 25, 2016 Share Posted February 25, 2016 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" ); }); 1 Link to comment Share on other sites More sharing options...
diogo Posted February 25, 2016 Share Posted February 25, 2016 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. 1 Link to comment Share on other sites More sharing options...
Sergio Posted February 25, 2016 Share Posted February 25, 2016 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 More sharing options...
houseofdeadleg Posted February 25, 2016 Author Share Posted February 25, 2016 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. Link to comment Share on other sites More sharing options...
diogo Posted February 25, 2016 Share Posted February 25, 2016 Open the console and see if you get some errors. Link to comment Share on other sites More sharing options...
Kemal Posted September 29, 2016 Share Posted September 29, 2016 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 More sharing options...
diogo Posted September 29, 2016 Share Posted September 29, 2016 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 2 Link to comment Share on other sites More sharing options...
Kemal Posted September 29, 2016 Share Posted September 29, 2016 Just one word -> Appriciate! Link to comment Share on other sites More sharing options...
Kemal Posted September 30, 2016 Share Posted September 30, 2016 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 More sharing options...
diogo Posted September 30, 2016 Share Posted September 30, 2016 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 More sharing options...
Kemal Posted September 30, 2016 Share Posted September 30, 2016 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 More sharing options...
diogo Posted September 30, 2016 Share Posted September 30, 2016 /* 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 More sharing options...
Kemal Posted September 30, 2016 Share Posted September 30, 2016 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 More sharing options...
diogo Posted September 30, 2016 Share Posted September 30, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now