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，而不刷新整個頁面

回答

相關問題