Ajax Question

[ColdEdge]

Hello, I have a question. If I have a site that runs using index.php file calling other PHP files via there name so for example index.php?app=avatar will call avatar.php. However I want to add an ability to update data with out the form submit part going to something like update_settings.php rather it will stay at index.php?app=settings.Can any one tell me how I can do this? Using either jQuery or Mootols. Or just by using standard AJAX.- Thank You!

[jeffman]

You are describing the kind of operation AJAX is designed for. JQuery and other frameworks have tools to simplify AJAX (but they're only simpler if you already know how to use them).Anyway, it can be done just as you want.Have you looked through the AJAX tutorial? The nice thing about AJAX is that you tend to use it for the same kinds of things all the time. So you can copy or write one basic AJAX function and keep it in a library file (like ajax.js) and usually never think about it. Then you can get it going with just one line of code.Anyway, where do you want to start?

[ColdEdge]

Thank you, yes I agree jQuery/Mootools make life easier then it is. I looked truth AJAX tutorials provided on W3Schools, to be exact this tutorial: http://www.w3schools.com/ajax/ajax_example_suggest.aspThe part that I am bit confused about is this

var xmlhttpfunction showHint(str){if (str.length==0)  {  document.getElementById("txtHint").innerHTML="";  return;  }xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Your browser does not support XMLHTTP!");  return;  } var url="index.php?id=comments&app=token.dll"; //changedurl=url+"?id=comments"; //changedurl=url+"&app=token.dll"; /changedxmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}

As you see I changed some values, but I was unable to understand the rest of the code provided on top.This is how the comments form looks like:

<form method="post" action="index.php?id=comments&app=token.dll" id="myComment"><input type="hidden" name="user_id" id="elm1" value="2" /><table cellspacing="1" cellpadding="1" style="float: right;"><tr><td>Subject</td></tr><tr><td valign="top"><input type="text" name="subject" id="elm1" maxlength="100" style="width: 426px;"/></td></tr><tr><td><div style="height:3px;"></div></td></tr><tr><td>Message</td></tr><tr><td valign="top"><textarea name="main" id="message" rows="16" cols="80" style="width: 434px;height: 80px;" maxlength="1000"></textarea></td></tr></tr><tr><td><div style="height:3px;"></div></td></tr><tr><td align="right" colspan="2"><ul class='nNav'> 		   <li style="margin-left:0px;"> <b class="nc"><b class="nc1"><b></b></b><b class="nc2"><b></b></b></b><span class="ncc"><a href="java script: postComment();">Post Comment</a></span><b class="nc"><b class="nc2"><b></b></b><b class="nc1"><b></b></b></b>		  </li></ul></td></tr></table></form>

If you can tell me what parts of the first AJAX code provided need to be changed in order for this form to submit the post truth action="index.php?id=comments&app=token.dll" while leaving member on the same page. Since by default when user clicks Post Comments they will be send to index.php?id=comments&app=token.dll and then the script will send them back to index.php?id=profile if there is an error like empty fields the PHP will go to index.php?id=error&act=(error #)- Thank You!

[jeffman]

I have simplified the code. The part about getting the innerHTML of "txtHint" is not necessary. It was part of the original, sample function, and you are not using it. So it can be removed. I also simplified the lines where you build the GET data. You were doing it twice, and that was not necessary. Finally, I added a return value to the function. To cancel the form submission, your event handler must explicitly return false. Unlike most functions, event handlers behave as if the default return value is true.I also added a line that binds your ajax function to the submit event of your form. This assignment must take place after the form is loaded into the document. That is why the assignment is attached to the window.onload property. You could do the same thing in your form tag, but the technique I show is best practice for modern HTML and JavaScript.

function sendData(){   xmlhttp=GetXmlHttpObject();   if (xmlhttp==null)	 {		alert ("Your browser does not support XMLHTTP!");		return;	 }   var url="index.php?id=comments&app=token.dll";   xmlhttp.onreadystatechange=stateChanged;   xmlhttp.open("GET",url,true);   xmlhttp.send(null);   return false;}function init (){   document.getElementById("myComment").onsubmit = sendData;}window.onload = init;

You will also notice that I have done nothing with the values from your form inputs. You did not ask about those, so I ignored them. If you need them, I assume you know how to get those values and insert them into your GET string.EDIT: Did you also copy the code for the GetXmlHttpObject() function? This is not a built-in function. Your script must contain it, internally or externally.You must also have a function called stateChanged to handle the response.

[ColdEdge]

Hmm, interesting I was not aware of stateChanged part. However I seen something about it in the AJAX section. Won't the values be passed to the index.php?id=comments&app=token.dll automatically, as it currently dose with PHP.GetXmlHttpObject() is there is an external file called ajax.ui.js?v=1003452Almost forgot to ask. As you can see in the form the data is submitted with out <input type="submit" value="Post Comment" /> but submitted using: postComment(); will I require to change anything in the AJAX code you provided? The function that postComment(); triggers looks like this:

<script type="text/javascript">function postComment(){document.getElementById("myComment").submit();}</script>

- Thanks

[jeffman]

The school has a GetXmlHttpObject function somewhere, but I can't find it. This will work:

function GetXmlHttpObject () {   if (window.XMLHttpRequest) {	  return new XMLHttpRequest()   } else {	  return new ActiveXObject("Microsoft.XMLHTTP");   }}

The code can also be embedded in your sendData function.I did not see the reference to postComment, because it is hidden in a lot of very bad HTML that I did not want to look at. The submit statement in postComment will mess everything up. It does not generate a submit event. It simply sends the form, and AJAX will not run. If you absolutely want to trigger the AJAX process with an <a> element, then it should look like this:<a href="javascript: sendData();">That is, it should call the AJAX function we have been working on. And if this is the only way to trigger the function, then you can delete the init function I wrote for you.(It would be much better though to use a submit button. That way, if javascript is disabled, the form will still submit.)Okay. We need to include the form data in your GET url. This does not happen automatically. A form submission is part of HTML. It works with or without javascript. If you want to submit data through AJAX, you have to get the data for yourself. So here is a revised version of the function I showed you:

function sendData(){   xmlhttp=GetXmlHttpObject();   if (xmlhttp==null)	 {		alert ("Your browser does not support XMLHTTP!");		return;	 }   var url="index.php?id=comments&app=token.dll";      // next 4 statements are new   var myform = document.getElementById("myComment");   url += "&" + myform.user_id.name + "=" + myform.user_id.value;   url += "&" + myform.subject.name + "=" + myform.subject.value;   url += "&" + myform.main.name + "=" + myform.main.value;      xmlhttp.onreadystatechange = stateChanged;   xmlhttp.open("GET", url, true);   xmlhttp.send(null);   return false;}