SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to Javascript Question

    I am trying to set up a rating and content changer via AJAX with a PHP response.

    Basically, the user will see a post generated at random and some rating controls (for for or against.) When the user clicks on the vote button, the post text changes to the next one and the vote count is sent to the mysql database.

    This is what I see happening with the event:

    1. Vote is sent to the processing PHP file that updates the record for the new vote.
    2. A new post is generated as the output.

    #2 is working fine.

    The trouble is with #1. How can I send data (through a POST) to the php file with information about the text being voted on? Each of my posts have a corresponding unique ID number. What I tried was to send the output of the responseText with a <span id="currentid">13</span> in the response html div. Then I (noob move) tried to use a document.getelementbyid("currentid").innerHTML to retrieve the current id number. Since the AJAX script is in the <head> of the document, it of course failed to return anything.

    Is there some other way to approach this?

  2. #2
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place your js at the end of your HTML.
    Your JS isn't aware of any HTML elements just yet when its loaded from the head.

    Now, click your vote, record your id and send via http request.
    You can process using POST by passing your parameters into the http.send(params) method.

    If it's easier, use a framework like Prototype or jQuery.
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you want to retrieve that, you have to append that innerHTML to the DOM, then access it via getElementById. It seems like a laborious way of doing it, though.

    Is your PHP script returning HTML? If so, you can just set some attribute in it to your id, like a "rev" attribute. If you're not returning HTML for the new post, you can just return the new id as pure text, which makes it all a lot easier.

    It'll be easier to answer your question if you show a sample of exactly what the responseText looks like.

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    OK I am by no means a Javascript guru but I know enough to be dangerous.....

    Here is a basic example of what you are trying to achieve. I have used buttons as the clickable object but you can use anything you like really.

    Page 1 - Display page.
    Holds the displayed objects and the div to be updated.

    Code:
    <html>
    <head>
    <script>
    var xhrobj;
    
    function ajax_request(id) {
      if(navigator.appName == "Microsoft Internet Explorer") {
        xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
      } else {
        xhrobj = new XMLHttpRequest();
      }
      
      xhrobj.open('get', 'response.php?id=' + id );
      xhrobj.onreadystatechange = ajax_response;
      xhrobj.send(null);
    }
    
    function ajax_response() {
      if(xhrobj.readyState == 4) {
        document.getElementById('ajaxUpdate').innerHTML = xhrobj.responseText;
      }
    }
    </script>
    </head>
    <body>
    <button onclick="ajax_request(1)">Click Me, I am number 1</button><br />
    <button onclick="ajax_request(2)">Click Me, I am number 2</button><br />
    <button onclick="ajax_request(3)">Click Me, I am number 3</button><br />
    <button onclick="ajax_request(4)">Click Me, I am number 4</button><br />
    <button onclick="ajax_request(5)">Click Me, I am number 5</button><br />
    <button onclick="ajax_request(6)">Click Me, I am number 6</button><br />
    <button onclick="ajax_request(7)">Click Me, I am number 7</button><br />
    
    <div id="ajaxUpdate">..(spike)..</div>
    </body>
    </html>
    Pages - response.php.
    Handles what php does with the GET variable after it has been sent by the ajax call.
    You can do whatever you would normally do with it!

    PHP Code:
    <?php


    $id 
    $_GET['id'];

    echo 
    'This is the response text...<br /> Number '$id .' was clicked<br />';

    echo 
    'I am updating the database and serving you with a new quote.....<br />';


    ?>
    Bare bones example but it gives you an idea
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for the replies. I tried some of the things mentioned here--I tried moving this script to the end of the document, but it didn't help. I am have been reading through the books but cannot figure out what I'm doing wrong; if anyone here can take a look and tell me if there is anything wrong, I'd appreciate it!

    The javascript:

    Code JavaScript:
    var xhrobj = "";
    var id = "";
     
    function vote_up(id) {
      if(navigator.appName == "Microsoft Internet Explorer") {
        xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
      } else {
        xhrobj = new XMLHttpRequest();
      }
     
      xhrobj.open('GET', 'quickvote.php?id='+id+'&quickvote=up', true);
      xhrobj.onreadystatechange = responsefor(id);
      xhrobj.send(null);
    }
     
    function vote_down(id) {
      if(navigator.appName == "Microsoft Internet Explorer") {
        xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
      } else {
        xhrobj = new XMLHttpRequest();
      }
     
      xhrobj.open('GET', 'quickvote.php?id='+id+'&quickvote=down', true);
      xhrobj.onreadystatechange = responseagainst(id);
      xhrobj.send(null);
    }
     
    function responsefor(id) {
    	  if(xhrobj.readyState == 4) {
    		document.getElementById('for'+id).innerHTML=xhrobj.responseText;
    	  }
    	}
     
    function responseagainst(id) {
      if(xhrobj.readyState == 4) {
        document.getElementById('against'+id).innerHTML=xhrobj.responseText;
      }
    }

    The HTML:

    Code HTML4Strict:
    <div class="meta">
     
       <span class="quickvote"> 
     
     <span id="for15">
           <a onclick="vote_up(15);">I like! (number of votes here)</a>
     </span>
     
     <span id="against15">
           <a onclick="vote_down(15);">I don't like (number of votes here)</a>
     </span>
     
       </span>
     
    </div>

    The PHP Processing:

    Code PHP:
    switch ($_GET["quickvote'"]) {
    	case "up":
    	include("config.php");
    	$id = $_GET["id"];
    	$upq = "UPDATE `submissions` SET votes_up=votes_up+1 WHERE id='$id'";
    	mysql_query($upq, $cxn);
    	$sql = "SELECT votes_up FROM submissions WHERE id='$id'";
    	$query = mysql_query($sql, $cxn);
    	$grab = mysql_fetch_assoc($query);
    	echo '<a class="assholer" >Ugh! What An *******! (' . $grab['votes_up']+1 . ')</a>';
    	break;
    	case "down":
    	include("config.php");
    	$id = $_GET["id"];
    	$downq = "UPDATE `submissions` SET votes_down=votes_down+1 WHERE id='$id'";
    	mysql_query($downq, $cxn);
    	$sql = "SELECT votes_down FROM submissions WHERE id='$id'";
    	$query = mysql_query($sql, $cxn);
    	$grab = mysql_fetch_assoc($query);
    	echo '<a class="joer">Meh, Just An Average Joe...(' . $grab['votes_down']+1 . ')</a>';
    	break;
    }

    If anyone has any input for me, I'd appreciate it! I'm still trying to learn this.

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and that's a simpler version of what I'm trying to do in the original post--I think my issue with the two are related and I will try to fix this one first.

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code may have other problems. I stopped looking when I saw this.

    Code JavaScript:
    xhrobj.onreadystatechange = responsefor(id);

    Because you wrote responsefor(id), with the parenthesis, you actually call the function right then and there, and assign the return value of the function to the onreadystatechange property. What you need to be doing is assign a function, which javascript will call for you later automatically.

    Normally, you would do it like
    Code JavaScript:
    xhrobj.onreadystatechange = responsefor;
    But your function needs that id argument to work. You can use an anonymous function to wrap it
    Code JavaScript:
    xhrobj.onreadystatechange = function(){
        responsefor(id);
    }
    I won't get into the details of explaining that part. google for anonymous function or closure to learn more about it in javascript. It's something you may use pretty frequently in javascript.

  8. #8
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting...I will look that up.


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
  •