refreshing a <div>

[trismegisto]

Hi all.

I don’t know if this is the right place to post, so please forgive me if I make a mistake.

I have a page in my website that uses php to get a random record from a MySQL database every 5 seconds. I want to display that record in a <div> at the top of the page, but i want only the div with the record to refresh or display the new record without redirecting the user to another page with the same content but with the new generated div. I've seen this with some refreshing banners on some sites. The banner is the only thing that refeshes, is this javascript? Any advice on how to do this?

Any help will be pretty appreciated.

[SethCall]

oh, btw, mozilla 1.2 is extremely good about not "flashing" on a refresh. Try it and see. I know that doesn't solve your problem, but just so u know... it does a good job of even images (which are bad about flickering in IE even if they dont move)

You could do what u want with Flash or Applets, btw. I have noticed alot of Flash banners, so maybe those u are thinking of are using that...

[SethCall]

You also might consider using a "iframe"

<iframe src="your.php></iframe>

so make your php script dump the text you want from your database, and simply use javascript to... uh... reassign the src to the .php file. Although I haven't done it, it sounds like this might be your best bet for right now.

[hakre]

hi trismegisto,

in your case an iframe might be a better (and easier) solution.

to manipulate the content of a div, you've to use the dom (document object model) and need a kind of never ending connection to your webserver, updating the div via a client-side scripting language (javascript, vbscript). i haven't seen something like this already and haven't done by myself, so my answer is theoretical only. hope it helps a bit anyway.

<added>
SethCall was faster on the iframe ;)

there is something called multipart document in http. this can be a solution for the iframe thingy, too. anyone used it already?

[hakre]

hi SethCall, thanks for the info. the url is a real resource on this. i know the multipart thing on images (jpeg) and should make a little research on the subject.
sorry to say x-mulitpart-mixed header is needed for this and it works in netscape only. maybe http1.1 has something built in to be used.

[trismegisto]

Thanks Sethcall and hakre for your valuable advice. I wasn’t able to connect before that’s why I didn’t reply earlier.

It seems that this problem can be solved in different ways, i think the easiest to me is the <iframe> solution, however I’ll be looking forward to test your other options. (I don’t know anything about the DOM, so I’ll not be trying that option; however, it seems the document object model is what is hot right now, hakre, any advice where to start learning DOM?)

Sethcall, how could it be possible to do this with flash animation? I haven’t had an idea of how to do this with flash…

[Birdman]

Couldn't you put a meta refresh tag in the iframe source code?

[ricfink]

I've used the iframe. Works quite well. You can also use the src attribute of a javascript tag as well. But when you use the javascript element, you've got to make sure the php page that gets named as the src returns mime type text/javascript. Works in NN 7, IE, but not Opera.

Iframe works in all three.

Back to iframe:

Use an iframe with visibility set to hidden. Also set the width and height attributes to 0.
<iframe id="agent" src=page1.xxx height=0 width=0></iframe>

since you are going to be calling the server-side scripted page that reads from the database periodically, you'll need to use setTimeout or something like that to create the repeating loop.
Plus - and this is very important - you have to add a random querystring to the url (ie. page1.xxx?14783, page1.xxx?46729, etc.) each time it's called. Otherwise the browser will just assume that the page was called already and will just stick with the version in the cache.

You need three functions. One to change the src of the iframe. Second in the page1.xxx page to pass the data to the parent page. Three to recieve the data from the newly refreshed iframe src page and refresh the div contents that the user sees.

So, the functions are going to look something like this:

function getDiv() {
// some code here to generate a random string
// stored in var _q
var _x = document.getElementById('agent')
_x.src = page1.xxx + '?'+ _q
// timeout for specified interval and then call
// getDive() yet again.
}

then, in the code for page1.xxx, you need a javascript function that passes the data to the parent page onload. Something like this:

function passIt() {
var _x = document.getElementById('datadiv').innerHTML
parent.changeData(_x)
}
(in the body tag put onload=passIt();)

then the third function you need is the changeData function that recieves the new data from the hidden iframe and changes the data in the div you were talking about:

function changeIt(_datastr) {
var _x = document.getElementById.('datadiv')
_x.innerHTML = _datastr // this will refresh the
// contents of the div
}

this is quick off the top of my head. I've actually got some code doing this that's posted and working in a site. sticky me and I'll try to fish it up for you ast work tomorrow.

[SethCall]

sweet. I was going to start working on that tomorrow, and I was already pondering the possible problem of setting the src of the iframe to the same .xxx script... i thought, would it refresh? You answered it: no :)

thx for that! Well now we know! Seems as if we came to how to do it, and then you just laid it down for us :)

thx ric