如何在jquery中的rate按钮下面显示消息状态？

Question

I have a rate button on my page, created using PHP and jQuery.

When the button is clicked, a message is shown and hidden after a while "#num voted including you"

HTML:

div class="voting_wrapper" id="1001">
    <div class="voting_btn">
        <div class="up_button">&nbsp;</div>
        <span class="up_votes"></span>
    </div>
</div>

jQuery:

 $(document).ready(function() {
     //####### on page load, retrive votes for each content
     $.each( $('.voting_wrapper'), function(){
         //retrive unique id from this voting_wrapper element
         var unique_id = $(this).attr("id");
         //prepare post content
         post_data = {'unique_id':unique_id, 'vote':'fetch'};
        //send our data to "vote_process.php" using jQuery $.post()
         $.post('vote_process.php', post_data,  function(response) {
                //retrive votes from server, replace each vote count text
                 $('#'+unique_id+' .up_votes').text(response.vote_up +' user has voted'); 
             },'json');
     });

     //####### on button click, get user vote and send it to vote_process.php using jQuery $.post().
     $(".voting_wrapper .voting_btn").click(function (e) {

         //get class name (down_button / up_button) of clicked element
         var clicked_button = $(this).children().attr('class');

         //get unique ID from voted parent element
         var unique_id   = $(this).parent().attr("id"); 

         if(clicked_button==='up_button') { //user liked the content
             //prepare post content
             post_data = {'unique_id':unique_id, 'vote':'up'};

             //send our data to "vote_process.php" using jQuery $.post()
             $.post('vote_process.php', post_data, function(data) {

                 //replace vote up count text with new values
                 $('#'+unique_id+' .up_votes').text(data);
                 //thank user for liking the content
                 dataModified = data+' users has voting including you';
                 $('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);
             }).fail(function(err) { 

             //alert user about the HTTP server error
                 alert(err.statusText); 
             });
         }

     });
     //end 

 });

It works fine, but placement of the message is incorrect. When I click the button, that message status shows up at the top of the page, while I need it to be shown below the rate button.

May I know how to add the code to achieve this? I think I could use append(); but I am struggling where and how to add the script. Can anyone help me?

Thanks in advance.

Answer 1

The reason why is that, is probably because the #message-status element is initially placed outside of the voting_wrapper element. You could move #message-status inside that wrapper, below the .voting_btn button using .insertAfter()

$('#message-status').hide().html(dataModified).insertAfter('#'+unique_id+' .voting_btn').fadeIn('slow').delay(5000).hide(1);

So that after AJAX call, your HTML becomes:

<div class="voting_wrapper" id="1001">
    <div class="voting_btn">
        <div class="up_button">&nbsp;ddd</div>
        <span class="up_votes">X</span>
    </div>
    <div id="message-status">X users has voting including you</div>
</div>

---

[EDIT]

If you need the message below the whole voting_wrapper, use this:

$('#message-status').hide().html(dataModified).insertAfter('#'+unique_id).fadeIn('slow').delay(5000).hide(1);