CODEWITHSUNDEEP
javascriptjqueryhtmlarraysajax
Donalda Donalda
Donalda Donalda

Reputation: 99

Pass response of AJAX only to current div among an array

I've managed to make simple voting system with single current score. Everything is fine but the problem is that when I click on a button to vote for this particular content - all scores in other divs change as well!! I need AJAX to output the answer on success only on current div (video votting) not all of them on my page! I think its because of this:

success: function(html) {
    $('.this').html(html);
}

That's because I have an array of blocks on my page:

<div id="main">
    <div class="box1">
        <a href="" class="vote" id="<?php echo $mes_id; ?>" name="up">
            <img class='image'src="img/thumbsup.png">
        </a> 
        <span class='this'><?php echo $total_score; ?></span> 
        <a href="" class="vote" id="<?php echo $mes_id; ?>" name="down">
            <img class='image' src="img/icon-down.png">
        </a>
    </div>
    <div class='box2' ><?php echo $msg; ?></div>
</div>

And span with class 'this', when on success AJAX adds response to all of them, but I need to identify them and add response only to current one (spans with class 'this', which are basically the scores of current voting), so that when user votes - only current score changes. not all of them! (if all of them have spans with class 'this' to which I pass response from AJAX. Making a specific class for each block(div) is nonsense, because I make a page that displays videos from database - any number! here is ajax and jquery:

<script type="text/javascript">
$(function() {
$(".vote").click(function() 
{  
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var acdc = $('#ab').attr('class');
var potato = 'potato';
var parent = $(this);
if(name=='up')
{ 
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html){

$('.this').html(html);
}}); 
}
else
{
$(this).fadeIn(200).html('<img src="img/icon-down.png" align="absmiddle"     style="height: 10px;width:10px;">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html){ 
$('.this').html(html);
}}); 
}
return false;
});

});
 </script>

So, how can I make that?(change only current score) Thanks a lot! In advance.

Upvotes: 0

Views: 165

Answers (2)

shivgre
shivgre

Reputation: 1173

You can't use $(this) inside success function as it will changes with context in which $(this) is called, you have to store the it in a var and then use it like below in your ajax success:

<script type="text/javascript">
    $(function () {
        $(".vote").click(function ()
        {
            var id = $(this).attr("id");
            var name = $(this).attr("name");
            var dataString = 'id=' + id;
            var acdc = $('#ab').attr('class');
            var potato = 'potato';
            var parent = $(this);

            if (name == 'up')
            {
                $.ajax({
                    type: "POST",
                    url: "up_vote.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        parent.parent().find('.this').html(html);
                    }});
            }
            else
            {
                $(this).fadeIn(200).html('<img src="img/icon-down.png" align="absmiddle"     style="height: 10px;width:10px;">');
                $.ajax({
                    type: "POST",
                    url: "down_vote.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {                        
                        parent.parent().find('.this').html(html);
                    }});
            }
            return false;
        });

    });
</script>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337691

You haven't shown the code, but presumably the AJAX request is fired on click of a .vote element. If this is the case you can store a reference to the element which raised the event, then use DOM traversal to find the sibling .this and change it's HTML. Something like this:

$('.vote').click(function(e) {
    e.preventDefault();
    var $vote = $(this); // store the element which raised the event here
    $.ajax({
        url: 'foo.php',
        success: function(html) {
            $vote.siblings('.this').html(html); // use siblings() to find .this to change
        }
    });
});

Upvotes: 0

Related Questions