Like/Dislike Funktion

Question

ich diese Ajax-Funktion von einer Vielzahl von Design habe und einen Kommentar nicht zu mögen, aber mit dieser Funktion, kann ich zur gleichen Zeit mag und nicht mag. zum Beispiel Wenn ich den Kommentar mag, gefällt es ihm und wenn ich danach nicht mag, macht es das auch, ohne mein Like zu entfernen. Hier

ist der Code für wie (upvote) und nicht mögen (downvote)

up Stimmen

$(".tup").click(function (e) { 

    e.preventDefault(); 
    var reviewId = $(this).data('id'); 

    $.ajax({ 
      headers: { 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      }, 
      url: document.location.origin + '/review/' + reviewId + '/upvote', 
      type: 'POST', 
      data: { 
       review_id: reviewId 
      }, 
      dataType: 'json' 
     }) 
     .done(function (data) { 

      if (data == true) { 
       $('.tup[data-id=' + reviewId + '] .vn').text(function (i, oldVal) 
       { 
        return parseInt(oldVal, 10) + 1; 
       }); 
      } else { 
       snackybar.timer("Already Voted", 3000); 
      } 

     }) 
     .fail(function (jqXHR, textStatus) { 
      console.log("Request failed: " + textStatus); 
     }); 
}); 

// down votes 

$(".tdown").click(function (e) { 
    e.preventDefault(); 
    var reviewId = $(this).data('id'); 

    $.ajax({ 
      headers: { 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      }, 
      url: document.location.origin + '/review/' + reviewId + '/downvote', 
      type: 'POST', 
      data: { 
       review_id: reviewId 
      }, 
      dataType: 'json' 
     }) 
     .done(function (data) { 
      if (data == true) { 
       $('.tdown[data-id=' + reviewId + '] .vn').text(function (i, oldVal) { 
        return parseInt(oldVal, 10) + 1; 
       }); 
      } else { 
       snackybar.timer("Already Voted", 3000); 
      } 
     }) 
     .fail(function (jqXHR, textStatus) { 
      console.log("Request failed: " + textStatus); 
     }); 
}); 

Und das ist der Code der Controller

public function upvote($id) { 
    if(!UpDownVote::where('review_id',$id)->where('upvote',1)->first()) { 
     Review::findOrFail($id)->increment('upvote'); 
     UpDownVote::create([ 
      'user_id' => Auth::user()->id, 
      'review_id' => $id, 
      'upvote' => 1 
     ]); 
     return 'true'; 
    } else { 
     return 'false'; 
    } 
} 

public function downvote($id) { 
    if(!UpDownVote::where('review_id',$id)->where('downvote',1)->first()) { 
     Review::findOrFail($id)->increment('downvote'); 
     UpDownVote::create([ 
      'user_id' => Auth::user()->id, 
      'review_id' => $id, 
      'downvote' => 1 
     ]); 
     return 'true'; 
    } else { 
     return 'false'; 
    } 
} 

Answer 1

Das Problem ist, dass Ihre Ajax-Aufrufe sind asynchron; also, wenn man auf tup Knopf und dann auf den tdown Knopf klickt, ist die Behandlung noch nicht erledigt, wenn man auf den zweiten Knopf klickt.

Sie können die Möglichkeit des Klickens deaktivieren, wenn Sie auf die Serverantwort warten.

var isClicking = false; 
$(".tup").click(function (e) { 
if(isClicking){ 
    return; 
} 
isClicking = true; 
e.preventDefault(); 
var reviewId = $(this).data('id'); 

$.ajax({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
     }, 
     url: document.location.origin + '/review/' + reviewId + '/upvote', 
     type: 'POST', 
     data: { 
      review_id: reviewId 
     }, 
     dataType: 'json' 
    }) 
    .done(function (data) { 

     if (data == true) { 
      $('.tup[data-id=' + reviewId + '] .vn').text(function (i, oldVal) 
      { 
       return parseInt(oldVal, 10) + 1; 
      }); 
     } else { 
      snackybar.timer("Already Voted", 3000); 
     } 

    }) 
    .fail(function (jqXHR, textStatus) { 
     console.log("Request failed: " + textStatus); 
    }).always(function(){ 
    isClicking=false; 
    }); 
}); 

// down votes 




$(".tdown").click(function (e) { 
e.preventDefault(); 
if(isClicking){ 
    return; 
} 
isClicking = true; 
var reviewId = $(this).data('id'); 

$.ajax({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
     }, 
     url: document.location.origin + '/review/' + reviewId + '/downvote', 
     type: 'POST', 
     data: { 
      review_id: reviewId 
     }, 
     dataType: 'json' 
    }) 
    .done(function (data) { 
     if (data == true) { 
      $('.tdown[data-id=' + reviewId + '] .vn').text(function (i, oldVal) { 
       return parseInt(oldVal, 10) + 1; 
      }); 
     } else { 
      snackybar.timer("Already Voted", 3000); 
     } 
    }) 
    .fail(function (jqXHR, textStatus) { 
     console.log("Request failed: " + textStatus); 
    }).always(function(){ 
    isClicking=false; 
    }); 
});