How to get to previous ajax request

Question

I'm working on one script which contains a lot of ajax requests. Script is working absolutely fine, I have there a lot of dynamic content which is changing depends on user's select or search input.

I've started looking for how I can to manipulate the browser history and basically make these request saved in browser history. I've went through MDN - Manipulating the browser history. I've got the general idea of this article, but I'm a bit struggling with implementing it in my project.

Here is a bit of code for live search part:

$('#search').keyup(Foundation.utils.throttle(function(e) {
    var searchField = $('#search').val();
    var regex = /[\D]+/;

    $('.loader').show();

    if (regex.exec(searchField)) {
      $.get("getEventsWithVideos.php?text=" + searchField, function(data) {
    });

    $.get("getClubsWithVideos.php?text=" + searchField, function(data) {
    });

    } else {
      
      // If searchField is a number
      $.get("getMembersWithVideos.php?text=" + searchField, function(data) {
        $events.empty();
        $clubs.empty();
        $members.empty();
        $membersdeep.empty();
        $members.append("<h4>Members</h4>");
        var vals = jQuery.parseJSON(data);

        $.get("getVideosDyn.php?membershipno=" + vals['Member']['membership_no'], function(data) {
        }); 
    
  });

}

}, 400));

Can please someone point my up with snippet based on my code, how I can create a link for each request to be saved in browser history so I could create a button and add on.click goto 1 request back.

Thank you in advance

Answer 1

I am proposing a solution using internal page links. When the user goes back or forward in the browser or you trigger the back() event you will have to bind to the "onpopstate" event and use the state object to get the window into the correct state.

$('#search').keyup(Foundation.utils.throttle(function(e) {
    var searchField = $('#search').val();
    var regex = /[\D]+/;

    $('.loader').show();

    if (regex.exec(searchField)) {
      $.get("getEventsWithVideos.php?text=" + searchField, function(data) {
         //I assume more code goes here and you also want set this as a history entry
         //add any parameters you need here to build this state when someone navigates to this                page
         var stateObj = { type: "getEventsWithVideos", parameter: searchField };

        //the third parameter is what will display in the browser, when you are on this state
         window.history.pushState(stateObj, "get events with videos", "#eventsWithVideos" + searchField);      
    });

    $.get("getClubsWithVideos.php?text=" + searchField, function(data) {
         var stateObj = { type: "getClubsWithVideos", parameter: searchField };             
         window.history.pushState(stateObj, "get clubs with videos", "#clubsWithVideos" + searchField);  
    });

    } else {

      // If searchField is a number
      $.get("getMembersWithVideos.php?text=" + searchField, function(data) {
        $events.empty();
        $clubs.empty();
        $members.empty();
        $membersdeep.empty();
        $members.append("<h4>Members</h4>");
        var vals = jQuery.parseJSON(data);

         var stateObj = { type: "getMembersWithVideos", parameter: searchField };             
         window.history.pushState(stateObj, "get clubs with videos", "#membersWithVideos" + searchField)

        $.get("getVideosDyn.php?membershipno=" + vals['Member']['membership_no'], function(data) {

        }); 

  });

}

}, 400));

You will also need to handle the onpopstate event to redo the ajax calls and get your page in the correct state when the user goes back or forward

window.onpopstate = function(e){
   if (e.state && e.state.type) {
      switch (e.state.type)
       {
         case "getEventsWithVideos": {//do ajax call for the first one here, to get the page state correct
               $.get("getEventsWithVideos.php?text=" + searchField, function(data) {});
           break;
          }
         case "getClubsWithVideo": //do ajax call for the second one here etc
         case "getMembersWithVideos":
       }
    }

  };

Here is a simple plunker illustrating how calling pushstate changes the url of the page. I am not using Ajax get queries in the plunker, but the state is changed by the text the user types in the search box.

http://plnkr.co/edit/HJTrW9GyKFduarl75IAd?p=preview