Jump to content


Photo

Ajax UPDATE div


  • Please log in to reply
17 replies to this topic

#1 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 21 December 2007 - 10:51 PM

Can someone show me how to update a <div> tag using AJAX? I'm creating a web chat room and need help. I am trying to integrate PHP, AJAX and MYSQL.. so far I got 50% done, I just need this! Please help ASAP

#2 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 22 December 2007 - 12:20 AM

:P

To update a div with JavaScript, you typically change the innerHTML attribute.

#3 curthard89

curthard89

    Young Padawan

  • Members
  • Pip
  • 226 posts

Posted 22 December 2007 - 02:55 PM

thats really not what hes asking for lol, well it kinda is, but he wants ajax function, ok here u go

function jah_switch(url,target)
{

	if (document.getElementById(target).innerHTML != '')
	{
		document.getElementById(target).innerHTML = '';
	}
	else
	{

		jah(url,target);
	}

}
function jah(url,target) {
	// native XMLHttpRequest object
		document.getElementById(target).innerHTML = '<span class="ajah_waiting"><a href="java script:jah(\''+url+'\',\''+target+'\');">sending...</a></span>';
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange = function() {jahDone(target);};
		req.open("GET", url, true);
		req.send(null);
	// IE/Windows ActiveX version
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
			req.onreadystatechange = function() {jahDone(target);};
			req.open("GET", url, true);
			req.send();
		}
	}
}	

function jahDone(target) {
	// only if req is "loaded"
	if (req.readyState == 4) {
		// only if "OK"
		if (req.status == 200) {
			results = req.responseText;
			document.getElementById(target).innerHTML = results;
		} else {
			document.getElementById(target).innerHTML="jah error:\n" +
				req.statusText;
		}
	}
}

put tht into a .js file

basically to update a div use

jah('myurlhere','mydivhere');

hope tht helps

#4 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 22 December 2007 - 04:58 PM

Well, I was hoping I could do it automatically wtihout clicking anything. see, i'm not a javascript proger. I'm learning basics right now. soo anything helps. I guess it's like a countdown if you think about it. Every 10 seconds it'll refresh if you understand what I'm saying? I know it can be done in AJAX so ya

#5 curthard89

curthard89

    Young Padawan

  • Members
  • Pip
  • 226 posts

Posted 22 December 2007 - 06:38 PM

with that, u can just do

setInterval('jah(\'myurlhere\',\'mydivhere\');',10000);

and wala, 10 second update

Edited by curthard89, 22 December 2007 - 06:41 PM.


#6 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 22 December 2007 - 08:26 PM

ok im still confused! lol im so sory

#7 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 23 December 2007 - 01:04 AM

thats really not what hes asking for lol, well it kinda is, but he wants ajax function, ok here u go

I'm sorry, but with as brief as his question was, how can you be sure my answer was not what he was asking for? Without a proper question, i can only do so much. You were right to take it in a different light, but to me, your answer was the exact same, just a little more informative (although, i would have picked a better function name... that's just personal preference).

Well, I was hoping I could do it automatically wtihout clicking anything. see, i'm not a javascript proger. I'm learning basics right now. soo anything helps. I guess it's like a countdown if you think about it. Every 10 seconds it'll refresh if you understand what I'm saying? I know it can be done in AJAX so ya


ok im still confused! lol im so sory

Still learning? Still confused?
:P and :censored:

http://www.google.co...ript settimeout
http://www.google.co... banner refresh
http://www.pixel2lif...als/javascript/
http://www.pixel2lif...?showtopic=8980

If you could give the exact breakdown of what is supposed to happen, how you're going about doing it, and what is going wrong, we could probably help more.

#8 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 23 December 2007 - 12:10 PM

rc69 curthard89 pretty much had it on the spot, except instead of clicking a button to refresh, it'll do it every 10 seconds or so.

#9 curthard89

curthard89

    Young Padawan

  • Members
  • Pip
  • 226 posts

Posted 23 December 2007 - 12:16 PM

which i did post how to do tht aswell...lol

#10 Killswitch

Killswitch

    Young Padawan

  • Members
  • Pip
  • 20 posts

Posted 23 December 2007 - 12:57 PM

You should really check out the XAJAX library, it would help you do this pretty easily. It doesn't do fancy animation and whatever, but it does allow you to use Ajax and skip any javascript work.

Anyways, if you do look into it, updating a DIV is as simple as
$objResponse->addAssign("reqbox", "innerHTML", $message);

reqbox would be the DIV id, $message would be what you are updating it with. If you look into it and need help, send me a PM.

#11 stevenh

stevenh

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 04 June 2008 - 09:37 AM

Hello, hope you don’t mind me joining this thread so late

I found this thread while searching Google for a way to auto refresh a div every 2 minutes using ajax

I tried the code above and it works great in Safari but Internet Explorers it refreshes the div but pulls a cached version. Is there a way to stop ie from using a cached version of the page?

Many thanks for your help

Steven

#12 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 04 June 2008 - 04:55 PM

In your PHP script, tell the browser to not cache the page. Don't worry about singling out IE, just tell everybody to do the same thing :)

Ref: http://php.net/manua...tion.header.php Example #2

#13 stevenh

stevenh

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 04 June 2008 - 05:32 PM

Thank's rc69, that sorted it out. nice and simple.

#14 nicksource

nicksource

    Young Padawan

  • Members
  • Pip
  • 3 posts

Posted 30 August 2008 - 07:07 AM

Hey guys, also found this thread through Google,

It seems to do exactly what I want, however it 'clones' my DIVs, not just the one with the ID but all of them and I can't seem to understand why.

Anyone know how to resolve this?

Kind Regards,
Nick.

#15 023-jimmy

023-jimmy

    Young Padawan

  • Members
  • Pip
  • 44 posts

Posted 30 August 2008 - 03:32 PM

You should really show us some code. Else their is nothing we can do for you.

#16 nicksource

nicksource

    Young Padawan

  • Members
  • Pip
  • 3 posts

Posted 31 August 2008 - 04:28 AM

Javascript to assign DIV:

Here is my DIV:

What happens is that when it refreshes, it creates a copy of the DIVs.

Edited by nicksource, 31 August 2008 - 01:56 PM.


#17 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 31 August 2008 - 12:16 PM

setInterval('jah(\'http://www.rc-manager.com/chat.php\',\'chatdiv\');',8000);
Could you post the code for the jah() function?

Edited by rc69, 31 August 2008 - 12:17 PM.


#18 nicksource

nicksource

    Young Padawan

  • Members
  • Pip
  • 3 posts

Posted 31 August 2008 - 01:57 PM

Sorted now, I had to separate the content in the DIV by placing it in another file.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users