Creating Shoutbox with AJAX

[Agent Moose]

<script>var topic = 2;var board = 1;var url1 = "http://"+location.hostname+location.pathname+"/topic,"+topic;$("#bodyarea").before("<br><div class='tborder'><div class='catbg' align='left' style='padding: 5px 5px 5px 10px;'>ShoutBox</div><div style='max-height: 150px; overflow:auto;'><table width='100%' border='0' cellspacing='1' cellpadding='4' id='shoutbox'></table></div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'><form id='postmodify' style='margin: 0pt;' onsubmit='submitonce(this);' name='postmodify' accept-charset='ISO-8859-1' method='post' action='"+location.pathname+"?action=post2'><span id='inputs'></span><texta"+"rea tabindex='1' name='message' style='width: 75%; height: 15px;' rows='7' cols='75'></text"+"area><input type='submit' accesskey='s' onclick='return submitThisOnce(this);' tabindex='3' value='Post' name='post'/></form></td></tr></table></div></div>")if(window.ActiveXObject){var box = new ActiveXObject("Microsoft.XMLHTTP");}else{var box = new XMLHttpRequest();}box.open("GET",url1,true);box.onreadystatechange = function(){if(box.readyState == 4){var shout = document.createElement("div");shout.innerHTML = box.responseText;var posts = shout.getElementsByTagName("div");for(x=0;x<posts.length;x++){if(posts[x].className == "post"){document.getElementById("shoutbox").innerHTML = "<tr><td class='windowbg2' width='80%' nowrap='nowrap'>"+posts+"</td></tr>"};};};};box.send("");</script>

I am tyring to create a shoutbox code for SMF For Free. I have basicly finished it with the AJAX that jquery gives us, but, short after I finished, I found out that Jquery AJAX doesn't like IE...so I have to start all over with normal ajax.Now, I am just trying to get the posts out of a topic, but, it doesn't work very well. This is the outcome:[object HTMLCollection]I do not know why, since this is my first time using regular ajax...anyone wanna help me?

[Synook]

var posts = shout.getElementsByTagName("div");

getElementsByTagName("div") returns an objects array (e.g. an [object HTMLCollection]) of all the <div> elements on the page. I think you want the 3rd line after that to be like this:

document.getElementById("shoutbox").innerHTML += "<tr><td class='windowbg2' width='80%' nowrap='nowrap'>"+posts[x]+"</td></tr>"

[Agent Moose]

Thanks. This is what I got out of it:

<script>var topic = 3;var board = 1;var url1 = "http://"+location.hostname+location.pathname+"/topic,"+topic;$("#bodyarea").before("<br><div class='tborder'><div class='catbg' align='left' style='padding: 5px 5px 5px 10px;'>ShoutBox</div><div style='max-height: 150px; overflow:auto;'><table width='100%' border='0' cellspacing='1' cellpadding='4' id='shoutbox'></table></div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'><form id='postmodify' style='margin: 0pt;' onsubmit='submitonce(this);' name='postmodify' accept-charset='ISO-8859-1' method='post' action='"+location.pathname+"?action=post2'><span id='inputs'></span><texta"+"rea tabindex='1' name='message' style='width: 75%; height: 15px;' rows='7' cols='75'></text"+"area><input type='submit' accesskey='s' onclick='return submitThisOnce(this);' tabindex='3' value='Post' name='post'/></form></td></tr></table></div></div>")if(window.ActiveXObject){var box = new ActiveXObject("Microsoft.XMLHTTP");}else{var box = new XMLHttpRequest();}box.open("GET",url1,true);box.onreadystatechange = function(){if(box.readyState == 4){var shout = document.createElement("div");shout.innerHTML = box.responseText;var posts = shout.getElementsByTagName("div");for(x=0;x<posts.length;x++){if(posts[x].className == "post"){shouting = posts[x].innerHTML;name = posts[x].parentNode.previousSibling.previousSibling.childNodes[1].innerHTML;document.getElementById("shoutbox").innerHTML += "<tr><td class='windowbg' width='20%' nowrap='nowrap'>"+name+" says:</td><td class='windowbg2' width='80%' nowrap='nowrap'>"+shouting+"</td></tr>"};};};};box.send("");</script>

Now, It is possible to make it so that the posts are reversed?

[Synook]

Yes, make your for statement look like this:

for(x=posts.length-1;x>=0;x--){

[Agent Moose]

Thanks. I have another problem though. I am trying to get the hidden inputs now. But, it doesn't work.

if(window.ActiveXObject){var moose = new ActiveXObject("Microsoft.XMLHTTP");}else{var moose = new XMLHttpRequest();}moose.open("GET",url2,true);moose.onreadystatechange = function(){if(moose.readyState == 4){var inputy = document.createElement("div");inputy.innerHTML = moose.responseText;var inputers = inputy.getElementsByTagName("input");for(x=0;x<inputers.length;x++){if(inputers[x].type == "hidden"){rawrz = inputers[x].innerHTML;document.getElementById('inputs').innerHTML += ""+rawrz+"";};};};};moose.send("");

<script>var topic = 3;var board = 1;var url1 = "http://"+location.hostname+location.pathname+"/topic,"+topic;var url2 = "http://"+location.hostname+location.pathname+"?action=post;topic="+topic+".0";$("#bodyarea").before("<br><div class='tborder'><div class='catbg' align='left' style='padding: 5px 5px 5px 10px;'>ShoutBox</div><div style='max-height: 150px; overflow:auto;'><table width='100%' border='0' cellspacing='1' cellpadding='4' id='shoutbox'></table></div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'><form id='postmodify' style='margin: 0pt;' onsubmit='submitonce(this);' name='postmodify' accept-charset='ISO-8859-1' method='post' action='"+location.pathname+"?action=post2'><span id='inputs'></span><texta"+"rea tabindex='1' name='message' style='width: 75%; height: 15px;' rows='7' cols='75'></text"+"area><input type='submit' accesskey='s' onclick='return submitThisOnce(this);' tabindex='3' value='Post' name='post'/></form></td></tr></table></div></div>")if(window.ActiveXObject){var box = new ActiveXObject("Microsoft.XMLHTTP");}else{var box = new XMLHttpRequest();}box.open("GET",url1,true);box.onreadystatechange = function(){if(box.readyState == 4){var shout = document.createElement("div");shout.innerHTML = box.responseText;var posts = shout.getElementsByTagName("div");for(x=posts.length-1;x>=0;x--){if(posts[x].className == "post"){shouting = posts[x].innerHTML;name = posts[x].parentNode.previousSibling.previousSibling.childNodes[1].innerHTML;inputs = $().next().find("form#postmodify").children("input:hidden")document.getElementById("shoutbox").innerHTML += "<tr><td class='windowbg' width='20%' nowrap='nowrap'>"+name+" says:</td><td class='windowbg2' width='80%' nowrap='nowrap'>"+shouting+"</td></tr>"};};};};box.send("");if(window.ActiveXObject){var moose = new ActiveXObject("Microsoft.XMLHTTP");}else{var moose = new XMLHttpRequest();}moose.open("GET",url2,true);moose.onreadystatechange = function(){if(moose.readyState == 4){var inputy = document.createElement("div");inputy.innerHTML = moose.responseText;var inputers = inputy.getElementsByTagName("input");for(x=0;x<inputers.length;x++){if(inputers[x].type == "hidden"){rawrz = inputers[x].innerHTML;document.getElementById('inputs').innerHTML += ""+rawrz+"";};};};};moose.send("");</script>

EDIT: Also, Yet, another problem. When the shoutbox is loaded it loads the first page of the topic, which is:http://shoutbox.smfforfree3.com/index.php/topic,3.0.htmlThere is more than one page, so it isnt showing the right posts in the shoutbox. Is it possible to make it so that it will automaticly show the right page?Here is what the second page URL looks like:http://shoutbox.smfforfree3.com/index.php/topic,3.15.htmlIf there was a third page, it would be like this:http://shoutbox.smfforfree3.com/index.php/topic,3.30.html

[justsomeguy]

You should really think about formatting your code so that it's readable. When you start seeing stuff like this in code:};};};};it's a hint that the code probably needs to be reformatted. Compare this:

if(window.ActiveXObject){var moose = new ActiveXObject("Microsoft.XMLHTTP");}else{var moose = new XMLHttpRequest();}moose.open("GET",url2,true);moose.onreadystatechange = function(){if(moose.readyState == 4){var inputy = document.createElement("div");inputy.innerHTML = moose.responseText;var inputers = inputy.getElementsByTagName("input");for(x=0;x<inputers.length;x++){if(inputers[x].type == "hidden"){rawrz = inputers[x].innerHTML;document.getElementById('inputs').innerHTML += ""+rawrz+"";};};};};moose.send("");

with this:

if(window.ActiveXObject){  var moose = new ActiveXObject("Microsoft.XMLHTTP");}else{  var moose = new XMLHttpRequest();}moose.open("GET",url2,true);moose.onreadystatechange = function(){  if(moose.readyState == 4)  {	var inputy = document.createElement("div");	inputy.innerHTML = moose.responseText;	var inputers = inputy.getElementsByTagName("input");	for(x=0;x<inputers.length;x++)	{	  if(inputers[x].type == "hidden")	  {		rawrz = inputers[x].innerHTML;		document.getElementById('inputs').innerHTML += ""+rawrz+"";	  }	}  }}moose.send("");

It's a lot easier to read and understand, it's easier to spot errors, and it's easier for people to help you. Now it's obvious that you are trying to get the innerHTML property of the hidden element instead of the value.