[SOLVED] Ajax Request Retrieve Multiple Data

Lautarox · January 10, 2009

I can't really find how to process in a tidy way the data retrieved from an ajax response, I mean, the server outputs an username and a password for example and I want to use it in the javascript code, I managed to find this..

var responses = eval(xmlHttp.responseText);

responses.username

responses.password

But how do I have to output from the server to make the function read the data?

Also I have another doubt, will the request web use the active session data? I mean, when I request something, and I need a certain access level to it, the server side checks the session vars to see if I can do something..

corbin · January 10, 2009

Please tell me that your script doesn't compare username and password client side.

You could use JSON or XML.... Or delimited text.

Lautarox · January 10, 2009

It's just to write the login information, nothing to worry =P, could you give me an example or more info?

corbin · January 10, 2009

http://www.json.org/

A JSON string is just a special format, and when JS parses it, you can access the variable you put it in like an object.

Lautarox · January 11, 2009

This is my comment form, any suggestions will be appreciated..

<?php
       function addcommentform () {
             $date = time();
     $day = date("j", $date);
	$month = date("n", $date);
	$year = date("Y", $date);
	$hora = date("G:i:s", $date);
             echo '<FORM id="addcomment">
                <table border="0">';
             if ($_SESSION['logedin'] == 1) {
               echo '<tr class="top_comment_add">
                  <td>Usuario: '.$_SESSION['username'].' <INPUT type="hidden" name="autor" value="'.$_SESSION['username'].'"></td>
                  <td><INPUT type="hidden" name="email" value="'.$_SESSION['email'].'"></td>
                  </tr>';
                  
             }
             else {
               echo '<tr class="top_comment_add">
                  <td>Nombre: <br> <INPUT type="text" name="autor" size="15" maxlength="25"></td>
                  </tr>
                  <tr class="top_comment_add">
                  <td>E-Mail: <br> <INPUT type="text" name="email" size="20" maxlenght="70"></td>
                  </tr>';
             }
             echo '<tr class="med_comment_add">
                 <td>Comentario <br><TEXTAREA NAME="contenido" COLS="40" ROWS="6" maxlenght="250" WRAP="SOFT"></TEXTAREA></td>
                 </tr>
                 <tr>
                 <td><INPUT type="hidden" name="day" value="'.$day.'"><INPUT type="hidden" name="month" value="'.$month.'"><INPUT type="hidden" name="year" value="'.$year.'"><INPUT type="hidden" name="hora" value="'.$hora.'"></td>
                 </tr>
                 <tr>
                 <td><INPUT type="hidden" name="postid" value="'.$_GET['id'].'"></td>
                 <td><INPUT type="hidden" name="ip" value="'.$_SERVER['REMOTE_ADDR'].'"></td>
                 </tr>
                 <tr>
                 <td><INPUT type="submit" value="Agregar Comentario" onclick="ajaxSumbitComment();"></td>
                 </tr>
	 </table>
                 </FORM> <span id="loading"></div>';
           }

And the ajax function..

function ajaxSubmitComment() {
var xmlHttp = GetXmlHttpObject();
if(xmlHttp==null) {
	alert ("Your browser does not support AJAX!");
	return;
}
var autor = document.getElementByName('autor').value;
var email = document.getElementByName('email').value;
var contenido = document.getElementByName('contenido').value;
var day = document.getElementByName('day').value;
var month = document.getElementByName('month').value;
var year = document.getElementByName('year').value;
var hora = document.getElementByName('hora').value;
var postid = document.getElementByName('postid').value;
var ip = document.getElementByName('ip').value;
xmlHttp.open('POST', 'jsontest.php?t=1');
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('autor=' + autor + '&email=' + email + '&contenido=' + contenido + '&day=' + day + '&month=' + month + '&year=' + year + '&hora=' + hora + '&postid=' + postid + '&ip=' + ip);
xmlHttp.onreadystatechange=function() {
	if ((xmlHttp.readyState==4) && (xmlHttp.status==200)) {
		var responses = eval(xmlHttp.responseText);
		if(responses.accept == 1) {
			var newComment = document.getElementById('comment_container').cloneNode(true);
			newComment.getElementById("comment_container").comment_autor.innerHTML = "Comment posted by " + autor + " el " + day + "/" + month + "/" + year + " a las " + hora;
			newComment.getElementById("comment_container").comment_contenido.innerHTML = contenido;
			var insertHere = document.getElementById('comment_add');
			insertHere.parentNode.insertBefore(newFields,insertHere);
			if(newComment.getElementById("comment_admin") != null) {
				newComment.getElementById("comment_admin").innerHTML = response.admin;
			}
		}	
		else {
			getElementById("addcomment_error").innerHTML = "Error Posteando Nuevo Comentario";
		}
  		}
}
}
?>

