How can I load a project when the user hits the back button?

Question

I have an application. When a user clicks "Add to Cart" or "Save Project" it calls the appropriate url to save the data and then redirects the user to the correct page:

      if (add_to_cart == true) //If we are adding to cart
      {
        $.ajax
        (
          {
            //Note: tf_cart.module must contain $_POST['app'] $jpg = xmlp_f_save_jpg($_POST['file'], $_POST['app']);
            type: "POST",
            processData: false,
            url:  SITE_URL + "/system/atc/" + app_type + "/0/" + session_id + "/0/?prjid=" + project_id, //send data to this url
            data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src + "&rid=" + revision_id + "&cid=" + cart_id + "&app=html5" //send these as post variables to the url
          }
        ).done(function(msg) //When we get a response from the server after we POST
        {
          //console.log("Project added to cart. "); //This is for testing the canvas element on screen - leave this code here
          window.location = SITE_URL + "/cart/?pid=" + partner_id; //Send the user to the cart page
        });
      }
      else //If we are saving the project
      {
        $.ajax
        (
          {
            //Note: xmlproject.module must contain $_POST['app'] $jpg = xmlp_f_save_jpg( $_POST['file'], $_POST['app'] );
            type: "POST",
            processData: false,
            url:  SITE_URL + "/system/xml/import/" + app_type + "/" + session_id + "/?prjid=" + project_id, //send data to this url
            data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src + "&app=html5&rid=" + revision_id //send these as post variables to the url
          }
        ).done(function(msg)  //When we get a response from the server after we POST
        {
          var parser = new DOMParser(); //create a new DOMParser
          var doc = parser.parseFromString(msg, "application/xml"); //convert the string to xml
          pid = doc.getElementsByTagName('pid')[0].childNodes[0].nodeValue; //Get the pid (project id) from the xml
          rid = doc.getElementsByTagName('rid')[0].childNodes[0].nodeValue; //Get the rid (revision id) from the xml
          //console.log("Project saved. " + " pid=" + pid + " rid=" + rid); //This is for testing the canvas element on screen - leave this code here
          window.location = SITE_URL + "/user/mystuff/projects/view/" + pid + "/?pid=" + partner_id; //Send the user to this project's page
        });
      }

The issue I have is once the user is either at the Project Page or the Cart page and they hit the back button, it returns them back to the application with a blank project. What I want to happen is when they hit the back button, that project gets loaded.

I'm not sure how to go about this... any ideas?

Maybe some manipulation of the history so you can somehow reference the project to be loaded? — rfornal, Dec 03 '14 at 15:18
At this point you may want to look into a framework. Backbone is pretty easy to apply to an existing project, and if you use its [router](http://backbonejs.org/#Router) you get the functionality you're looking for out of the gate. However there's still the case of what happens if a user refreshes the page. Then you're SOL whatever you choose. You may want a localStorage solution too. — stakolee, Dec 03 '14 at 15:20

score 0 · Answer 1 · edited May 23 '17 at 12:21

You can solve your problem in a few different ways:

SOLUTION ONE (recommended imho): Along with updating your cart or saving your project, create a session-cookie with the cart/project pid. If the users goes back to the application page (your main page?) check for the existence of this session and then reload or redirect to the cart/project.

SOLUTION TWO (a bit hackish): Instead of redirecting the user to the cart's/project's url, redirect him to an intermediate page. This page will again redirect the user (read here), but this time to the real cart/project page. When the user will press the back button he will go back and then forward, again to his cart/project page.

SOLUTION THREE: Use the onbeforeunload event to warn the user and give him the chance to cancel his action of going back (this event fires whenever the user unloads the page and this is not a good solution imho).

SOLUTION FOUR: Use the HTML5 pushState in order to manipulate the user's browser history. Here is some info that might help you. (I haven't tried this myself so i can't guarantee anything).

SOLUTION FIVE (a hybrid): If your website is more of an APP then you should consider using a whole other architecture and workflow. You can use a client-side javascript library for dynamic views and DOM manipulation, like Google's AngularJS or Facebook's React. Don't direct the client to a new page everytime he needs to see new content (going from main page to cart page to project page, etc) because this is actually a complete page reload, and when the client goes back in history every page is again reloaded from scratch. Instead, use Ajax to load the new content (For example, a link like this <a href="/cart/?pid">go to cart</a> should be replaced with something like <a href="#" onclick="loadCart(pid);">go to cart</a>), the js libraries to update the page, and HTML5 pushState to change the user's history state. Save the client's cart and project as a session-cookie or on localStorage to quickly fetch this data whenever the client press 'back' or 'forward' buttons and then loading and showing him the appropriate content.

score 0 · Answer 2 · answered Dec 04 '14 at 13:47

At the beginning of my script, I check for the presence of the cookie, if it is there I delete the cookie (a new one will be generated if they save/add to cart again) and reload the page with the cookie information:

function common_init()
{
  var cookie = common_get_cookie("project_parameters");

  //Send the user back to the project they are working on when they hit the back button - AC 2014-12-04
  if ("" != cookie)
  {
    document.cookie = "project_parameters=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    window.location.href = (SITE_URL + "/Custom_App/?" + cookie);
  }
  //more code follows
}

and in the save project/add to cart function, I added:

document.cookie="project_parameters=app_type" + app_type + "&session_id=" + session_id + "&cart_id=" + cart_id + "&prjid=" + pid + "&rid=" + rid;

How can I load a project when the user hits the back button?

2 Answers2