SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast imagenesis's Avatar
    Join Date
    Feb 2005
    Location
    Frederick, Maryland
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WHYYY GOD WHYYY?!!? Please help me :( Basic Javascript/AJAX

    I have spent the last 4-5 hours trying to figure this out. It's not that I don't get it, it's just that I'm new to javascript and I'm probably missing some very basic syntax or something ridiculous like that. PS, I hate this language. Anyway, here is my problem: This is my code:

    Code:
    function getHTTPObject() {
    
      var xmlhttp;
    
      /*@cc_on
    
      @if (@_jscript_version >= 5)
    
        try {
    
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    
        } catch (e) {
    
          try {
    
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    
          } catch (E) {
    
            xmlhttp = false;
    
          }
    
        }
    
      @else
    
      xmlhttp = false;
    
      @end @*/
    
      if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    
        try {
    
          xmlhttp = new XMLHttpRequest();
    
        } catch (e) {
    
          xmlhttp = false;
    
        }
    
      }
    
      return xmlhttp;
    
    }
    
    var http = getHTTPObject(); // We create the HTTP Object
    var updateUrl = "updateInfo.php"; // The server-side script function
    var sessionUrl = "sessionInfo.php"; // The server-side script function
    function handleHttpResponse() { 
    if (http.readyState == 4) { // Split the comma delimited response into an array 
    results = http.responseText.split(",");
    document.getElementById('userImage').innerHtml=results[0];
    document.getElementById('lastAdded').innerHtml=results[1]; 
    document.getElementById('totalAdded').innerHtml=results[2]; 
    document.getElementById("referalls").innerHTML="Hello World!"
    document.getElementById('points').innerHtml=results[4]; 
    document.getElementById('addedToday').innerHtml=results[5]; 
    } }
    function updateInfo() {
    http.open("GET", updateUrl, true); 
    http.onreadystatechange = handleHttpResponse; 
    http.send(null);
    document.getElementById("totalAdded").innerHTML="Hello World!"
    }
    Most of it is modified from this tutorial: http://www.webpasties.com/xmlHttpReq...utorial_4.html. In any case, the line in updateInfo with the innerHtml doesnt work in IE, and everything before that line doesnt work either (in IE or any other browser). As you can see I made one of the lines in handleHttpResponse not a dynamic line and it still doesnt do anything. Any help would be very appreciated. (ohh, and the output of updateInfo.php is valid and is based on SESSIONS rather then an input variable. Thanks!

    Oh and here is the HTML it is trying to modify:

    Code:
    <div style="position:relative; float:left; margin:14px 0px 0px 0px;" align="left">
    <div id="userImage"><img src="http://www.myspacebunny.com/_theme/images/loading.gif" width="60" height="60" class="loginImage"/></div>
    </div>
    <a href="javascript:updateInfo()">Test Link</a>
    <div style="position:relative; float:right; margin:11px 0px 0px 0px;" align="left">
    Friend ID: <span id="friendId"><? echo $fid; ?></span><br/>
    Total Points: <span id="points">Loading...</span><br/>
    Total Referred: <span id="referalls">Loading...</span><br/>
    Added Through FB™: <span id="totalAdded">Loading...</span><br/>
    Today Through FB™: <span id="addedToday">Loading...</span>
    
    </div>

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.
    1. is innerHTML not innerHtml
    2. put some alerts after if (http.readyState == 4) { :
    alert(http.responseText);

    and after results = http.responseText.split(","); :
    alert(results[0]);
    alert(results[1]);
    ...
    to see what you get

    Install firebug on firefox and check the headers your receive:
    Extension: https://addons.mozilla.org/firefox/1843/
    A tutorial for FireBug: http://encytemedia.com/blog/articles...g-with-firebug

  3. #3
    SitePoint Enthusiast imagenesis's Avatar
    Join Date
    Feb 2005
    Location
    Frederick, Maryland
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THanks a lot, gonna check it out now! Great ideas

  4. #4
    SitePoint Enthusiast imagenesis's Avatar
    Join Date
    Feb 2005
    Location
    Frederick, Maryland
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the diagnosis. The code is now working, I changed the updateUrl to the full path because the relative one wasn't working. The <div id="userImage"> is being replaced correctly and this is the new modified code:

    Code:
    var http = getHTTPObject(); // We create the HTTP Object
    var updateUrl = "http://www.myspacebunny.com/_theme/updateInfo.php"; // The server-side script function
    var sessionUrl = "sessionInfo.php"; // The server-side script function
    function handleHttpResponse() { 
    if (http.readyState == 4) { // Split the comma delimited response into an array 
    results = http.responseText.split(",");
    alert(results[0]);
    alert(results[1]);
    alert(results[2]);
    alert(results[3]);
    alert(results[4]);
    alert(results[5]);
    document.getElementById('userImage').innerHTML='<img src="'+results[0]+'" width="60" height="60" class="loginImage"/>';
    document.getElementById('lastAdded').innerHTML=results[1]; 
    document.getElementById('totalAdded').innerHTML=results[2]; 
    document.getElementById("referalls").innerHTML='Hello World!';
    document.getElementById('points').innerHTML=results[4]; 
    document.getElementById('addedToday').innerHTML=results[5]; 
    } }
    function updateInfo() {
    http.open("GET", updateUrl, true); 
    http.onreadystatechange = handleHttpResponse; 
    http.send(null);
    }
    However, none of the other values are being changed, including the Hello World although they are being retreived correctly from the updateInfo.php file. I should mention that the id are located in <span> statements as opposed to divs although this has worked in the past for me. I'll try to fix the problem... Thanks for your help thus far!

    EDIT: It was probably pretty obvious for you guys, but i changed the spans to divs and it didnt change the problem.

  5. #5
    SitePoint Enthusiast imagenesis's Avatar
    Join Date
    Feb 2005
    Location
    Frederick, Maryland
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved. Apprently Javascript is really picky. One of the ids I was telling it to change wasnt in the html and it was screwing everything up. Thanks for your help, and I should really learn languages one step at a time Thanks!

  6. #6
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imagenesis
    Problem solved. Apprently Javascript is really picky. One of the ids I was telling it to change wasnt in the html and it was screwing everything up.
    Test with Firefox and the JavaScript console to pick up on things like that immediately. You get the red exclamation icon when a JS error occurred on the page.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •