jQuery UI：刷新可排序的 portlet，而不刷新整个页面

Question

我正在构建一个链接到数据库的站点，该站点的界面由选项卡以及选项卡内的 portlet 组成，所有这些都使用 jQuery UI 构建。

main.jsp 启动选项卡：

<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>

并且 main.jsp 中包含的 Price.jsp 文件启动 Portlet：

<script>
$(function() {
    $( ".column" ).sortable({
        connectWith: ".column",
        distance: 200,
        containment: 'parent',
        items: "li:not(.ui-state-disabled)"
    });

    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
            .end()
        .find( ".portlet-content" );

    $( ".portlet-header .ui-icon" ).click(function() {
        $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
        $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });

    $( ".column" ).disableSelection();
});
</script>

在 Price.jsp 中的一个 Portlet 中，我有用户可能希望不时刷新的表格数据当数据库记录发生变化时，无需刷新该选项卡中的任何其他 portlet。

因此，我会在 portlet 中添加一个显示“刷新”的按钮：

<button onclick="window.location.reload()">Refresh</button>

但是，它的作用是不仅刷新其他 portlet，还刷新整个页面！这不是我的本意。

我认为 onclick 函数应该是类似的东西

$(this).sortable({update: function(event, ui){ //some code here//} });

，但我不太熟悉 jQuery 语法。

希望有人能帮我弄清楚如何更改按钮的 onclick 功能！

Answer 1

您想要的是 AJAX 请求。看一下 $.ajax。
您需要返回表的 HTML 作为脚本 $.ajax 请求的响应。然后使用 $.ajaxsuccess: function(response) 部分中的 $('#tableID').html(response) 更新您的表格代码>调用。

Answer 2

您好，对于那些偶然发现此问题第二部分（页面未更新最新数据库记录）的人，我设法修复了它。

经过反复研究代码，我发现这确实是一个 IE 问题。当您第一次打开 IE 并启动 JSP 页面时，IE 会缓存数据库的视图。因此，当您点击 IE 刷新按钮时，将反映对数据库的后续更新，但不会反映使用 jquery ajax .load('.jsp') 函数。当您打开 IE 时第一次加载 JSP 页面时，.load('.jsp') 函数基本上会将您带回到缓存的视图。因此，除非您关闭并重新打开 IE，否则用于刷新表数据的刷新按钮不会为您提供首次启动 JSP 页面后更新的记录。

解决此问题的方法是在编写 JSP 页面脚本之前放置这些代码：

<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

或在标头中添加元代码，内容如下：

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content=0>

现在此解决方法仅适用于那些使用 IE 时遇到问题的人。我已经在 chrome 上对其进行了测试，无论有或没有上面的代码，刷新按钮都可以正常工作。所以就这样吧。