{"id":626,"date":"2010-06-18T09:42:26","date_gmt":"2010-06-18T08:42:26","guid":{"rendered":"http:\/\/www.jaconet.org\/?p=626"},"modified":"2025-02-24T22:56:52","modified_gmt":"2025-02-24T21:56:52","slug":"ajaxobject-tips-periodic-update-of-contents","status":"publish","type":"post","link":"https:\/\/www.lemie5lire.com\/?p=626","title":{"rendered":"ajaxObject tips: periodic update of contents"},"content":{"rendered":"

One of the possibles use of ajax technology is to have an automatic update of data in a web page.This is easily possible using the ajaxObject.<\/p>\n

First of all, we have to think to an object that is available in the ajaxObject: timerObject.<\/p>\n

This is normally used inside ajaxObject for timeout and progress bar, but it can also be used any time a timer is needed.<\/p>\n

So, what code to do this?<\/p>\n

Firstly let define a new ajaxObject to prepare a request for content.<\/p>\n

1
<\/div><\/td>
<<\/span>p style=<\/span>"text-align: justify;"<\/span>><<\/span>span style=<\/span>"color: #333399;"<\/span>><<\/span>em><\/span>var<\/span> af1=<\/span>new<\/span> ajaxObject(<\/span>"ajax.php"<\/span>,<\/span>"ID1"<\/span>)<\/span>;<\/<\/span>em><\/<\/span>span><\/<\/span>p><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

This has been already discussed in my previous article.<\/a><\/p>\n

Then we have to create a new timer that will make the request:<\/p>\n

1
<\/div><\/td>
<<\/span>p style=<\/span>"text-align: justify;"<\/span>><<\/span>em><<\/span>span style=<\/span>"color: #333399;"<\/span>><\/span>var<\/span> ti1=<\/span>new<\/span> timerObject(<\/span>5000<\/span>,<\/span>function<\/span> (<\/span>)<\/span> {<\/span>af1.update<\/span>(<\/span>"t=3"<\/span>)<\/span>;<\/span>}<\/span>)<\/span>;<\/<\/span>span><\/<\/span>em><\/<\/span>p><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The three parameters of timeObject call are:<\/p>\n

1. Timing in milliseconds.<\/p>\n

2. Function to be executed, in this case is an ajax request<\/p>\n

The third optional parameter would be the ID of <span> or <div> where to show a progress bar, but this is not needed since the progress bar will be displayed by the ajaxObject.<\/p>\n

Finally we have to activate the timing. This can be done calling:<\/p>\n

1
<\/div><\/td>
<<\/span>p style=<\/span>"text-align: justify;"<\/span>><<\/span>span style=<\/span>"color: #333399;"<\/span>><<\/span>em><\/span>ti1.start<\/span>(<\/span>)<\/span>;<\/<\/span>em><\/<\/span>span><\/<\/span>p><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

that can be placed were you need. For example using onload:<\/p>\n

1
<\/div><\/td>
<p<\/span><\/a> style<\/span>=<\/span>"text-align: justify;"<\/span>><span<\/span><\/a> style<\/span>=<\/span>"color: #333399;"<\/span>><em<\/span><\/a>><\/span>&lt;<\/span>body onload='ti1.start();'&gt;<\/span><\/<\/span>em<\/span><\/a>><\/<\/span>span<\/span><\/a>><\/<\/span>p<\/span><\/a>><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

This will do the job. Of course, the first call will be done after the timeout expires (in our example 5 seconds) and you might dislike a similar behavior and you might want the first call to be done just after loading the page. If so, just change the body call in the following way:<\/p>\n

1
<\/div><\/td>
<p<\/span><\/a> style<\/span>=<\/span>"text-align: justify;"<\/span>><span<\/span><\/a> style<\/span>=<\/span>"color: #333399;"<\/span>><em<\/span><\/a>>&lt;body onload<\/span>=<\/span>'af1.update("t=3");af1.showprogressbar=false;ti1.start();'<\/span>&gt;<\/<\/span>em<\/span><\/a>><\/<\/span>span<\/span><\/a>><\/<\/span>p<\/span><\/a>><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The code af1.showprogressbar=false;<\/em><\/span> just disable the progress bar, so old content remains until a new one is available.<\/p>\n

That’s all folks!<\/p>\n

Here is the full HTML code:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
<\/div><\/td>
<span<\/span><\/a> style<\/span>=<\/span>"color: #333399;"<\/span>><em<\/span><\/a>>&lt;html&gt;
\n&lt;head&gt;
\n&lt;script src<\/span>=<\/span>"ajax.js"<\/span>\u00a0 type<\/span>=<\/span>"text\/javascript"<\/span>&gt;&lt;\/<\/span>script&gt;
\n&lt;script type<\/span>=<\/span>"text\/javascript"<\/span> &gt;
\nvar af1=<\/span>new ajaxObject(<\/span>"ajax.php"<\/span>,"ID1"<\/span>)<\/span>;
\nvar ti1=<\/span>new timerObject(<\/span>5000<\/span>,function (<\/span>)<\/span> {<\/span>af1.update(<\/span>"t=3"<\/span>)<\/span>;}<\/span>)<\/span>;
\n&lt;\/<\/span>script&gt;
\n&lt;\/<\/span>head&gt;
\n&lt;body onload<\/span>=<\/span>'af1.update("t=3");<\/em><\/span><span style="color: #333399;"><em>af1.showprogressbar=false;<\/em><\/span><span style="color: #333399;"><em>ti1.start();'<\/span>&gt;
\n&lt;div&gt;&lt;span&gt;Your dynamic content<\/span> is: &lt;\/<\/span>span&gt;&lt;span<\/span> id<\/span>=<\/span>"ID1"<\/span>&gt;First&lt;\/<\/span>span&gt;&lt;\/<\/span>div&gt;
\n&lt;\/<\/span>body&gt;&lt;\/<\/span>html&gt;<\/<\/span>em<\/span><\/a>><\/<\/span>span<\/span><\/a>><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
<\/a>\"image_print\"<\/a><\/div>","protected":false},"excerpt":{"rendered":"

One of the possibles use of ajax technology is to have an automatic update of data in a web page.This is easily possible using the ajaxObject. First of all, we have to think to an object that is available in the ajaxObject: timerObject. This is normally used inside ajaxObject for timeout and progress bar, but …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ghostkit_customizer_options":"","ghostkit_custom_css":"","ghostkit_custom_js_head":"","ghostkit_custom_js_foot":"","ghostkit_typography":"","iawp_total_views":0,"footnotes":""},"categories":[1,13],"tags":[87,88,86],"class_list":["post-626","post","type-post","status-publish","format-standard","hentry","category-generale","category-technologie","tag-ajax","tag-ajaxobject","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=\/wp\/v2\/posts\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=626"}],"version-history":[{"count":9,"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=\/wp\/v2\/posts\/626\/revisions"}],"predecessor-version":[{"id":47481,"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=\/wp\/v2\/posts\/626\/revisions\/47481"}],"wp:attachment":[{"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lemie5lire.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}