CODEWITHSUNDEEP
phpjavascriptjquery
user2374946
user2374946

Reputation: 3

for looping in jquery

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.

Upvotes: 0

Views: 192

Answers (3)

Patrick Evans
Patrick Evans

Reputation: 42736

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

Upvotes: 0

Brigand
Brigand

Reputation: 86220

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

});

Upvotes: 4

Related Questions