Ajax post vote problem

JavaScript
1

I need click ben10 that <h2>you voted</h2> will display in its’ child <div class="message"></div>. click winx that <h2>you voted</h2> will display in its’ child <div class="message"></div>.
click pocoyo that <h2>you voted</h2> will display in its’ child <div class="message"></div>.

but my code not worked. can anyone help me?
and if I add it with other jquery plungin, How to change the $ so that all the js code run well? Thanks.

JS CODE

$(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(2).html(' ');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
context: this,
success: function(html){
parent.html(html);   // show the total number of votes                    
$(this).children('.message').fadeIn(100, function() {
$(this).children('.message').html("<h2>you voted</h2>");
})
$(this).children('.message').fadeOut(5000, function() {
$(this).children('.message').html('');
})
}
});
}
return false;
});
});

CSS CODE

.message{display:none;}

HTML CODE

   
<div class='up'>
<a href="" class="vote" id="id1" name="up">ben10</a>
<div class="message"></div>
</div>
<div class='up'>
<a href="" class="vote" id="id2" name="up">winx</a>
<div class="message"></div>
</div>
<div class='up'>
<a href="" class="vote" id="id3" name="up">pocoyo</a>
<div class="message"></div>
</div>
2

Your code is a little confusing as your using some code that doesn’t make any sense to use but try the following

$(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(2).html(' ');
            
            $.ajax({
                type    : 'POST',
                url     : 'up_vote.php',
                data    : dataString,
                cache   : false,
                context : this,
                success : function(html) {
                    parent
                        .html(html) // show the total number of votes
                        .next('.message')
                        .fadeIn(100, function() {
                            $(this).html('<h2>you voted</h2>');
                        })
                        .delay(5000)
                        .fadeOut(100, function() {
                            $(this).children('.message').html('');
                        });
                }
            });
        }
        
        return false;
    });
});

As for using something other then $ for the jQuery identifier you can use

jQuery(function($) {
    // Normal jQuery code here
    //
    // This elminates the conflict between jQuery and other libraries
    // but still allows you to use $ within the scope
});
3

It still won’t work because variable “parent” is actually the clicked <a> element, not the div containing it. <a> element will not display anything, since the .html() method is being used to populate it, rather than .text() but I assume it’s not what the OP wants.

4

thanks, @SgtLegend, all my problems are solved :slight_smile:

5

furicane, yes, you are right. the problem cause there.

6

If you want to use the div of the clicked <a> element, you need:

var parent = $(this).parent();

But then the problem will be that you use .html() method on the parent variable, which overwrites anything that’s found in the selected element.
I don’t know if that’s what you want, but you have enough to play with now :slight_smile:

7

furicane, have a nice lesson, I learn more from u.

8

Your welcome