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

#1 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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:
<?php error_reporting(E_ALL ^ E_NOTICE); ?>
<?php include 'DOOR Training Serbia_files/intro.php'; $rbr=izbor($_GET['parametar']); ?>
<table style="text-align: center;"  width="536px" border="1" cellspacing="1" cellpadding="3">
	<tr>
		<td width="35px" style="text-align: center; vertical-align: top; padding: 0px 0px 0px 0px; background-color: rgb(204,204,255);">
		<a href="index.php?parametar=<?php echo $rbr[0]; ?>">
		<img src="DOOR Training Serbia_files/a<?php echo $rbr[0]; ?>0.jpg" alt="photo" id="pix1" style="border-width: 0px; vertical-align: top;" width="100%"></a></td>
		<td width="35px" style="text-align: center; vertical-align: top; padding: 0px 0px 0px 0px; background-color: rgb(204,204,255);">
		<a href="index.php?parametar=<?php echo $rbr[1]; ?>">
		<img src="DOOR Training Serbia_files/a<?php echo $rbr[1]; ?>0.jpg" alt="photo" id="pix2" style="border-width: 0px; vertical-align: top;" width="100%"></a></td>
		<td width="456px" style="text-align: center; vertical-align: top; background-color: rgb(204,204,255);">
		<a href="index.php?parametar=<?php echo ($rbr[2]+($rbr[3]*10)); ?>">
		<img src="DOOR Training Serbia_files/a<?php echo $rbr[2]; ?><?php echo $rbr[3]; ?>.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></img></a></td>
	</tr>
</table>



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:
<?php

function izbor($klik)
{

$rbr = array();
$i = 3 - round((($klik + 1) * 3)/10);
if ($i < 2) { $i = 2; }

while (count($rbr) < $i)
{
 $t = rand(1,3);
 if ($t <> ($klik % 10) )
 {
 if (!in_array($t,$rbr)) { $rbr[] = $t; }
 }
}

if ( ($klik % 10) > 0 and ($klik % 10) < 4) { $rbr[] = ($klik % 10); }

if ($klik > 3) { $rbr[] = (round($klik / 10) % 3) + 1 ; }

$rbr[] = rand(1,3);

return $rbr;

}

?>



Anyway, here comes the tricky part. The code that should reload the contents of a <div> tag is:
			function Ajax()
			{
				var
					$http,
					$self = arguments.callee;

				if (window.XMLHttpRequest) {
					$http = new XMLHttpRequest();
				} else if (window.ActiveXObject) {
					try {
						$http = new ActiveXObject('Msxml2.XMLHTTP');
					} catch(e) {
						$http = new ActiveXObject('Microsoft.XMLHTTP');
					}
				}

				if ($http) {
					$http.onreadystatechange = function()
					{
						if (/4|^complete$/.test($http.readyState)) {
							document.getElementById('ReloadThis').innerHTML = $http.responseText;
							setTimeout(function(){$self();}, 1000);
						}
					};
					$http.open('GET', 'randomImage.html' + '?' + new Date().getTime(), true);
					$http.send(null);
				}

			}



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)

Is This A Good Question/Topic? 0
  • +

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

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

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

Posted 10 October 2012 - 08:08 PM

Hi there,

There's a very simple of way of achieving this with jQuery if you'd like to simplify the problem.

(function(){ 

	setInterval(function(){

		$.post('YOUR_URL_HERE', {id: id},
			function(data){
				$("#divToBeUpdated").html(data);
				
		});

	}, 5000); //interval in milliseconds

})();





Hope this helps.

EDIT: Spelling error

This post has been edited by sas1ni69: 10 October 2012 - 08:09 PM

Was This Post Helpful? 0
  • +
  • -

#3 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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

Posted 12 October 2012 - 10:22 AM

Thanks for the reply, but this code doesn't work. I made my new <div> tag with a certain ID, entered a .html file name where you specified, but it didn't work.

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

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

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

Posted 12 October 2012 - 02:43 PM

