get ajax previous wordpress post with browser backbutton

Question

I am new in ajax wordpress,I have shown the post with ajax,but now i have problem i want to show the previous post with ajax,means i have shown the posts with ajax and when user click on the one post and it displays and when click on the browser backbutton then previous posts does not show.Can any one tell me how to show the previous wordpress ajax post with browser backbutton. Here is the code i have used

 <script type="text/javascript">
    jQuery(document).ready(function($) {
    jQuery(".ajaxclick").click(function() {
    var post_id1 = $(this).parent("li").attr("id");
    var pageurl = $(this).attr('href');
    alert(pageurl);
    var ajaxURL = '<?php echo get_admin_url(); ?>admin-ajax.php';
    $.ajax({
    url: ajaxURL,
    type: 'POST',
    beforeSend: function() {
    $("#loading-animation").hide();
    $("#ajaxloader").show();
    },
    complete: function() {
    $("#loading-animation").show();
    $("#ajaxloader").hide();
    },
    data:   {
    action: 'load-content',
    post_id: post_id1 
    },
    success: function(response) {
    jQuery("#loading-animation").addClass('loadingstyle');
    jQuery("#loading-animation").html(response);
    return false;
    }

    });
    });
    });
    </script>

Take care of formatting your code in future.. – rahularyansharma Apr 15 '13 at 04:40 — rahularyansharma, Apr 15 '13 at 04:40

egig · Answer 1 · 2013-04-15T05:26:09.003

1

Use hash #,

$(function(){
   if(location.hash === 'somepage'){
     //do ajax again automatically here
   }
 });

and add hash on success:

success: function(response) {
jQuery("#loading-animation").addClass('loadingstyle');
jQuery("#loading-animation").html(response, function(){
   location.hash = 'somepage';//<<-- must be identic with loaded page and same with above
});

good luck!

edited Apr 15 '13 at 05:26

answered Apr 15 '13 at 04:49

egig

4,370
5
29
50

i have created a another function but did not understand how to implement. – ravinder Apr 15 '13 at 05:15
jQuery(document).ready(function($){ if(location.hash === '#loading-animation'){ var ajaxURL = 'admin-ajax.php'; alert(ajaxURL); $.ajax({ url: ajaxURL, type: 'POST', data: { action: 'load-content', post_id: post_id1 }, success: function(response) { jQuery("#loading-animation").addClass('loadingstyle'); jQuery("#loading-animation").html(response, function(){ location.hash = 'loading-animation'; }); return false; } }); } }); – ravinder Apr 15 '13 at 05:25
seems good function, just embed it inside ``, go to your dahboard->appeareance->editor and edit header.php. look: use this: `if(location.hash === 'loading-animation')`, remove the hash (#). – egig Apr 15 '13 at 05:31
i have used this function and also placed this function but i am not getting desired output:( – ravinder Apr 15 '13 at 05:49

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

there is a jquery plugin that seems to manage that efficiently

This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event.

http://benalman.com/projects/jquery-hashchange-plugin/ https://stackoverflow.com/a/173075/1061871

html5 solution as well : https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

edited May 23 '17 at 11:57

Community

1
1

answered Apr 15 '13 at 04:59

mikakun

2,203
2
16
24

score 0 · Answer 3 · answered Apr 23 '13 at 04:54

Hi have solved this issue and now ajax posts are working fine with browser back button and forward button, this code is used after the ajax posts are loaded with ajax,and then this code will use for showing with browser back button here is the code:

    // Bind an event to window.onhashchange that, when the hash changes, 
$(window).on('hashchange', function(){
//check if hash tag exists in the URL
if(window.location.hash) {
var ajaxURL1 = '<?php echo get_admin_url(); ?>admin-ajax.php';
//set the value as a variable, and remove the #
var post_id1= window.location.hash.substring(1);
$.ajax({
url: ajaxURL1,
type: 'POST',
cache:false,
data:   {
action: 'load-content',
post_id: post_id1
},
success: function(response) {
jQuery("#loading-animation").addClass('loadingstyle');
jQuery("#loading-animation").html(response);
return false;
}   
});
}
else
{
window.location="http://203.134.217.4/testingwp/";
}
});

get ajax previous wordpress post with browser backbutton

3 Answers3