刷新页面的特定部分

Question

我目前有一个模式，可以从我的数据列表中删除一个项目。 选择删除后，我要刷新网页。 此时，它正在刷新整个页面，并将我重定向到“ Searches选项卡。 我只想刷新“ Lists选项卡。 我怎样才能做到这一点？

我的HTML：

<div class="row zero-margin">
        <div class="col-xs-12">
            <div id="tabstrip">
                <ul id="tab-strip-options">
                    <li id="listItem1" class="k-state-active">
                        Searches
                    </li>
                    <li id="listItem2">
                        Lists
                    </li>
                </ul>
                <div class="saved-search-content">
                    <div id="gridSearch"></div>
                </div>
                <div class="saved-list-content">
                    <div id="gridList"></div>
                </div>
            </div>
        </div>
    </div>

我的JavaScript函数：

function deleteItemsFromList(data) {
    if(data.IsSuccess) {
        window.location.reload();
        CloseModal("deleteSearchListModal");
        showSuccessMessage('List was successfully deleted!');
    }
}

Answer 1

服务器端数据存储的解决方案：

在网页上进行部分更新的最简单解决方案是使用AJAX请求。 更新列表内容时，必须从Web来源加载列表内容。

$( "#gridList" ).load( "ajax/getListContent" );

当然，您的ajax/getListContent必须生成正确的HTML子结构（无html，body标签），例如：

<div>...</div>

通常，在地址ajax/getListContent上创建一个数据源，该数据源将返回以HTML结构化的数据，然后可以在代码中执行以下操作：

function deleteItemsFromList(data) {
    if(data.IsSuccess) {
        $( "#gridList" ).load( "ajax/getListContent", function() {
           CloseModal("deleteSearchListModal");
           showSuccessMessage('List was successfully deleted!');
        }
    }
}

Answer 2

如果您使用某种插件，我将完全忽略，但是如果您只想刷新整个HTML文档的一部分，则必须使用AJAX并从脚本中删除window.location.reload() 。 像这样：

function deleteItemsFromList(data) {
    if(data.IsSuccess) {
        $.ajax(/*params here*/).done(function(data){
            //refresh just the #gridList part
            CloseModal("deleteSearchListModal");
            showSuccessMessage('List was successfully deleted!');
        }
    }
}

也许这不是正确的顺序，但重要的是AJAX :)