Infinite list: after “Go back” to the list, the new elements are not there any more. How to restore

I thought the only way to keep a data array between pages was to save the array to a backend dbase and then call it again, either with a cookie or some back-end code to recognize that the user has returned to a previous page.

Is there an AJAX way to store an array in cache between pages?

You could maybe do it all in the same page with hide and show jQuery to hide a large div of the page and show another in it's place. I usually solve it all inside one page and avoid the problem of page back altogether.

===

The only other way I got around this was to include the data in the URL as parameters. The first page grabs the variables, links to the second page (passpage.html) adds the paraemters to the URL and the second page reads the variables and uses them to change the page.

The URL transfer is nice for creating links that can be saved or sent to friends to recreate any page. The demo really shows it's power, when you are using something like a background change.

Setup page:
Update line 10 js/jquery-2.1.0.min.js to your copy of Jquery
===============


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Author" content="Producerelease dot com - 2015">
  <title>Choose Background and Color</title>
<style>
</style>

<script type='text/javascript' src='js/jquery-2.1.0.min.js'></script>

<script>
$(document).ready(function () {
$(function () {
   $('#navigate12').click(function () {
     var text1 = $("#text1").val();
     var text2 = $("#text2").val();
     var text3 = $("#text3").val();
     var text4 = $("#text4").val();
     window.location.href = "./passpage.html?text1=" + text1 + "&text2=" + text2 + "&text3=" + text3 + "&text4=" + text4;
      });
   });
});
</script>

</head>
<body>
<br></br>
Enter URL to background image of your choice: <br>
<textarea rows="3" cols="100" id="text1" /></textarea><br>
<ul><b>Examples:</b>
<br> http://images.forwallpaper.com/files/thumbs/preview/82/822259__winter-california-wallpapers-lake-kayaking-wallpaper-enjoy_p.jpg</br>
<br> http://thehedonista.com/wp-content/uploads/2012/05/wadi-rum-mars-scape.jpg</br>
<br> http://wallpaper.pickywallpapers.com/1920x1080/himalayas-panorama.jpg</br>
</ul>
<br> </br>
Enter the background color you wish either color name or code #123456 or green, blue, teal, cyan, tan, ivory<br>
<input id="text2" type="text"/><br></br>
<br></br>
<input id="text3" type="text"/><br>Not used yet<br>
<input id="text4" type="text"/><br>Not Used yet<br>
<br> </br>
<button id="navigate12"> Go to new page </button>


</body>
</html>

HTML:

Receiving page: passpage.html
Update line 10 js/jquery-2.1.0.min.js to your copy of Jquery
Name the file passpage.html
===================


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Author" content="Producerelease dot com - 2015">
  <title>passpage.html</title>
<script type='text/javascript' src='js/jquery-2.1.0.min.js'></script>
  <style type='text/css'></style>

<script>
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});
</script>

<script type="text/javascript">
$('document').ready(function(){
    var allVars = $.getUrlVars();
    var t1 = $.getUrlVar('text1');
    var t2 = $.getUrlVar('text2');
    var t3 = $.getUrlVar('text3');
    var t4 = $.getUrlVar('text4');

    $( "div.demo-container" ).html('<p>' + allVars + ' ' + t1 + ' ' + t2 + ' ' + t3 + ' ' + t4 + '</p>');
});
</script>

[/code]

[code=JavaScript]<script>
$(window).load(function(){
$(function(){
       $("#aChange").click(function(){
        
        $("#divBg").css("background-image", "url(http://www.poweranimalsunleashed.com/images/forest-light-900.jpg)");
    });      

      $("#bChange").click(function(){
        
        $("#divBg").css("background-image", "url(http://www.digitaldesktopwallpaper.com/wallpapers/unknown/waterfall_wallpaper_001_1024.jpg)");
    });      
        $("#cChange").click(function(){
        $("#divBg").css("background-image", "url()");
    });      
        var t2 = $.getUrlVar('text2');
        $("#dChange").click(function(){
        $("#divBg").css("background-color",t2);
    });        
        var t1 = $.getUrlVar('text1');
        var bgnew = ("url(" + t1 + ")");
        $("#eChange").click(function(){
        $("#divBg").css("background-image",bgnew );
    });        
        $("#fChange").click(function(){
        $("#divBg").css("background-color","none");
    });        
});
});//]]>
</script>[/code]
<style>
p {position:relative;left:4px;font-size:18px;padding:6px;color:green;border:2px gray solid; width:460px;}
</style>
</head>
<body>

