SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My Ajax Request isn't returning anything!

    I am new to Ajax and I have given myself a [personal] project to work on in order to learn. I need some help debugging some code I wrote/copied from tutorials. I hope this is the right forum to post in as well.

    The page is located here: http://stuff.bewareofraj.com/steam/

    What you are supposed to do, is enter a Steam username and it should update the div with the id "output" with the 64bit Steam ID for that user. You can test the ajax.php script by going to http://stuff.bewareofraj.com/steam/a...rname=hitraj47 (that is my username). It should output "Steam ID: 76561197963517234". If the username could not be found, it just says "Could not find player".

    Right now I cannot even get it to change the "output" div. When I type something in the input text, it just refreshes the page and nothing happens. Also the browser URL adds "?username=whateverItypedHere" to the end of the current page, which I don't think is meant to happen.

    I have tested this on Chrome and Firefox on Ubuntu 13. Code for the index.html page:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Steam API Test</title>
    <style type="text/css">
    #footer {
    	text-align: center;
    }
    </style>
    <script>
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("output").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","ajax.php?username=" + document.steamid.username.value,true);
    xmlhttp.send();
    }
    </script>
    </head>
    
    <body onLoad="document.steamid.username.focus();">
    
    <p>Use the form below to get the 64 bit Steam ID for a user based on username.</p>
    
    <div>
    <form name="steamid">
    Username: <input type="text" onChange="loadXMLDoc()" name="username" />
    </form>
    </div>
    
    <div id="output"></div>
    
    <div id="footer">
    	<p><a href="http://steampowered.com" target="_blank">Powered by Steam</a></p>
    </div>
    
    </body>
    
    </html>
    Beware of Raj - My Portfolio and Blog.

  2. #2
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you type the username and then click outside the box, it works! So, congratulations on your first successful AJAX application!

    The problem is that when you type and then hit Enter, you're actually submitting the form, which unloads the page (and destroys your AJAX object, if it even gets created in the first place). You can either remove the form element altogether, or add an 'onsubmit="return false;"' attribute which should block it from submitting.

    EDIT: I should add that in the absence of method and action attributes on a form, the default behavior is to submit via GET to the current page -- which is why you see "?username=hitraj47" show up in your address bar. The Enter key is mapped to form submission, hence why hitting Enter submits your form.
    PHP questions? RTFM
    MySQL questions? RTFM

  3. #3
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh wow, thanks! I decided to get rid of the form altogether. Is it bad practice to have form elements not wrapped in a <form> tag, or in the case of Ajax, this is completely fine?
    Beware of Raj - My Portfolio and Blog.

  4. #4
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe it's completely fine to have an input element without being within a form element, however it's been ages since I've dealt with HTML standards; in any case this is a question best asked over on the (X)HTML forum, the folks over there should be able to answer your question easily.
    PHP questions? RTFM
    MySQL questions? RTFM


Tags for this Thread

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
  •