can't call "this" properly in jQuery -
i have following jquery seems working fine except for:
$(this).attr('src', 'img/upgreen.png'); is there reason why wouldn't work ?
$(function addthumbs() { $('.vote-up').bind('click', function() { // 'this' dom element // wrap 'this' in jquery object var img = $(this); // have full jquery api @ our disposal var review_id = $('#review_id').val(); var user_id = $('#user_id').val(); if (user_id == 1) { alert('...'); } else { $("#flash").show(); $("#flash").fadein(400).html('<img src="ajax-loader.gif" />loading comment...'); $.ajax({ type: "post", url: "ajax-thumbsup.php", data:{ "user_id" : user_id, "review_id" : review_id //we passing name value in url }, cache: false, success: function(html) { $("#progressdiv").show(); $("#progressdiv").fadein(400).html('success'); $(this).attr('src', 'img/upgreen.png'); } }); }return false; }); });
html inside loop
<div class="thumbs"> <input type="hidden" id="review_id" value="<?php echo $review['review_id']?>" /> <input type="hidden" id="user_id" value="<?php echo $user_id ?>" /> <div id="pluses">0</div> <div id="progressdiv"></div> <a><img class="vote-up" src="img/up.png" alt="thumbs up" /> </a> <a><img class="vote-down" src="img/down.png" alt="thumbs down" /> </a> <div id="minuses">0</div> </div> <div class="thumbs"> <input type="hidden" id="review_id" value="<?php echo $review['review_id']?>" /> <input type="hidden" id="user_id" value="<?php echo $user_id ?>" /> <div id="pluses">0</div> <div id="progressdiv"></div> <a><img class="vote-up" src="img/up.png" alt="thumbs up" /> </a> <a><img class="vote-down" src="img/down.png" alt="thumbs down" /> </a> <div id="minuses">0</div> </div>
this inside ajax callback isn't same this inside click handler.
fortunately - saved reference it! use:
img.attr('src', 'img/upgreen.png'); nb: if had saved img = this instead of img = $(this) have written:
img.src = 'img/upgreen.png'; without call jquery.
Comments
Post a Comment