corbin · January 11, 2009

Hrmmm.... I'm confused as to what you're trying to do. Does that script not work, or are you trying to make it return something else?

Lautarox · January 12, 2009

The script doesn't work really..

corbin · January 12, 2009

So.... What's wrong with it?

Lautarox · January 12, 2009

How could I check errors in javascript in an effective way?

Calling the function as I did is right?

corbin · January 12, 2009

As far as I can tell, your script looks fine. Where does it stop working? Or what does it do that's not right?

Sometimes when I debug JS, I use alert() statements riddled throughout to make sure they are reached/say what they should. Other times I just use Firebug in Firefox.

Lautarox · January 14, 2009

It is really not being executed ¬¬

Is this ok?

What about this?

Mmm.. could php bother the javascript execution?

Lautarox · January 14, 2009

I had a little mistake with the function's name it was Submit instead of Sumbit, but it's not being executed neither..

Take a look to the alerts I've added

function ajaxSubmitComment() {
var xmlHttp = GetXmlHttpObject();
if(xmlHttp==null) {
	alert ("Your browser does not support AJAX!");
	return;
}
var autor = document.getElementByName('autor').value;
var email = document.getElementByName('email').value;
var contenido = document.getElementByName('contenido').value;
var day = document.getElementByName('day').value;
var month = document.getElementByName('month').value;
var year = document.getElementByName('year').value;
var hora = document.getElementByName('hora').value;
var postid = document.getElementByName('postid').value;
var ip = document.getElementByName('ip').value;
alert("var autor = " + autor + " var email = " + email + " var contenido = " + contenido + " var day = " + day + " var month = " + month + " var year = " + year + " var hora = " + hora + " var postid = " + postid + " var ip = " +ip);
xmlHttp.open('POST', 'jsontest.php?t=1');
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('autor=' + autor + '&email=' + email + '&contenido=' + contenido + '&day=' + day + '&month=' + month + '&year=' + year + '&hora=' + hora + '&postid=' + postid + '&ip=' + ip);
xmlHttp.onreadystatechange=function() {
	if ((xmlHttp.readyState==4) && (xmlHttp.status==200)) {
		alert("Ready State = 4");
		var responses = eval(xmlHttp.responseText);
		if(responses.accept == 1) {
			alert("Response.aceept == 1");
			var newComment = document.getElementById('comment_container').cloneNode(true);
			newComment.getElementById("comment_container").comment_autor.innerHTML = "Comment posted by " + autor + " el " + day + "/" + month + "/" + year + " a las " + hora;
			newComment.getElementById("comment_container").comment_contenido.innerHTML = contenido;
			var insertHere = document.getElementById('comment_add');
			insertHere.parentNode.insertBefore(newFields,insertHere);
			if(newComment.getElementById("comment_admin") != null) {
				newComment.getElementById("comment_admin").innerHTML = response.admin;
			}
		}	
		else {
			getElementById("addcomment_error").innerHTML = "Error Posteando Nuevo Comentario";
		}
  		}
}
}

corbin · January 15, 2009

So what's the last thing you see alerted?

Lautarox · January 15, 2009

I don't see anything alerted, that's the problem ¬¬

Lautarox · January 15, 2009

Well.. I've done more tests and it freezes here

var autor = document.getElementByName('autor').value;

alert(autor);

<INPUT type="text" name="autor" size="15" maxlength="25"

Lautarox · January 15, 2009

I really don't know why I can't edit my posts ¬¬, sorry to post again.. here's my problem, after many corrections..

My process page is writing the response correctly,

{"accept":1,"admin":0}

