使用jQuery從URL加載動態div內容

我有一個jQuery搜索腳本，它使用選項卡爲用戶定義他們想要使用的搜索類型。當用戶搜索時，創建一個類似於＃類型的網址/查詢 /。但是，當您重新加載頁面時，單擊轉到其他頁面的結果或從前一頁面返回時搜索結果不再存在。爲什麼會這樣，我該如何解決這個問題？我不想使用任何插件。使用jQuery從URL加載動態div內容

我jQuery代碼是：

$(document).ready(function() { 
    $('[id^=type_]').click(function() { 
     type = this.id.replace('type_', ''); 
     $('[id^=type_]').removeClass('selected'); 
     $('#type_' + type).addClass('selected'); 
     return false; 
    }); 
    $('#type_search').click(); 
    $('#query').keyup(function() { 
     var query = $(this).val(); 
     var url = '/' + type + '/' + query + '/'; 
     window.location.hash = '' + type + '/' + query + '/'; 
     document.title = $(this).val() + ' - My Search'; 
     $('#results').show(); 
     if (query == '') { 
      window.location.hash = ''; 
      document.title = 'My Search'; 
      $('#results').hide(); 
     } 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function (results) { 
       $('#results').html(results); 
      } 
     }); 
    }); 
    var textlength = $('#query').val().length; 
    if (textlength <= 0) { 
     $('#query').focus(); 
    } else { 
     $('#query').blur(); 
    } 
});

來源

2011-07-16 Cosmo Posmo

當你重新載入頁面，該結果丟失的原因是因爲他們沒有在文檔源;他們以後被添加到DOM。

我認爲你有兩種選擇，我通常使用的第一種選擇。

執行搜索時，請將搜索條件或搜索結果存儲在服務器上，以便在下一次呈現頁面時，結果將與其一起呈現。我使用ASP.NET MVC 3並使用PartialView執行此操作。當我使用jQuery執行搜索時，它會導致服務器呈現相同的PartialView，並將生成的HTML片段插入到結果div中。

或者，您需要在重新加載頁面時再次觸發您的jQuery搜索。

重新提交搜索還是緩存結果最好取決於搜索的成本和結果集可能有多大。

來源

2011-07-16 17:44:05

散列應該在頁面重新加載後留下，因爲它是瀏覽器歷史記錄的一部分。因此，您可以解析document.location.hash以獲取有關所選查詢類型和搜索的知識。

//$(function() { 
    if(document.location.hash) { 
     var hash = document.location.hash; 
     var split = hash.split('/'); 
     var queryType = hash[1]; 
     var searchTerm = hash[2]; 
     $('#type_'+queryType).addClass('selected'); 
     $('#query').text(searchTerm); 
     $('#query').keyup(); 
    } 
//});

落後於您的安裝例程。

來源

2011-07-16 17:46:05 marc

只需將代碼放置在安裝程序後面即可。 – marc

使用jQuery從URL加載動態div內容

回答

相關問題