Thread: AJAX Help

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0

    AJAX Help


    Hey, first off sorry to make my first post on these forums a question asking for help. Anyway, I started looking at JS a few days ago and I've been playing with AJAX tonight. I wrote a really simple script basically its a "like" system: click "like" -> increments number -> display. Now I'm trying to add some AJAX into it so the script sends a query to a (very simple) php script. Problem being, I've been fiddling with this for about an hour and I cannot figure out what is wrong. Any help would be great.

    Code:
    			var numLikes = 0;
    			var test = "";
    		function like() {
    			numLikes++;
    			$('#likes').text("Liked " + numLikes + " times." + test);
    
    			if (numLikes >=20) {
    				var http = new XMLHttpRequest();
    				http.open("GET", "test.php?number_votes="+numLikes);
    				http.send(null);
    				http.onreadystatechange = function () {
    					if (http.readystate == 4){
    						test = http.responseText;
    					}
    				}
    			}
    		}
    PHP Code:
    <?php
        $votes 
    $_GET['number_votes'];

        if (
    $votes >= 20) {
            
    $response "BAM";
        }

        if (isset(
    $response)) {
            echo 
    $response;
        }
    ?>
    Using FIrefox's web console at numLikes == 20 , http is undefined. So for some reason XMLHttpRequest object insn't getting instanitiated.Note: this isn't for anything, just me playing around learning.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Welcome to DevShed Forums, ZWEI01.

    You need to set the onreadystatechange handler before you call send().

    Do you realize that the text won't get updated until the next time someone clicks "like"?

    I'm curious, is there a particular reason why you are using jQuery for some things, but not the AJAX part?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, ZWEI01.

    You need to set the onreadystatechange handler before you call send().

    Do you realize that the text won't get updated until the next time someone clicks "like"?

    I'm curious, is there a particular reason why you are using jQuery for some things, but not the AJAX part?
    Thank you, thank you. .
    The reason I'm not using JQuery on the AJAX part is becuse I feel its rather bad pratice to use a library before I understand what I'm doing natively haha. I called send() after setting the onreadystatechange handler but it is still not working.

    Code:
    			if (numLikes >=20) {
    				var http = new XMLHttpRequest();
    				http.open("GET", "test.php?number_votes="+numLikes);
    				http.onreadystatechange = function () {
    					if (http.readystate == 4){
    						test = http.responseText;
    					}
    				http.send(null);
    				}
    			}
    edit:
    Do you realize that the text won't get updated until the next time someone clicks "like"?
    Now that you point that out. Thanks.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Good for you. So many people try to jump in without learning plain JavaScript first.

    The "S" in readyState should be uppercase.

    If that doesn't fix it either, perhaps you're testing in a browser that requires the third argument for open(). In most situations it should be set to "true".
    Code:
    http.open("GET", "test.php?number_votes="+numLikes, true);
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0
    Here is the fixed function if any newbie comes across this thread in the future with the same problems.

    Code:
    		function like() {
    			numLikes++;
    			$('#likes').text("Liked " + numLikes + " times. " + test);
    
    			if (numLikes == 20) {
    				var http = new XMLHttpRequest();
    				http.open("GET", "test.php?number_votes="+numLikes);
    				http.send(null);
    				http.onreadystatechange = function () {
    					if (http.readyState == 4){
    						$('#likes').text("Liked " + numLikes + " times. " + http.responseText);
    						test = http.responseText;
    
    					}
    				}
    			}
    		}

IMN logo majestic logo threadwatch logo seochat tools logo