for looping in jquery - php

Question

in my php I have such code in a while loop...
$result = mysql_query("SELECT * FROM wallpost ORDER BY wallpostid DESC");
while($row = mysql_fetch_assoc($result)){
$rate = "<div class=\"example-".$id." \" data-postid=\"".$id."\"></div></br>Post id: <span class=\"example-rating-".$id."\">".$id."</span>";
}
jquery is...
$(document).ready(function() {
$('[class^="example-"]').not('[class^="example-rating-"]').ratings(3).bind('ratingchanged', function (event, data) {
var child = $(this).find('[class^="example-rating-"]');
child.text(data.rating);
$.post('count.php', {
rate: data.rating,
wallpostid: jQuery(this).data("postid")
}, function (data) {
alert(data);
});
});
for the value A I get the null value, but if i replace
var a = $('.example-rating-50').html(); //let say the wallpostid is 50
it only can pass the value 50 to count.php
If now let say I have 2 wallpostid which is 22 and 50 (loop it with while loop )
if I rate wallpostid is 22 then I want pass the value of $id=22 from php to jquery and $.post to count.php. Do the same this if I rate wallpostid=50.

Answer 1

it is a problem with the closure variable i
Since you are using i inside the callback, it will have the last value from the loop which is 102 that is why it is failing
$(document).ready(function () {
for (var i = 1; i < 101; i++) {
(function(idx){
$('.example-' + idx + '').ratings(3).bind('ratingchanged', function (event, data) {
$('.example-rating-' + idx + '').text(data.rating);
var a = $('.example-rating-' + idx + '').html();
$.post('count.php', {
rate: data.rating,
wallpostid: a
}, function (data) {
alert(data);
});
});
})(i)
}
});
a better solution could be
$rate = "<div class=\"examples example-".$id." \" data-idx=\"".$id"\"></div></br>Post id: <span class=\"example-rating-".$id."\">".$id."</span>";
then
$(document).ready(function () {
$('.examples').ratings(3).bind('ratingchanged', function (event, data) {
var i = $(this).data('idx')
var a = $('.example-rating-' + i + '').text(data.rating);
$.post('count.php', {
rate: data.rating,
wallpostid: data.rating
}, function (data) {
alert(data);
});
});
});

Answer 2

You dont need a for loop in the javascript, there are selectors that can handle this, for instance class^=
PHP
$rate = "<div class=\"example-".$id." \" data-postid=\"".$id."\"></div></br>Post id: <span class=\"example-rating-".$id."\">".$id."</span>";
JS
//Find elements that have class starting with 'example-' but Not example-rating-
$('[class^="example-"]').not('[class^="example-rating-"]').ratings(3).bind('ratingchanged', function (event, data) {
//Find Child element that has class starting with 'example-rating-'
var child = $(this).find('[class^="example-rating-"]');
child.text(data.rating);
$.post('count.php', {
rate: data.rating,
wallpostid: jQuery(this).data("postid")
}, function (data) {
alert(data);
});
});

Answer 3

I like to not build element selectors dynamically.
var $examples = $('[class^=example-]:not([class^=example-rating])');
var $ratings = $('[class^=example-rating]');
$examples.ratings(3).bind('ratingchanged', function (event, data) {
var index = $examples.index(this);
var $rating = $ratings.eq(index);
$rating.text(data.rating);
var a = $rating.attr('class').split('-')[2];
$.post('count.php', {
rate: data.rating,
wallpostid: a
}, function (data) {
alert(data);
});
});