jQuery UI: refresh sortable portlet without refreshing entire page

I am building a site linked to a database whose interface composes of tabs, and portlets within the tabs, all built using jQuery UI.

main.jsp fires up the tabs:

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

and a price.jsp file included in main.jsp fires up the portlets:

<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" )
            开发者_StackOverflow社区.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>

Within price.jsp, in one of the portlets, I have tabular data that a user might want to refresh from time to time as the database records change, without refreshing any other portlets in that tab.

So I'd have a button in the portlet that says refresh:

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

However, what this does is that it not only refreshes the other portlets, it refreshes the entire page! This is not what I intended.

I think the onclick function should be something like

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

but I am not too familiar with the jQuery syntax.

Hope someone can help me figure how to change the onclick function of the button!

What you want is an AJAX request. Take a look at $.ajax. You'll want to return the table's HTML as the response from the script $.ajax requests. Then update your table using $('#tableID').html(response) within the success: function(response) part of the $.ajax call.

Hi just for those who chance upon the second part of this problem (page not updating the latest database records), I managed to fix it.

After much playing around with the codes, I've discovered that this is really an IE problem. IE caches the view of the database when u first open IE and fire up the JSP page. As such, subsequent updates to the database will be reflected when u hit the IE refresh button, but not that using the jquery ajax .load('.jsp') function. The .load('.jsp') function basically brings you back to that cached view when you first loaded the JSP page when u opened IE. So unless you closed and reopened IE, the refresh button used to refresh the table data will not give you records updated after you first fired up the JSP page.

The work around to this is to put these codes before you script the JSP page:

<%
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
%>

or a meta code in the header that reads:

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

Now this workaround is only for those who have problems with IE. I've tested it on chrome and the refresh button functions normally with or without the code above. So there you go.