Updating DOM images array with ajax

Question

My html contains different images, without any legality - all located under some table. For example homepage.htm:

<table id="imagesTable">
    <tr>
        <td>
            <img src="img1.png">
            <div>
                <img src="img2.png">
            </div>
        </td>
        <td>
            <div>
                <div>
                    <img src="img3.png">
                </div>
            </div>
        </td>
    </tr>
</table>

The images sources in this page can be different every time I'm getting the page (but all other elements structure stays as is) and I want to update the page every 5 sec and update the new images instead of the old one (without refreshing the page). I tried to implement it with the following approach (without success):

function updatePage()
{
    $("#imagesTable").load("homepage.htm #imagesTable");
    window.setTimeout("updatePage()",5000);
}
...
<body onload="updatePage();">
....

any idea what I'm doing wrong? any other suggestions how to solve this issue?

Use setTimeout(updatePage,5000); instead. Do you have any errors? — Ionică Bizău
– Ionică Bizău, Commented Nov 17, 2013 at 7:25
Could it be a browser caching problem? It would make a big difference if you told us what the problem actually is? — jfriend00
– jfriend00, Commented Nov 17, 2013 at 7:26
Currently the existing images elements do change - but the new one don't (new images can be added into the table..) — ItayB
– ItayB, Commented Nov 17, 2013 at 12:27

Khanh TO · Accepted Answer · 2013-11-17 07:25:46Z

1

Replace:

$("#imagesTable").load("homepage.htm #imagesTable");
window.setTimeout("updatePage()",5000);

With:

$("#imagesTable").load("homepage.htm #imagesTable *");
window.setTimeout(updatePage,5000);

answered Nov 17, 2013 at 7:25

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ItayB Over a year ago

Doesn't help :( what does the asterisk stands for?

Khanh TO Over a year ago

@ItayB: * stands for all types of children. It means we get only the children of #imagesTable

ItayB · Accepted Answer · 2016-03-13 17:29:03Z

0

I came across my question again, so I'll add a short answer - my solution to the problem:

These images purpose was to indicate some of the system status; thus, I decided to separate the view and the data (MVC) and I've added JSON with the statuses state, which is called every 5 seconds (via ajax). Now in the client I've recreated the relevant DOM sections with the new images - which are suitable to the new system status.

Hope that's will help someone in the future :-)

Cheers!

answered Mar 13, 2016 at 17:29

ItayB

11.6k11 gold badges61 silver badges94 bronze badges

Collectives™ on Stack Overflow

Updating DOM images array with ajax

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related