<center><h1>User changes for background image and color</h1>
<table width="90%" cellpadding="8" border="2">
<tr><td width="33%" valign="top">

<h3> Direct linked background changes </h3>
1) <a id="aChange" href="#" >BG Forest</a>
<br> </br>
2) <a id="bChange" href="#" >BG Waterfall</a>
</td><td width="34%" valign="top">
<h3> User entered background </h3>
3) <a id="eChange" href="#" >BG Image from User's entered value</a>
<br> </br>
4) <a id="cChange" href="#" >CLEAR BG Image</a>
</td><td valign="top">
<h3> User entered background color </h3>
5) <a id="dChange" href="#" >BG Color from User's entered value</a><i> <br>(Needs Image Clear using #4 first to see the color)</i>
<br> </br>
6) <a id="fChange" href="#" >CLEAR BG Color Clear</a>
</td></tr>
<tr><td colspan="3" bgcolor="tan">
All variables passed from the previous page in the URL. <br></br> &nbsp; <i>(Note: #123456 type data does not show in the URL and is lost in a page refresh, but works when entered and clicked from the previous page.)</i>
&nbsp; <div class="demo-container"></div>
</td></tr>
</table>
<h2>Here come the changes</h2>
</center>
  <div id="divBg" style="color:teal;">

[INDENT]Random lines of text<br> </br>
For a particle to have physical mass, is it always necessary to have a mass term in the lagrangian?<br>
What is wrong with Comic Sans?<br>
TF2 Classic strangifier<br>
Add custom column to Users admin panel<br>
2-methylpropene to tert-butyl alcohol Reaction Mechanism<br>
How is it in my best interest not to submit a paper to two journals simultaneously?<br>
Why do academics work only nine months of the year?<br>
is it good for academic path if I publish too many papers in arxiv<br>
My credit card company is asking for my current income citing "Federal Regulations"<br>
How site design / logo © 2014 stack exchange inc; <br>
Wire Inside Walls or Ceilings<br>
Start a revolution in Oceania<br>
How to tweak K1, K2 and K3 distortion values in motion tracking?<br>
For a particle to have physical mass, is it always necessary to have a mass term in the lagrangian?<br>
What is wrong with Comic Sans?<br>
TF2 Classic strangifier<br>
How is it in my best interest not to submit a paper to two journals simultaneously?<br>
Why do academics work only nine months of the year?<br>
is it good for academic path if I publish too many papers in arxiv<br>
My credit card company is asking for my current income citing "Federal Regulations"<br>
How site design / logo © 2014 stack exchange inc; <br>
Wire Inside Walls or Ceilings<br>
Start a revolution in Oceania<br>
How to tweak K1, K2 and K3 undistortion values in motion tracking?<br>
For a particle to have physical mass, is it always necessary to have a mass term in the lagrangian?<br>
What is wrong with Comic Sans?<br>
TF2 Classic strangifier<br>
Add custom column to Users admin panel<br>
2-methylpropene to tert-butyl alcohol Reaction Mechanism<br>
How is it in my best interest not to submit a paper to two journals simultaneously?<br>
Why do academics work only nine months of the year?<br>
is it good for academic path if I publish too many papers in arxiv<br>
My credit card company is asking for my current income citing "Federal Regulations"<br>
<br>[/INDENT]

</div>

</body>
</html>

HTML:

I have another test demo page that actively updates a div with radio button choices further down inside the same page. A button can send the radio button choices to the URL as parameters and then calls the URL with the parameters to show the page again. Not sure if this is to far from your original question. Let me know.

Hope that helps.

Log in or Sign up

Advertising (learn more)

Infinite list: after “Go back” to the list, the new elements are not there any more. How to restore

amore123 Peon

Alexstorm Greenhorn

Log in or Sign up

Advertising (learn more)

Infinite list: after “Go back” to the list, the new elements are not there any more. How to restore

amore123 Peon

Alexstorm Greenhorn

Useful Searches