Question

I have the following AJAX function to update votes clicked.

$(function() {
            $(".vote").click(function()
            {
            var id = $(this).attr("id");
            var name = $(this).attr("name");
            var dataString = 'id='+ id ;
            var parent = $(this);

            if (name=='up')
            {
            $(this).fadeIn(200).html('<img src="/content/voting/yes-enb.JPG" />');
            $.ajax({
            type: "POST",
            url: "up_vote.php",
            data: dataString,
            cache: false,

            success: function(html)
            {
            parent.html(html);
            }
            });
            }

});

and the div/span html code is as below

<span class="vote"  id="53" name="up" style="text-decoration:none; color:none; margin:5px; ">
<img src="/content/voting/yes-enb.png" width=12 height=12 alt=""> 
<span style="text-decoration:none; color:none">'.$up.' </span></span>

So the above AJAX code increments the counter every time the user clicks the vote button. However in this case the vote img as well as the count of vote gets refreshed. All I want is that the ‘.$up.’ part gets refreshed. that is only the vote section.

Any idea how this could be done?

Answer 1

You should use the data from the request to only update the span inside of the span with the class ‘vote’.

So change

parent.html(html);

to

parent.find('span').html(html);

Make sure your php file only returns the vote value to avoid duplicating the arrow 🙂