But my function is not processing it as it should.. take a look here

	if ((xmlHttp.readyState==4) && (xmlHttp.status==200)) {
		alert("Ready State = 4");
		var responses = eval(xmlHttp.responseText);
		alert(responses.accept); -> it doesn't print the response and freezes
		if(responses.accept == 1) {

function ajaxSubmitComment() {
var xmlHttp = GetXmlHttpObject();
if(xmlHttp==null) {
	alert ("Your browser does not support AJAX!");
	return;
}
var autor = document.getElementById('autor').value;
var email = document.getElementById('email').value;
var contenido = document.getElementById('contenido').value;
var day = document.getElementById('day').value;
var month = document.getElementById('month').value;
var year = document.getElementById('year').value;
var hora = document.getElementById('hora').value;
var postid = document.getElementById('postid').value;
var ip = document.getElementById('ip').value;
xmlHttp.onreadystatechange=function() {
	if(xmlHttp.readyState==3) {
		document.getElementById('loading').innerHTML = "Resquest is being processed.. waiting..";
	}
	if ((xmlHttp.readyState==4) && (xmlHttp.status==200)) {
		alert("Ready State = 4");
		var responses = eval(xmlHttp.responseText);
		alert(responses.accept);
		if(responses.accept == 1) {
			alert("Response.accept == 1");
			var newComment = document.getElementById('comment_container').cloneNode(true);
			newComment.getElementById("comment_container").comment_autor.innerHTML = "Comment posted by " + autor + " el " + day + "/" + month + "/" + year + " a las " + hora;
			newComment.getElementById("comment_container").comment_contenido.innerHTML = contenido;
			var insertHere = document.getElementById('comment_add');
			insertHere.parentNode.insertBefore(newFields,insertHere);
			if(newComment.getElementById("comment_admin") != null) {
				newComment.getElementById("comment_admin").innerHTML = response.admin;
			}
			document.getElementById('loading').innerHTML = "Comentario Agregado";
		}	
		else {
			getElementById("addcomment_error").innerHTML = "Error Posteando Nuevo Comentario";
		}
  		}
}
var tosend = 'autor=' + autor + '&email=' + email + '&contenido=' + contenido + '&day=' + day + '&month=' + month + '&year=' + year + '&hora=' + hora + '&postid=' + postid + '&ip=' + ip;
alert(tosend);
xmlHttp.open('POST', 'jsontest.php?t=1');
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Content-length", tosend.length);
        xmlHttp.setRequestHeader("Connection", "close");
alert("A punto de mandar");
xmlHttp.send(tosend);
}

corbin · January 15, 2009

First I have a question... Why are you sending the IP? Why not just get it inside of PHP?

Second....

var response = .....

Should be

var responses = eval('(' + xmlHttp.responseText + ')');

Gotta wrap it in parenthesis so it's parsed as an object.

Lautarox · January 16, 2009

Perfect, now I'm having a problem with the cloned node..

It freezes after alert("Copio newComment");

Is it correct to call the elements of the cloned node by id?

			alert("Response.accept == 1");
			var newComment = document.getElementById('comment_container').cloneNode(true);
			alert("Copio newComment");
			newComment.getElementById('comment_autor').innerHTML = "Comment posted by " + autor + " el " + day + "/" + month + "/" + year + " a las " + hora;
			alert("Agrego comment.autor");
			newComment.getElementById('comment_contenido').innerHTML = contenido;
			alert("Edito comment_contenido");
			var insertHere = document.getElementById('comment_add');
			insertHere.parentNode.insertBefore(newFields,insertHere);
			if(newComment.getElementById("comment_admin") != null) {
				newComment.getElementById("comment_admin").innerHTML = response.admin;
			}
			document.getElementById('loading').innerHTML = "Comentario Agregado";
		}	
		else {
			getElementById("addcomment_error").innerHTML = "Error Posteando Nuevo Comentario";
		}

corbin · January 16, 2009

var newComment = document.getElementById('comment_container').cloneNode(true);

That should work fine unless document.getElementById() isn't finding comment_container. Is it?

Lautarox · January 16, 2009

Yes it is finding it, because every comment has the same id, I think that selecting it by id doesn't work.. any suggestions?

corbin · January 16, 2009

If every content div (or span or whatever) has the same ID, that's not valid HTML. The id tag is meant to be unique, and it's invalid to have more than 1 element with a certain ID.

Lautarox · January 16, 2009

I've changed all the id tags in my page, and replaced them with name tags, but it's still freezing while selecting things by name

Actual code

		if(responses.accept == 1) {
			alert(document.getElementsByName('comment_container')[0]);
			var newComment = document.getElementsByName('comment_container')[0].cloneNode(true);
			alert(newComment);
			alert("Copio newComment");
			newComment.getElementsByName('comment_autor')[0].innerHTML = "Comment posted by " + autor + " el " + day + "/" + month + "/" + year + " a las " + hora;
			alert("Agrego comment.autor");
			newComment.getElementsByName('comment_contenido')[0].innerHTML = contenido;
			alert("Edito comment_contenido");
			var insertHere = document.getElementsByName('comment_add')[0];
			insertHere.parentNode.insertBefore(newFields,insertHere);
			if(newComment.getElementsByName("comment_admin")[0] != null) {
				newComment.getElementsByName("comment_admin")[0].innerHTML = response.admin;
			}
			document.getElementById('loading').innerHTML = "Comentario Agregado";
			disableOrEnable("addcommentbutton");
		}	
		else {
			document.getElementById("loading").innerHTML = "Error Posteando Nuevo Comentario";
		}

corbin · January 16, 2009

Technically two elements shouldn't have the same name either....

Lautarox · January 16, 2009

If so, why getElementsByName exists?

Lautarox · January 16, 2009

I've used the childNodes method, and now it doesn't freeze until insertBefore begins, won't it be better to modify the entire container div's innerHTML ?

Sign In

[SOLVED] Ajax Request Retrieve Multiple Data

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information