How to get to previous ajax request

Question

I am working on a single script that contains many ajax requests. The script works absolutely fine, I have a lot of dynamic content there, which changes depending on the user's choice or search.

I started looking for how I can manipulate the browser history, and basically make this request saved in the browser history. I went through MDN - Manipulating the browser history. I have a general idea for this article, but I'm struggling a bit with its implementation in my project.

Here is some code for the real-time 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 someone point my snippet to my code, how can I create a link for each request that will be saved in the browser history, so that I can create a button and add on.click goto 1 request back.

Thank you in advance

Answer 1

, . back(), onpopstate , .

$('#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));

onpopstate, ajax , .

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":
       }
    }

  };

plunker, , pushstate URL . Ajax plunker, , .

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