Question

The title may not so clear. Sorry for this. Here is my problem;

i render my posts in index page with a for loop. and all posts have options which are vote up and down. and i want to send these vote requests via ajax. but when i write my code, ajax worked well just for the firts content in the page. belows, doesnt work. and i realised that when i use for loop there are more than one posts with same id. thats why ajax and html ignores other contents.

here is my codes

index.html:

<ul>
    {% for post in posts %}
     <li>
      <input type="hidden" value="{{post.id}}" id="post_id" />
      {{ post.title }}
      <a href="javascript:" id="vote_up">VOTE UP</a>
      <a href="javascript:" id="vote_down">VOTE DOWN</a>
      <button id="current_vote"> {{ post.vote }} </button>
    </li>
    {% endfor %}
</ul>

and js side:

$( function (){                                                                      
 49     var post_id = $('#post_id').val();                                               
 50     $('#vote_up').click( function(){                                                 
 51         var vote = 1;                                                                
 52         var ajaxOpt = {                                                              
 53             type: 'post',                                                            
 54             url: '/content/vote/',                                                   
 55             data: {                                                                  
 56                 'vote': vote,                                                        
 57                 'post_id': post_id,                                                  
 58                 },                                                                   
 59             success: function(data){                                                 
 60                 $('#current_vote').text(data.vote_new);                                
 61                 },                                                                   
 62             error: function(){                                                       
 63                 console.log('error :[');                                             
 64                 }                                                                    
 65         };                                                                           
 66         $.ajax(ajaxOpt);                                                             
 67         return false;                                                                
 68                                                                                      
 69         })
            // same code for vote_down                                                                           
 89 })

i think there is something wrong with my way. what should i do?

thank you.

Answer 1

This is only a example for vote up. You can start from here and make vote down next:

<ul>
    {% for post in posts %}
    <li>
       {{ post.title }}
       <a href="/content/vote/{{post.id}}/" class="vote_up" data-id="{{post.id}}">VOTE UP</a>
       <button id="current_vote"> {{ post.vote }} </button>
    </li>
    {% endfor %}
</ul>

<script>
$(document).ready(function(){
    $('.vote_up').click(function(){
        var post_id = $(this).attr('data-id');
        var url = $(this).attr('href');
        $.getJSON(url, function(data){});
        return false;
    });
});
</script>