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, Feb 06 '14 at 11:26
Still Refreshed but duplicated all my above table rows, the refresh also paused my whole screen. — Pomster, Feb 06 '14 at 11:31
Try adding a `return false;` statement before ending your `refreshTable` function. — adripanico, Feb 06 '14 at 11:36

score 0 · Answer 1 · answered Feb 06 '14 at 11:31

0

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);

answered Feb 06 '14 at 11:31

The Fire TITAN

124
6

Sorry new quick question, Whats the difference between setTimeout and setInterval? – Pomster Feb 06 '14 at 11:33
@Pomster [here you find the docs](https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval). – moonwave99 Feb 06 '14 at 11:35
setTimeout execute the code only once after the timeout (in example 5s) And setInterval execute the code each interval (in example 5s too ) – The Fire TITAN Feb 06 '14 at 11:48
The above does nothing every 5 seconds. I see the code passes though but nothing happens. – Pomster Feb 06 '14 at 11:52
Where come the new data to refresh your table ? – The Fire TITAN Feb 06 '14 at 11:53

Partial refresh page, Refresh div with jQuery?

1 Answers1