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:

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

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 class="star_rating">
		(Rated <strong><?php echo $rating; ?></strong> Stars)

	<div class="clearleft">&nbsp;</div>


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() {


			/* The hovered item number */
			var hovered = $(this).parent().attr("class").split("_")[1];
			while(hovered > 0) {


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

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

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});


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.

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?

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){

Thanks to both of you!

Rather then using


simply use