使用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内容

回答

相关问题