views:

61

answers:

1

What is wrong with this jquery script? It doesn't seem to be functioning properly: there are no syntax errors (I checked).

     $(document).ready(function() {
        $('.statuses').delegate('.vote_up', '.vote_down', 'click', function(e) {

            e.preventDefault();
//get the ide
var the_id = $(this).closest('.message').attr('id').split('_').pop();

            var parent = $(this).closest('.statuses'),
                vote = (($(this).hasClass("vote_up")) ? "up" : "down");

            if(parent.data("vote") == vote) {
                return true; // If already voted up, do nothing, if already voted down, do nothing...
            }

            if(vote == "down") { // Vote down
                src = "img/uparrow.png";
                action = "vote_down";
            }
            else if(vote == "up") { // Vote up
                src = "img/uparrowActive.png";
                action = "vote_up";
            }

            // Setting current vote (up or down)
            // So next time you toggle, we have the trace of the previous vote (up/down)
            // And authorise only do the opposite
            parent.data("vote", vote);

                    $.ajax({
                        context: this,
                        type: "POST",
                          // Make sure "this" in the callback refers to the element clicked

                        data: "action=" + action + "&id=" + the_id,
                        url: "ajax/votes.php",
                        success: function (msg) {

                            $(this).siblings("span.vote_count").html(msg).fadeIn();
                              // get the child <img> and set its src
                            $(this).children("img").attr("src", src);
                        }
                    });
                });
           });

html:

<ul class="statuses">
<li id="set_41" class="message">
 <span class="vote_count">0</span>
 <a href="#" class="vote_up"><img src="img/uparrow.png" /></a>
+4  A: 

You're passing too many arguments to .delegate().

I assume you're trying to do:

$('.statuses').delegate('.vote_up,.vote_down', 'click', func...

$(document).ready(function() {
    $('.statuses').delegate('.vote_up,.vote_down', 'click', function(e) {
        e.preventDefault();
        var the_id = this.parentNode.id.split('_')[1];  // get the id
        var $img = $(this).children('img');      // get the child image
        var src = $img.attr('src');      // get the src of the image
         // it has been clicked if the src contains the word "Active"
        var hasBeenClicked = src.indexOf('Active') > -1;
        var action = this.className;  // action is the same as the className
          // if it has been clicked, reverse the action
        if( hasBeenClicked ) {
            action = ( action === 'vote_up' ) ? 'vote_down' : 'vote_up';
        }
        $.ajax({
            context: this,
            type: "POST",
            data: "action=" + action + "&id=" + the_id,
            url: "ajax/votes.php",
            success: function(msg) {

                $(this).siblings("span.vote_count").html(msg).fadeIn();
                    // set the src of the image
                    // If it has been clicked, remove the word "Active"
                    // If not, add "Active"
                $img.attr("src", function(i,src) {
                    return ( hasBeenClicked ) ? src.replace('Active', '') : src.replace('.png', 'Active.png');
                });
            }
        });
    });
});​
patrick dw
hey patrick, im trying to toggle vote
getaway
ive changed that patrick, its still not working.
getaway
@getaway - Your use of `.data()` to store the last up/down vote is allowing you to toggle *between* the two images, but not toggle when clicking on one or the other a second time. Give me a minute and so we can put this to rest. ;o) EDIT: Also, doesn't make sense that the `.data()` was stored on the `#statuses` container. How did that happen?
patrick dw
@getaway - Quick question. What action should be sent via AJAX if someone clicks a second time on (for example) the `.vote_up`? There's got to be some way to tell the server that it has already been voted up, and that it should reset that vote, right?
patrick dw
@getaway - Also, what happened to `the_id`? Why isn't it in your code anymore?
patrick dw
@patrick i was going to do server-side check on whether the post was voted or not, oh yeh oh my god i dont the the_id nomore, im gonnna gonna put it back in :))
getaway
@patrick i have put back the_id back in
getaway
@patrick for the ajax request question `vote_down` action will be sent, which will remove the vote from that post. i wish jquery was as easy as php :)) lol
getaway
@getaway - Just to be clear. The first time I click `.vote_up`, the `vote_up` action is sent. The second time I click `.vote_up`, the `vote_down` action should be sent in order to *undo* the previous upvote?
patrick dw
yes exactly please, but when someone clicks it again it should go back to vote_up, its like when your voting for an answer on stackoverflow!! toggle the vote:)) thank ever so much
getaway
@getaway - Ok, another question. It seems as though in your code (in the AJAX callback) you are setting the `src` attribute of the `<img>` element. Problem is that you are setting it to the *same* value that was there to begin with in your HTML. Is that correct? Or should you be setting a different `src`?
patrick dw
@patrick yeh so basically it starts off with uparrow.png, when someone clicks to vote_up it changes to `uparrowActive.png`, if someone clicks again it goes back to the orginal uparrow.png that was thier. ;) if you get what i mean?
getaway
@getaway - Ok, that makes more sense. I missed the `Acitve` part in your code. We're going to use that to test if the `up_vote` has already been clicked. I should have it in a minute.
patrick dw
@patrick kool genius...dont know what i would do without you!1 :))
getaway
@getaway - Sorry it took so long. Was trying to figure out the cleanest way. Give it a try.
patrick dw
@patrick i just dont know how you do it, your amazing, and you didnt take long oh my god!! thank you very much :)))
getaway
@getaway - You're welcome. :o)
patrick dw
@patrick how come the id is not being sent sorry, i checked on firebug and its saying undefined! :)) sorry again
getaway
@getaway - Did you test the value of the `the_id` variable? If not, try this after you create the variable `alert(the_id)`, and tell me what you get. Also, is the HTML structure in the question accurate?
patrick dw
@patrick it says undefined :))
getaway
@getaway - How about if you do `alert(this.parentNode.id)`?
patrick dw
@patrick it gives me blank pop up screen
getaway
@getaway - Did you change the HTML in the question, or is it accurate?
patrick dw
@patrick i havent changed nothing its still the same
getaway
@getaway - According to the HTML in your question, the `parentNode` of the `.vote_up` element is the `<li>` element that has the id attribute of `set_41`. Since `this` refers to the `.vote_up` or `.vote_down` that was clicked, then `this.parentNode.id` should be `set_41` (or whatever). So something must be different in your code as compared to the question.
patrick dw
i just checked again the rendered html, all my lists has `<li id="set_41" class="message"> `
getaway
p.s. the jquery is changing the image but obviously its not sending the id to the ajax request
getaway
@getaway - Try using this to get the ID: `var the_id = $(this).closest('li.message').attr('id').split('_')[1];`
patrick dw
thanks it works, yet again lol, can i just ask where are the images gone in the script, thier names are not mentioned!! because i was going to use css sprites for my images, if it deosnt work with the script, then its alright i will use that until i find another solution!! youve done enough for today thanks :))
getaway
@getaway - Strange that `.closest()` worked. Something's missing. Anyway, with regard to the `src` for the images, you're right. We didn't need to store the whole `url`. All we're doing in the callback is basically toggling the word `"Active"` since that's the only change in the url. If `.vote_up` hasBeenClicked, `"Active"` is replaced with an empty string `''`. Otherwise `".png"` is replaced with `"Active.png"`. There wasn't any need to mess with the rest of the url.
patrick dw