Skip to main content
Bounty Ended with 50 reputation awarded by ummahusla
add plunkr
Source Link

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

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

Source Link

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