Question

我正在实施投票系统，当我想使用AJAX更新投票数时，我刷新了所有出版物的数量。但我不能刷新一个出版物。看我的HTML：

@foreach($publications as $publication)
<li class="like-publication">

 <span>{{HTML::image(URL::to('img/widgets/likesocialmeet.png'),'Like')}}</span>

 <span class="votes">
   {{Publication::find($publication->id)->profilepublicationvotes->sum('vote')}}
 </span>

 {{ Form::open(array('url' => 'profilepublicationvotelike', 'class' => 'vote_ajax')) }}

 <input type="text" id="disabledTextInput" style="display:none" name="vote" value='1'>
 <input type="text" id="disabledTextInput" style="display:none" name="user_id" value="{{ Auth::user()->id }}">
 <input type="text" id="disabledTextInput" style="display:none" name="publication_id" value="{{ $publication->id }}">

 {{ Form::submit('vote', array('class' => 'button expand round')) }}

 {{ Form::close() }}

</li>
@endforeach

我的javascript（AJAX）：

$(document).ready(function() {
   var form = $('.vote_ajax');
    form.bind('submit',function () {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            complete: function(data){
            },
            success: function (data) {
                $('.success_message').hide().html('');
                    $(form)[0].reset();
                    console.log("working");

                    $('.votes').text( data );
            },
            error: function(errors) {
                    alert('Something went to wrong.Please Try again later...');
            }               
        });
   return false;
   });
});

Answer 1

您正在使用

选择所有<span class="votes">

$('.votes').text( data );

您需要将其限制为表单的兄弟

var votes = $(this).prev('.votes');
votes.text( data );

所以你的javascript看起来像 -

$(document).ready(function() {
   var form = $('.vote_ajax');
    form.bind('submit',function () {
        //get the sibling vote
        var votes = $(this).prev('.votes');
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            complete: function(data){
            },
            success: function (data) {
                $('.success_message').hide().html('');
                    $(form)[0].reset();
                    console.log("working");

                    // update just the sibling vote
                    votes.text( data );
            },
            error: function(errors) {
                    alert('Something went to wrong.Please Try again later...');
            }               
        });
   return false;
   });
});

jsFiddle示例 - http://jsfiddle.net/GhMfM/1/

投票：AJAX更新计数

1 个答案: