Ajax 绑定点击到另一个元素

Question

I have a button (is anchor tag with class vote) which should be clicked to vote for an article via ajax request. After that I want to update the votes count in my blade view (its a laravel application). The div with the class points should be updated but I dont know how to bind points on click to the ajax call?

I want to bind the .point to ajax call like I did it with $button to then update the div with the class points.

<a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}"></a>

Main code:

<div data-id="{{ $article->id }}" class="points">{{ $article->votes->count() }}</div>

$(document).on('click','.vote',function(){
 var $counter = $(this).next();
 var $button = $(this);
 var id = $button.data('id');
 var token = $('meta[name="csrf-token"]').attr('content');
$.ajax({

  type:'POST',
  url:"{!! URL::to('article/vote/') !!}/" + id,
  dataType: 'JSON',
  data: {
      "_method": 'POST',
      "_token": token,
      "id": id,
  },
  success:function(data){
      $counter.html(data.count);
      var color = data.voted ? '#bbb' : '#38c172';
      $button.css('background-color', color);
      console.log('success');
      console.log(data);
  },
  error:function(xhr){
      if (xhr.status == 401) {
        window.location.href = "{!! URL::to('login') !!}";
      } else if (xhr.status == 403) {
        window.location.href = "{!! URL::to('email/verify') !!}";
      }
  },
});
});

Answer 1

So you want your .points to be updated and not the a button you clicked.

First, make sure your a and .points are children of the same div element and there like:

<div>
    <a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}">
        button
    </a>
    <div data-id="{{ $article->id }}" class="points">
        {{ $article->votes->count() }}
    </div>
</div>
...
<div>
    <a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}">
        button
    </a>
    <div data-id="{{ $article->id }}" class="points">
        {{ $article->votes->count() }}
    </div>
</div>

Then in your JavaScript define the counter element like

var $counter = $(this).parent().find('points');

and update your success: method to apply CSS class and put data count:

  $counter.html(data.count);
  var color = data.voted ? '#bbb' : '#38c172';
  $counter.css('background-color', color);

Let me know if it makes sense and you can finish the implementation.