SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery: Ajax send to database not functioning

    This is my first foray into ajax territory and it's not cooperating. The PHP works fine if I define the variables and load the page independent of the ajax, so here's the otherwise relevant code (it's not mine):

    rating page:
    Code HTML4Strict:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
     
     
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
     
    <?php
    include '../db.php';
     
    $query = mysql_query("SELECT * FROM games WHERE ID = '3'");
     
    while($row = mysql_fetch_array($query)) {
    	$rating = (int)$row['rating'];
    	?>
    	<div class="floatleft">
    		<div id="rating_<?php echo $row[id]; ?>">
    			<span class="star_1"><img src="star_blank.png" alt="" <?php if($rating > 0) { echo"class='hover'"; } ?> /></span>
    			<span class="star_2"><img src="star_blank.png" alt="" <?php if($rating > 1.5) { echo"class='hover'"; } ?> /></span>
    			<span class="star_3"><img src="star_blank.png" alt="" <?php if($rating > 2.5) { echo"class='hover'"; } ?> /></span>
    			<span class="star_4"><img src="star_blank.png" alt="" <?php if($rating > 3.5) { echo"class='hover'"; } ?> /></span>
    			<span class="star_5"><img src="star_blank.png" alt="" <?php if($rating > 4.5) { echo"class='hover'"; } ?> /></span>
    		</div>
    	</div>
    	<div class="star_rating">
    		(Rated <strong><?php echo $rating; ?></strong> Stars)
    	</div>
     
    	<div class="clearleft">&nbsp;</div>
    	<?php	
    }
     
    ?>
    </body>
    </html>

    and script.js
    Code JavaScript:
     
    $(document).ready(function() {
     
     
    	$("[id^=rating_]").hover(function() {
     
     
    		rid = $(this).attr("id").split("_")[1];
    		$("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {
     
    			$("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");
     
    			/* The hovered item number */
    			var hovered = $(this).parent().attr("class").split("_")[1];
     
    			while(hovered > 0) {
    				$("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
    				hovered--;
    			}
     
    		});
    	});
     
    	$("[id^=rating_]").children("[class^=star_]").click(function() {
     
     
    		var current_star = $(this).attr("class").split("_")[1];
    		var rid = $(this).parent().attr("id").split("_")[1];
     
    		$('#rating_'+rid).load('send.php', {rating: current_star, id: rid});
     
    	});
     
     
     
     
    });

    These are the post variables on send.php
    $rating = $_POST['rating'];
    $id = $_POST['id'];

    When I click on a star to rate, the stars disappear, and that's it. Nothing gets to my send.php page.

    Thanks for the help!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The jQuery .load() method by default uses the GET super global so from the gecko it wouldn't have worked. The method i recommend you use is .post() but you can also use .ajax(), see the links below for the documentation.

    jQuery.ajax() – jQuery API
    jQuery.post() – jQuery API

  3. #3
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The error I am getting is Uncaught TypeError: Object #<Object> has no method 'post'

    Code:
    $("[id^=rating_]").children("[class^=star_]").click(function() {
    
    		
    		var current_star = $(this).attr("class").split("_")[1];
    		var rid = $(this).parent().attr("id").split("_")[1];
    
    		$('#rating_'+rid).post('send.php', {rating: current_star, id: rid});
    
    	});

  4. #4
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After some google investigation, it seems that error indicates that somehow jquery isn't loading properly. For the life of me, though, I cannot figure out why that is.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It could also mean that $('#rating_'+rid) doesn't result in a meaningful element.

    Can you link us to a test version of your page?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It turns out that was it. Plus, I changed it to .post like recommended above.

    For anyone interested, though, it wasn't printing anything from send.php (i.e., successfully rated), so I added this:

    Code:
    $.post('send.php', {"rating": current_star, "id": rid}, function(response){
    		  $("#response").attr("innerHTML",response);
    		
    		});
    Thanks to both of you!

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Rather then using

    Code JavaScript:
    $("#response").attr("innerHTML",response);

    simply use

    Code JavaScript:
    $("#response").html(response);


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
  •