使用jQuery从URL加载动态div内容 [英] Loading dynamic div content with jQuery from a URL

问题描述

我有一个jQuery搜索脚本，它使用用户标签来定义他们想要使用的搜索类型。当用户搜索时，会创建一个类似于<键入 / 查询 /的URL。但是，当您重新加载页面时，单击转到其他页面的结果或从前一页面返回时搜索结果不再存在。为什么会这样，我该如何解决这个问题？我不想使用任何插件。

我的jQuery代码是：

 （$ {code> $（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 ='我的搜索'; 
 $（' #results'）。hide（）; 
} 
 $ .ajax（ {
类型：'GET'，
 url：url，
 dataType：'html'，
成功：函数（结果）{
 $（'＃results' ）。html的（结果）; 
} 
}）; 
}）; 
 var textlength = $（'＃query'）。val（）。length; 
 if（textlength< = 0）{
 $（'＃query'）。focus（）; 
} else {
 $（'＃query'）。blur（）; 
} 
}）; 
  

解决方案

当您重新加载页面时，缺少是因为它们不在文档源中;他们已经被添加到DOM以后。

我认为你有两种选择，第一种是我通常使用的。

当您执行搜索时，请将搜索条件或搜索结果存储在服务器上，以便在下一次呈现页面时，将结果与其一起呈现。我使用ASP.NET MVC 3并使用PartialView执行此操作。当我使用jQuery执行搜索时，它会导致服务器呈现相同的PartialView，并将结果HTML片段插入到结果div中。

或者，您需要激发当页面重新加载时，你的jQuery再次搜索。

重新提交搜索还是缓存结果最好取决于搜索的成本和搜索结果的大小很可能是。

I have a jQuery search script that uses tabs for the user to define which search type they want to use. When a user searches, a URL is created which is something like #type/query/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be and how can I solve this issue? I do not want to use any plug-ins either.

My jQuery code is:

$(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();
    }
});

解决方案

When you reload the page, the reason that the results are missing is because they aren't in the document source; they've been added to the DOM later.

I reckon you have two choices, the first of which I generally use.

When you execute your search, have either the search criteria or the search results stored at the server so that when the page is next rendered, the results are rendered with it. I use ASP.NET MVC 3 and do this using a PartialView. When I use jQuery to execute the search, it causes the server to render the same PartialView and inserts the resulting HTML fragment into the results div.

Alternatively, you need to fire your jQuery search again when the page is reloaded.

Whether it's better to resubmit the search or to cache the results depends on how expensive the search is and how big the result set is likely to be.

这篇关于使用jQuery从URL加载动态div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！