Preserve content while loading new page

Question

I have a page (see image for a description), where the user has to choose a few options. page description

The idea is, you first click on a link in the box on top. Then enter a string in the searchbox which will show you relevant links in div1. When you click on a link in div1, relevant links will be displayed in div2. Then, after clicking on a link in div2, you'll get your result in div3.

I use ajax/javascript to create the links for div1 and 2 and to get the result for div3. The problem is, when I click on any link on my page, the searchbox will be cleared and contents in div1, div2 and the searchbox disappear even though the next step (e.g. displaying the next links) will be successfully executed.

What can I do to prevent this and preserve the contents of the searchbox, div1 and div2?

My current html-code:

<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="icon" type="image/png" href="img/favicon.png">
      <script src="inc/OnlineLogs.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <title>Logs</title>
  </head>
  <body onload="getOnlineIds()">
      <div class="main">
          <div class="navigation">
              <a href="?loc=bad">bad</a> • 
              <a href="?loc=erf">erf</a> • 
              <a href="?loc=ess">ess</a> • 
              <a href="?loc=ffb">ffb</a> • 
              <a href="?loc=goe">goe</a> • 
              <a href="?loc=hal">hal</a> • 
              <a href="?loc=ham">ham</a> • 
              <a href="?loc=jen">jen</a> • 
              <a href="?loc=koe">koe</a> • 
              <a href="?loc=lei">lei</a> • 
              <a href="?loc=mue">mue</a> • 
              <a href="?loc=rau">rau</a> • 
              <a href="?loc=wil">wil</a> • 
              <a href="?loc=wit">wit</a>
          </div>
          <div class="search">
              Suche: <input type="text" id="input" onkeyup="getOnlineComms()">
          </div>
          <div class="onlines" id="onlinelist"></div>
          <div class="ids" id="ids"></div>
          <div class="log" id="log"></div>
       </div>
   </body>
</html>

Also take a look at this fiddle: http://jsfiddle.net/X7aXG/1/

EDIT: I edited the problem description. Clicking any link will remove the contents of div1, div2 and the searchbox, even though the next step will be executed.

Please, please, provide relevant code in question of javascript methods used... A plus would be to provide a jsFiddle too — A. Wolff, Mar 26 '14 at 11:49
The searchbox shouldn't be cleared if you're using ajax (unless you explicitly clear it in the code), are you sure the page isn't refreshing? — markpsmith, Mar 26 '14 at 12:02
@markpsmith I don't know if it's called "refreshing" when I click on a link which simply adds a few parameters to the url like the links in the top box... They don't do anything else than that. — Marco Frost, Mar 26 '14 at 12:04
id="onlinelist" and id="ids" - are they div1 and div2? in your fiddle I can see ids = msg; and idlist.innerHTML=""; on the ajax success callback - is this deleting the contents? — markpsmith, Mar 26 '14 at 12:22
onlinelist = div1 and ids = div2, yes. In my fiddle, i reset the content of div1 before filling it. That's right. But I don't think that this is the problem. :/ — Marco Frost, Mar 26 '14 at 12:30

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Your links don't simply "add parameters to the URL", they change the query params which requires a server request which will refresh your entire page.

If you want to avoid refreshing the page but still want changes in the URL (to make it bookmarkeable) you can store the location in the URL hash (i.e. instead of ?foo=bar use #foo=bar)

There exist many libraries (see this discussion for some) that help with managing the hash state of your page and reacting to changes in the hash.

score 0 · Answer 2 · answered Mar 26 '14 at 11:59

0

Before running the script that AJAX gets you list for links1, check if

$('#input').val() != ""

answered Mar 26 '14 at 11:59

Matas Vaitkevicius

58,075
31
238
265

That does not seem to help me with my problem. :/ – Marco Frost Mar 26 '14 at 12:13
I assumed that one of your mechanisms is triggering additional call to mechanism that retrieves first set of links for Div1, that would explain Div2 not being affected. Checking if it's not firing empty request and then getting empty response would have solved your problem. – Matas Vaitkevicius Mar 26 '14 at 12:32
Could you try using explorer and check if you get same behaviour. I am assuming that modifying url fires additional requests on chrome, that get empty response and clear the links. – Matas Vaitkevicius Mar 26 '14 at 12:35
It doesn't matter which link I click. The contents will always be removed. – Marco Frost Mar 26 '14 at 12:36
Same behaviour in IE9. – Marco Frost Mar 26 '14 at 12:36
Why are you skipping 1st element? for (index = 0; index < ids.length; ++index) – Matas Vaitkevicius Mar 26 '14 at 12:42
I am assuming a lot today, but could you try storing ids in global javascript array var ids = []; and see if not touching url affects things. – Matas Vaitkevicius Mar 26 '14 at 12:45
`++index` is not skipping the first element. The last part of an for-loop is touched, after the iteration. – Marco Frost Mar 27 '14 at 13:59
I don't know how to use global arrays in java, yet. Have to try it. – Marco Frost Mar 27 '14 at 13:59

Preserve content while loading new page

2 Answers2