4

So I am making a voting system, basically a Thumbs Up & Thumbs Down voting system. I am using CakePHP and jQuery with MySQL but want to make sure the front end is correct and this is the best way to do it.

I want the user to be able to change their vote, so utilizing jQuery is this the best and most efficient way? I'm fairly novice with jQuery when it comes to class manipulation.

the ID field is going to be the unique id of the photo the users will be voting on. This of course is just a test and this is not going to be the final product in production. There will be multiple photos on the page and the user votes Up or Down for each of them.

Here is the code.

<?php
echo $javascript->link('jquery/jquery-1.4.2.min',false);
?>
<script type="text/javascript">
    $(document).ready(function() {
        $('.vote').click(function () {
            if ($(this).hasClass("current")) {
                alert("You have already voted for this option!");

                return;
            }
            var parentId = $(this).parent("div").attr("id");
            if ($(this).hasClass("up")) {
                //Do backend query and checking here
                alert("Voted Up!");
                $(this).toggleClass("current");
                if ($("#" + parentId + "-down").hasClass("current")) {
                    $("#" + parentId + "-down").toggleClass("current");
                }
            }
            else if($(this).hasClass("down")) {
                //Do backend query and checking here
                alert("Voted Down!");
                $(this).toggleClass("current");
                if ($("#" + parentId + "-up").hasClass("current")) {
                    $("#" + parentId + "-up").toggleClass("current");
                }
            }



        });
    });
</script>
<div id="1234">
    <a id="1234-up" class="vote up" >+</a> | <a id="1234-down" class="vote down" >-</a>
</div>
Bot
  • 11,868
  • 11
  • 75
  • 131
  • 2
    So what is the question? – Chris Laplante Sep 16 '10 at 00:53
  • 1
    In JavaScript an id has to start with a letter and should only contain letters, numbers, or _ (underscore). – furtive Sep 16 '10 at 03:00
  • @furtive: What are you talking about? Then why does the code work as is? @SimpleCoder: my question is "Is this the best way to do what I am trying to achieve". Is there functions in jQuery that I am not using that I could be using to make this code much more simple and get rid of some of the if statements. – Bot Sep 16 '10 at 04:00
  • that seems pretty streamlined to me. I'm not sure how you'd remove some of the if statements. IMO Jquery is the best to do what you're doing. – willdanceforfun Sep 16 '10 at 04:16

3 Answers3

5

You could do it this way: 

<script type="text/javascript">
    $(document).ready(function() {
        $('.vote').click(function () {
            if ($(this).hasClass("current")) {
                alert("You have already voted for this option!");
            } else {
                var parentId = $(this).parent("div").attr("id");
                var error = false;

                if ($(this).hasClass("up")) {
                    //Do backend query and checking here (SET: error)
                    alert("Voted Up!");
                }
                else if($(this).hasClass("down")) {
                    //Do backend query and checking here (SET: error)
                    alert("Voted Down!");
                }
                //removes all the votes 
                $(this).parent("div").children().removeClass("current");

                if(!error) {
                    $(this).addClass("current");
                } else {
                    alert("There was an error");
                }
            }
            return false;
        });
    });
</script>
<div id="1234">
    <a class="vote up" href="#">+</a> | <a class="vote down" href="#">-</a>
</div>

It removes the need for extra html id's and you dont need the doubled up code to add the current class. I'm not sure which is quicker, but I think this way will allow better code maintenance.

User123342234
  • 1,455
  • 14
  • 17
  • Awesome! looks good, I will test it tomorrow and let you know! $(this).parent("div").children().removeClass("current"); was something I was looking to do but wasn't sure which route to take! – Bot Sep 16 '10 at 05:01
  • No problems! You should probably move $(this).parent("div").children().removeClass("current"); into the if(!error) condition. So that if something goes wrong server side you dont appear to be removing the vote to the user. Good luck with this :D – User123342234 Sep 16 '10 at 21:49
0

Yes, jQuery is the best solution for this but I'm not sure if you can optimize your code any more so.

willdanceforfun
  • 11,044
  • 31
  • 82
  • 122
0

You can use this one: http://www.technabled.com/2011/02/pulse-lite-reddit-ajax-up-down-voting.html Disclosure: I am the developer.

abhisek
  • 924
  • 1
  • 13
  • 27