Jquery: Ajax send to database not functioning

JavaScript
1

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:


<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



$(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

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

The error I am getting is Uncaught TypeError: Object #<Object> has no method ‘post’


$("[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

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

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?

6

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:


$.post('send.php', {"rating": current_star, "id": rid}, function(response){
		  $("#response").attr("innerHTML",response);
		
		});

Thanks to both of you!

7

Rather then using

$("#response").attr("innerHTML",response);

simply use

$("#response").html(response);