View Postboris90, on 12 October 2012 - 10:22 AM, said:

Thanks for the reply, but this code doesn't work. I made my new <div> tag with a certain ID, entered a .html file name where you specified, but it didn't work.

Take a look at this It has an example using using an html file and adds the html returned to a div called result.

Note the html should not be formatted correctly or it will not work because you cant have multiple
<html> <head> <body>
tags.

Because HTML already prints to the screen it will take the html from the HTML doc and insert it as you tell it.

I have an example for you
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
	$.get('data.html', function(data) {
	  $('.result').html(data);
	  alert('Load was performed.');
});
});
</script>
<div class="result"></div>
</body>

</html>



data.html
<div id="wrapper">
<p>This is some content</p>
</div>


Edited to add example

This post has been edited by laytonsdad: 12 October 2012 - 02:57 PM

Was This Post Helpful? 0
  • +
  • -

#5 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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:

randomImage.html
<html>
	<head>
		
	</head>
	
	<body>

		<script src="refreshDiv.js"></script>
	
		<div id="test">
			<script src="imageGenerator.js"></script>
		</div>
			
		<p align="center">
			<font face="arial" size="-2">This free script provided by</font>
			<br>
			<font face="arial, helvetica" size="-2">
				<a href="http://javascriptkit.com">Javascript Kit</a>
			</font>
		</p>

		<script src="imageGenerator.js"></script>
		
	</body>
</html>



Since this page includes a JS file, here it is:

imageGenerator.js
/*
Random Image Script- By Javascript Kit (http://www.javascriptkit.com) 
Over 400+ free Javascripts here!
Keep this notice intact please
*/

function random_imglink(){
	var myimages=new Array()
	//specify random images below. You can have as many as you wish
	myimages[1]="images/image1.jpg"
	myimages[2]="images/image2.gif"
	myimages[3]="images/image3.gif"
	myimages[4]="images/image4.jpg"
	myimages[5]="images/image5.jpg"
	myimages[6]="images/image6.jpg"

	var ry=Math.floor(Math.random()*myimages.length)
	if (ry==0)
	ry=1
	document.write('<img src="'+myimages[ry]+'" border=0>')
}

random_imglink()



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

Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

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

Posted 13 October 2012 - 09:46 AM

Where do you see in the code that it is to add text along with the images?

As for the structure, have you tried to style this page yet?
Was This Post Helpful? 0
  • +
  • -

#7 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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

Posted 13 October 2012 - 10:57 AM

This code snippet contains text, but is not shown (only when a page is opened directly: double clicking the file):
		<p align="center">
			<font face="arial" size="-2">This free script provided by</font>
			<br>
			<font face="arial, helvetica" size="-2">
				<a href="http://javascriptkit.com">Javascript Kit</a>
			</font>
		</p>



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

Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

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

Posted 16 October 2012 - 12:52 PM

Try jquery .load to load the contents.
Was This Post Helpful? 0
  • +
  • -

#9 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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!

Any suggestions for this? Thanks.
Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

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

Posted 01 November 2012 - 04:52 PM

Does the image show as a broken link or does it not display anything?
Was This Post Helpful? 0
  • +
  • -

#11 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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

Posted 03 November 2012 - 12:58 AM

Yes, there are "empty" images with little icons in the top left corner, practically they're broken links.

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

Was This Post Helpful? 0
  • +
  • -

#12 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

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

Posted 03 November 2012 - 01:17 PM

Then make them absolute links and not relative. They are most likely relative to the file they are in and not relative to the file they are loaded into. If that makes any sense to you.
Was This Post Helpful? 0
  • +
  • -

#13 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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.
Was This Post Helpful? 0
  • +
  • -

#14 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

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

Posted 05 November 2012 - 10:28 AM

I'm not sure why an image would not show using absolute path unless there is something I am missing. Maybe someone else can help you.
Was This Post Helpful? 0
  • +
  • -

#15 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

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

Posted 05 November 2012 - 02:01 PM

Yeah, if someone else could help me, that'd be great.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1