在加載新頁面時保留內容

我有一個頁面（請參閱圖像的說明），用戶必須選擇幾個選項。 page description 在加載新頁面時保留內容

這個想法是，你首先點擊頂部框中的鏈接。然後在搜索框中輸入一個字符串，它會顯示div1中的相關鏈接。當您點擊div1中的鏈接時，相關鏈接將顯示在div2中。然後，點擊div2中的鏈接後，您會在div3中獲得結果。

我使用ajax/javascript爲div1和2創建鏈接並獲取div3的結果。問題是，當我點擊頁面上的任何鏈接時，即使下一步（例如顯示下一個鏈接）成功執行，搜索框也會被清除，div1，div2和搜索框中的內容會消失。

我該怎麼做才能防止這種情況，並保留searchbox，div1和div2的內容？

我現在的HTML代碼：

<!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>

在這個小提琴也看看：http://jsfiddle.net/X7aXG/1/

編輯：我編輯的問題說明。點擊任何鏈接將刪除div1，div2和搜索框的內容，即使下一步將被執行。

來源

2014-03-26 Marco Frost

請提供相關的javascript代碼方法使用...一個加號也將提供一個jsFiddle –

我試圖擺弄它了一下。 :) –

如果您使用ajax，則不應清除搜索框（除非您明確地在代碼中清除它），您確定該頁不刷新？ – markpsmith

您的鏈接不只是「參數添加到URL」，他們改變需要服務器請求的查詢參數，其將刷新整個頁面。

如果你想避免刷新頁面，但仍希望在URL（使它bookmarkeable），你可以店的URL哈希的位置（即代替?foo=bar使用#foo=bar）

存在着變化許多庫（see this discussion for some）幫助管理頁面的散列狀態並對散列中的更改作出反應。

來源

2014-03-26 15:34:13

這似乎正常工作。非常感謝你！ –

運行AJAX讓你列出links1腳本之前，檢查是否

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

來源

2014-03-26 11:59:49

這似乎並沒有幫助我解決我的問題。：/ –

我假設你的一個機制觸發額外的調用機制，檢索Div1的第一組鏈接，這將解釋Div2沒有受到影響。檢查它是否不發射空請求，然後獲得空響應將解決您的問題。 –

你可以嘗試使用瀏覽器，並檢查你是否得到相同的行爲。我假設修改url會觸發chrome上的其他請求，獲得空響應並清除鏈接。 –

在加載新頁面時保留內容

回答

相關問題