TalkPHP - AJAX Help

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - AJAX Help (http://www.talkphp.com/javascript-ajax-e4x/2319-ajax-help.html)

My whole 3 hours of ajax experince has hit a brick wall. I am able to get the data i want through the ajax but i cannot get it to update the display of the page. Heres what i am trying to use.

Code:

//strait from w3schools.com

//well almost i changed a little.

<script type="text/javascript">

function ajaxFunction(){

var xmlHttp;

try  {

  xmlHttp=new XMLHttpRequest();

  } catch (e)  {

  try {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    } catch(e) {

    try{

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e) {

      alert("Your browser does not support AJAX!");

      return false;

      }

    }

  }

  xmlHttp.onreadystatechange=function() {

    if(xmlHttp.readyState==4) {

      alert(xmlHttp.responseText);

      document.getElementByName('guide1')=xmlHttp.responseText;

      }

    }

  xmlHttp.open("GET","test.php",true);

  xmlHttp.send(null);

  }

</script>

And my call to the function.

Code:

echo "<h7 name=\"guide1\">8</h7><a href=\"#\" onClick=\"ajaxFunction()\">+ Guide</a>...

All the test.php does is output the word done. and when i click on my link here the alert box says done. but the h7 tag will not update. Any ideas where im screwing up?

As far as I know.. you can't assign a new "text" directly like this:

Code:

document.getElementByName('guide1') = xmlHttp.responseText

You have to use the innerHTML property of the element, like this:

Code:

document.getElementByName('guide1').innerHTML = xmlHttp.responseText

Also, I think it's more common to use document.getElementById instead of getElementByName. I don't know if it has something to do with browser compatibility, standards or something like that.. but all the examples I see all the time are using getElementById. Of course, to use getElementById you should set the id=".." property of the element instead of the name=".." property.

There is no 'getElementByName' method. There is 'getElementsByName' and 'getElementsByTagName', both return arrays of element names and tag names, respectively.

Use 'getElementById' and the innerHTML property when dealing with text, as DeMo stated.

There's an excellent JavaScript and DOM reference at javascriptkit.com.

thanks for the help so far guys. When i changed it to byId it works. Now i gotta add one last feature. That is to pick which id to update by passing in a var (idKey). Problem is the variable i pass in is always undefined where i alert it. Heres the new javascript.

Code:

<script type="text/javascript">

function ajaxFunction(IdKey){

var xmlHttp;

try  {

  xmlHttp=new XMLHttpRequest();

  } catch (e)  {

  try {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    } catch(e) {

    try{

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e) {

      alert("Your browser does not support AJAX!");

      return false;

      }

    }

  }

  xmlHttp.onreadystatechange=function(IdKey) {

    if(xmlHttp.readyState==4) {

                alert(IdKey)

      document.getElementById('IdKey').innerHTML=xmlHttp.responseText;

      }

    }

  xmlHttp.open("GET","test.php",true);

  xmlHttp.send(null);

  }

</script>

Code:

document.getElementById('IdKey').innerHTML=xmlHttp.responseText;

You have to use IdKey without the single quotes. IdKey is a variable.. you want the value stored inside it then you have to use it without the quotes. The way you're doing the browser is searching for an element with the id property set to IdKey (id="IdKey").

Edit: I forgot the part where you say the alert(IdKey) is outputting "undefined". Did you change the call to ajaxFunction() to pass the id of the element you want to update?

Should be something like this:

Code:

<h7 id="guide1">8</h7><a href="#" onClick="ajaxFunction('guide1')">+ Guide</a>

ye i tried that before i added the quotes, but i get either [object HTMLUnknownElement] if i place the alert right after the function call or i get undefined if its where the current alert is.

Edit: in reply to your edit lol i had a div onclick i changed it to your a tag, now the variable gets to the first function. but it doesnt get to the current alert its still undefined.

Found the error :-)

Code:

xmlHttp.onreadystatechange=function(IdKey) {

Just erase that IdKey that's inside the brackets, make it like this:

Code:

xmlHttp.onreadystatechange=function() {

ok i got it to work. You were right i needed to remove the idKey in the ready state change. But i also needed to remove the a href link and change it to a

Code:

<h7 id=\"$guideId\">8</h7><h6><div onClick=\"ajaxFunction('$guideId')\">+ Guide</div></h6>

Hmmm the normal link works for me (Opera 9.26).
The href property has to be "#", and you call the function via the onclick="" property.

Code:

<a href="#" onclick="ajaxFunction('element_id')">Link text</a>

hum im on the 9.5 beta and it didn't but it might be the beta. thanks though.