Below is my code..

HTML Code

<script src=".11.1/jquery.min.js"></script>
<div class="body">
    <div class="dropdown_div">
        <select id="q_type" class="dropdown" onchange="getSubject(this.value)">
            <option>Question1</option>
            <option>Question2</option>  
        </select>
    </div>
    <div class="dropdown_div">
        <select id="q_subject" class="dropdown">
            <option>Subject1</option>
        </select>
    </div>
</div>

JS Code

function getSubject(val){

  $("option", $("#q_subject")).remove();
  var option = "<option>Subject</option>";
  $("#q_subject").append(option);

    $.ajax({
      url: "api.path",
      type: 'POST',
      dataType: 'json',
      data: {id: id},
      async: true,
      cache: false,
      success: function(response) {
                    alert("Hi");
          $("option", $("#q_subject")).remove();
          var option = "<option>Subject1</option>"; 
          option += "<option value=1234>Subject2</option>"; 
          $("#q_subject").append(option); 
      }
    });
}

How do I use pushState into my code and let user can click back button to return last page and then still see the ajax data?

Below is my code..

HTML Code

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="body">
    <div class="dropdown_div">
        <select id="q_type" class="dropdown" onchange="getSubject(this.value)">
            <option>Question1</option>
            <option>Question2</option>  
        </select>
    </div>
    <div class="dropdown_div">
        <select id="q_subject" class="dropdown">
            <option>Subject1</option>
        </select>
    </div>
</div>

JS Code

function getSubject(val){

  $("option", $("#q_subject")).remove();
  var option = "<option>Subject</option>";
  $("#q_subject").append(option);

    $.ajax({
      url: "api.path",
      type: 'POST',
      dataType: 'json',
      data: {id: id},
      async: true,
      cache: false,
      success: function(response) {
                    alert("Hi");
          $("option", $("#q_subject")).remove();
          var option = "<option>Subject1</option>"; 
          option += "<option value=1234>Subject2</option>"; 
          $("#q_subject").append(option); 
      }
    });
}

How do I use pushState into my code and let user can click back button to return last page and then still see the ajax data?

• javascript
• jquery
• html
• ajax

• 1 I'm not clear with your problem?....You want to see the ajax data on the previous web page?? – AkshayJ Commented Sep 8, 2015 at 5:46
• Yes, Sorry for bad english. – Dreams Commented Sep 8, 2015 at 5:54
• You can store your ajax response in localstorage and fetch stored data in the next page.. – Rayon Commented Sep 8, 2015 at 5:56
• thanks but any hint? – Dreams Commented Sep 8, 2015 at 5:56

5 Answers 5

First of all, you should save data received from ajax request to browser local storage. Afterwards, in order to show ajax result when browser "back" button was fired, you should bind statements that you are calling in ajax.success() method to window onpopstate event. To omit code duplication, it`s better to use a declared function instead of anonymous one.

function success(response) {
    alert("Hi");
    $("option", $("#q_subject")).remove();
    var option = "<option>Subject1</option>"; 
    option += "<option value=1234>Subject2</option>"; 
    $("#q_subject").append(option); 
}

Save data to localstorage and call success function:

 $.ajax({
      url: "api.path",
      type: 'POST',
      dataType: 'json',
      data: {id: id},
      async: true,
      cache: false,
      success: function(response) {
          localStorage.setItem("response", response);
          success(response);
      }
    });

Call success() when "back" button was fired:

window.onpopstate = function (e) {
    var res = localStorage.getItem('response');         
    success(res);
}

I would rather suggest you to use sessionStorage which expires when the browser window is closed :)

 $.ajax({
          url: "api.path",
          type: 'POST',
          dataType: 'json',
          data: {id: id},
          async: true,
          cache: false,
          success: function(response) {
              sessionStorage.setItem("DataSaved", response);
              success(response);
          }
        });

And then

window.onpopstate = function (e) {
    var res = sessionStorage.getItem('DataSaved');         
    success(res);
}

You can solve this using the local Storage or Session storage. You will also need to have a onload function callback, to check if there are any previous values that you stored in the local/session storage, if yes, then show that data in the select box.

I noticed this Back() issue when using Ajax to navigate an MVC-5 application from within a JavaScript generated diagram. All clicks in the diagram are handled by Ajax.

Above solutions do not replace the plete body, in the repaired cases a Back() would restore just the edit fields. In my case, I don't need that. I need to replace the entire page from the AJAX and also enable the Back button to return to my original diagram context.

I tried above solution to replace body, and I have to note, it would only trigger the window.pop event after

 history.pushState({}, '')

But when the event triggered and it uses Ajax to fill the body, my Javascript would not properly re-initialize the diagram page.

I decided to use another pattern, to circumvent the the window.pop event and avoid the back-issue. Below code will not return into the Ajax code context, but instead simply replace current page, processing the Ajax return information from the server (=Controller) as a redirect link, like

    var url = "/ProcessDiagram/MenuClick?mand=" + idmenuparent+"_"+citem;  // my Ajax
    $.get(url,
        function (data) {
            window.location = data;  // Server returns a link, go for it !
            return true;             // Just return true after going to the link
        });

.. this will preserve the Back() context, because the browser will take care of things.

Controller side poses the redirect link, like

    public ActionResult MenuClick(string mand)
    {
        List<string> sl = mand.Split(new char[] {'_'}).ToList();
        var prId = int.Parse(sl[0].Substring(3));

        if (sl[1] == "PU")
            return Content("/ProductionUnitTypes/Details/" + UnitContextId(prId) );

        if (sl[1] == "IR")
            return Content("/ItemRoles/Details/" +  RoleContextId(prId) );
       
        // etcetera
    }

I solved it by including the below code just before the $.get() function

$.ajaxSetup({cache: false});

It works! Try it :)