Jump to content

Creating Shoutbox with AJAX


Agent Moose
 Share

Recommended Posts

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

Link to comment
Share on other sites

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>"

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...