Ajax- multiple posts via for loop in same page

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.

As you noticed, the erroneous assumption is that #post_id is unique. it isn't. You have one #post_id for each loop iteration (and you're duplicating also other ids, like #current_vote, #vote_up, #vote_down). The W3C defines class ID as "a unique identifier to an element", so your code will not validate. And, in this case, providing ambiguous ids will "confuse" javascript. Cathy's approach is the way to go (note she didn't use ids and provided a unique url for each record) — furins
– furins, Commented Jan 26, 2013 at 16:06

catherine · Accepted Answer · 2013-01-26 17:59:44Z

5

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>

edited Jan 26, 2013 at 17:59

answered Jan 26, 2013 at 15:56

catherine

22.8k15 gold badges64 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

alioguzhan Over a year ago

i am confused. where is the ajax part. and i have no url called vote which takes argument post.id.

catherine Over a year ago

It's not an ajax, it's jquery but the same output. My above answer is just a sample for your guide. Your can change the url to '/content/vote/'. If you're confused again just tell me, I will revise it to make it same in your data.

alioguzhan Over a year ago

thank you. actually it would be great if you revise it like in my code :) i am so newbie at jquery. just handle basics for now.

catherine Over a year ago

We're same, I'm a newbie too :)

Collectives™ on Stack Overflow

Ajax- multiple posts via for loop in same page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related