14 Replies - 15738 Views - Last Post: 05 November 2012 - 02:01 PM

Refresh the contents of a <div> tag (JavaScript / AJAX)

Posted 08 October 2012 - 06:30 AM

Hi everyone,

I'm having a problem. I need some Javascript or Ajax code which will refresh the contents of a <div> tag (this is the only way I found to refresh a certain part of the page, because I have to avoid refreshing the whole page). I found various codes which worked partially (refreshed some text), but I actually need it to refresh a table which contains some PHP-defined images.

This is what I need - a part to refresh every once in a while (random time between 3 and 8 seconds).
The code for random time between 3 and 8 seconds:

//Get a random number between 1-6 (1000-6000) and add 2000, to get one between 3000-8000
var rand = Math.ceil(Math.random() * 6) * 1000 + 2000;

Now, within the generated random time, I need to refresh (reopen) this code:

Both the images in the table above and the random time generation code work perfectly, so I don't need any changes there. The problem occurred when I tried refreshing the table code above. I read that you need to somehow extract the code you want to refresh to an external file and call it from there, which I tried earlier, but the images didn't show up at all!
I know the general procedure should be to make a separate <div> which should contain the table code above, and somehow create a function which would reload the contents of that <div>, with a specific id (e.g. id = "reloadThis"), with the same table code (practically, the code above, when refreshed, shows a different set of images every time - which works). Try adding your own images according to the specified path, or specify your own path if you want to try out the code above. Also, the code above imports the intro.php. Here it is:

And the part which should initially call the function (and which is put in the <body> tag):

setTimeout(function() {Ajax();}, 1000);

The code above searches for a <div> tag with the id "ReloadThis" and every 1000 miliseconds (1 second) reload it with the table code. The part where it says randomImage.html was part of my experiments and should be ignored, but basically it represents the page to be opened inside the <div> tag. The thing is - I just need the table code I specified above to be loaded with images, which failed. I managed to show the table, but the images weren't shown.

Does anyone have any idea how to do this? (SUMMARY: reload the <div> tag by loading the specific table code above every randomly generated time)

Re: Refresh the contents of a <div> tag (JavaScript / AJAX)

Posted 13 October 2012 - 04:15 AM

Thanks. Your example works. But I have a slightly different problem: I also need the images to display correctly.
I added a new page instead of your data.html file, called randomImage.html, which has two images displayed, one below the other, and there's also some text in between them. With your example, the images are shown next to each other, in one row, with no space whatsoever. And there's also no text. Here's the code:

If you want to try this out, just add some corresponding images to the 'images' folder relevant to these files and name them correspondingly, and you'll see what I mean.

The thing is, this is just a prototype. If I make this work and show images (and generally an external HTML file) properly, I'd be close to what I need.
Don't know if I mentioned it, but I also need this "embedded" page to refresh within the parent-page at a certain time interval. But I don't need that now - let's just get this to work - the proper image displaying.

Thanks in advance!

EDIT: Oh, yeah - I also tried putting HTML's 'bare' code inside the randomImage.html file - only the content that's located inside the <body> tag. And the result was the same.

This post has been edited by Dormilich: 06 November 2012 - 08:16 AM
Reason for edit:: removed unnecessary quote

I haven't tried styling the page, since it should be displayed properly as it is, and I don't really want to "pimp" it with any additional files and styling, so it could look nicer, unless it's really the only solution to what I need.

This post has been edited by Dormilich: 06 November 2012 - 08:17 AM
Reason for edit:: removed unnecessary quote

Re: Refresh the contents of a <div> tag (JavaScript / AJAX)

Re: Refresh the contents of a <div> tag (JavaScript / AJAX)

Posted 20 October 2012 - 02:59 AM

I tried reloading the <iframe> tag in certain intervals and it didn't work. I mean, it loaded randomImage.html properly (together with it's .js) and it worked good. But now I need the second code snippet I posted in my first post to show properly, which it doesn't. I tested things out and this is what happens: I put the two PHP lines and the table code on a regular page (where it was before), and the images are shown normally; I cut and paste the code in an external HTML page, which I then load into the original page with the <iframe> tag, the table is displayed, but images are not loaded!

Re: Refresh the contents of a <div> tag (JavaScript / AJAX)

Posted 05 November 2012 - 09:01 AM

Won't work. Tried putting the absolute path (from C:\), but the images still don't show up.
I tried placing the EXACT same code back in the original HTML page, and they show up normally. And both the original and the external page are in the same directory.