voting system with ajax and php

Thanks for reading.

I'm trying to improve so I'm doing an example project to improve. I made a simple. voting system. I have number of contents which displayed by php each of them have up or down vote button. by the way I use twitter bootstrap.

this is the html code:

<html>
<button type="submit" class="btn btn-mini upvote" id="'.$data['ContentID'].'">
    <i class="icon-arrow-up"></i>
</button>

    <span id="voteresponse">'.$data['VoteSum'].'</span>

<button type="submit" class="btn btn-mini downvote" id="'.$data['ContentID'].'">
    <i class="icon-arrow-down"></i>
</button>
</html>

the problem is when I lick up button which is class="upvote" all other buttons does same thing. because the data populated by php there are many of them.

this is my javascript.

<script>
jQuery(document).ready(function($){

              $('.upvote').click( function(event) {

              event.preventDefault();

              $("#voteresponse").html('');
              var voteID = $(".upvote").first().attr("id");

                $.ajax({
                  url: "/ajax.php?Page=votetitle",
                  type: "post",
                  dataType: "json",
                  data: {id : voteID},
                  success: function(data, textStatus){
                    if(data.success == 'true'){
                      $('#voteresponse').html(data.message);
                      return true;
                    }else{
                      $('#voteresponse').popover({
                        title: 'Hata!',
                        content: data.message 
                      });
                    }
                  },
                  error:function(){
                      $('#voteresponse').popover({
                        title: 'error!',
                        content: 'Server error' 
                      });
                  }
                }); 
              });
            });
</script>

and the php code is just usual database request.

<?php

if ( $_SESSION['UserID'] <1 )
    die( print_r(json_encode(array('success'=>'false', 'message'=>'error for user!')))     );

    print_r(json_encode(array('success'=>'true', 'message'=>$_POST['id'])))

?>

you can see the action here. if you click one of them all other up arrows do same thing. also is this approach right?

thanks. best regards

Answers


Only the first one "responds" when you click any of them... This is likely because of var voteID = $(".upvote").first().attr("id"); The voteID should be something like $(this).attr('id'); instead.

Note that you need to recognize which button was clicked, you can use for example $(this).parent()... That will give you to the upper DOM level of the clicked button (div media isotope-item) and from there you can modify only the content of that div.


try changing

var voteID = $(".upvote").first().attr("id");

to this

var voteID = $(this).first().attr("id");

or

var voteID = $(this).attr("id");

Need Your Help

Reading Excel: Column Names truncated to first 64 characters

asp.net .net excel oledb

I am trying to read an excel spreadsheet through .NET (C#)

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.