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

我正在构建一个链接到一个数据库的网站，该数据库的界面由制表符和portlet组成，所有这些都是使用jQuery UI构建的。jQuery UI：刷新可排序的portlet，而不刷新整个页面

main.jsp中火起来的标签：

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

和price.jsp文件包含在main.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功能！

来源

2011-09-18 revvy

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

来源

2011-09-18 11:17:00

天才！谢谢一个buunch！：D – revvy

现在，我试过了。（响应）和.load（'web.jsp'）函数..有一件事是我能够刷新页面，但在网页加载后数据库中更新的任何新数据不反映在表中，当我打刷新。我使用下面的代码：'$（函数（）{$ （ “按钮”）点击（函数（）{ \t \t $阿贾克斯（{ \t \t网址： “DealList.jsp”， \t \t成功：函数（）{ \t \t $（ '＃blotterpg'）负载（ 'DealList.jsp'）; \t \t。} \t}）; 返回FALSE; \t}）;“任何想法如何当我刷新数据时，使数据表更新数据？ – revvy

'$（'blotterpg'）'是什么？是你的表的ID？ –

嗨，只为那些有机会在这个问题的第二部分（页面不更新最新的数据库记录），我设法修复它。

经过大量的代码，我发现这真是一个IE问题。 IE首先打开IE并启动JSP页面时，IE会缓存数据库的视图。因此，当你点击IE刷新按钮时，反映数据库的后续更新，但不会使用jquery ajax .load（'.jsp'）函数。 .load（' .jsp'）函数基本上可以让您在您打开IE时第一次加载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上测试过它，并且刷新按钮通常有或没有上面的代码。所以你去了。

来源

2011-09-20 03:32:01 revvy

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

回答

相关问题