Partial refresh page, Refresh div with jQuery?

Question

I have my webpage split up into zones which are divided using a table and different table rows and cells.

The content of one of my table cells needs to be refreshed every now and then to load new entries. I don't want to refresh the whole page but just the table cell. I have placed a div inside the cell to try make the refresh easier.

<asp:TableRow style="width:100%; height:auto;">
<asp:TableCell style="width:100%; height:auto;" ColumnSpan="5" VerticalAlign="Top">
    <div id="tableHolder">
       <ICCM:clsICCMWebPartZone ID="LowerZone" runat="server" AllowLayoutChange="true" LayoutOrientation="Vertical"  style="width:100%; height:auto;" TitleBarVerbButtonType="Image" WebPartVerbRenderMode="TitleBar" >
       <ZoneTemplate>
       </ZoneTemplate>
       <DeleteVerb   ImageUrl="~/ICCMImages/Close.png" Visible="false"/>
       <RestoreVerb  ImageUrl="~/ICCMImages/Maximise.png" />
       <MinimizeVerb ImageUrl="~/ICCMImages/Minimise.png" />
       </ICCM:clsICCMWebPartZone >
    </div>
</asp:TableCell>
</asp:TableRow>

As you can see the div i want to refresh has the ID tableHolder.

Here are two ways i have tried but can't get Working. The refreshTable() function is called from document ready.

function refreshTable() {

    setTimeout(function () {
        var pathtopage = window.location.href;
        $('#tableHolder').html(pathtopage).load(pathtopage + '#tableHolder');
    }, 5000);

//    $('#tableHolder').load('LowerZone', function () {
//        setTimeout(refreshTable, 5000);
//    });
}

What is currently happening is after 5 seconds when the refresh is triggered the section i want refreshed disappears and the text url of my page is shown, then the content returns but table rows above the one i want refreshed duplicate.

I do get an error on the page but i think its because all my table rows are duplicated after the refresh.

Uncaught Sys.InvalidOperationException: Sys.InvalidOperationException: A control is already associated with the element.

I think the load should be something like this : $('#divToBeLoaded').load(document.URL + '#divToBeLoaded'); — The Dark Knight
Still Refreshed but duplicated all my above table rows, the refresh also paused my whole screen. — Pomster
Try adding a return false; statement before ending your refreshTable function. — adripanico

The Fire TITAN The Fire TITAN · Accepted Answer · 2014-02-06T11:31:30

Im not sure but try this

setTimeout(function(){$('#tableHolder').html($('LowerZone').html());},5000);

/* or if you want to refresh each 5 secondes */

setInterval(function(){$('#tableHolder').html($('LowerZone').html());},5000);

Partial refresh page, Refresh div with jQuery?

1 Answers