Нравится Не нравится с одним флажком php ajax

Question

Я проверил все связанные вопросы на SO, но все еще ищу лучший ответ.

Я пишу систему рецензирования, где любой может комментировать и войти в систему, пользователям может понравиться их рецензия (Поставить лайк или отменить их лайктолько ... не нравится).

Для этого я использую флажок, и onClick вызывает функцию ajax, которая будет любить обзор, и при повторном нажатии она отменяет действие.

проблема

Первоначально, когда кому-то понравился обзор, вызову ajax понравится, и при успехе он изменит attr onClick в отличие от ();функция, но снова, когда я нажимаю на нее, она не работает нормально ...

МОЯ ПОПЫТКА

<?php if($review['is_liked']){ ?>
    <input type="checkbox" name="review_like" id="<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>" checked="checked" onclick="unlike(<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>);" />
<?php } else { ?>
    <input type="checkbox" name="review_like" id="<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>" onclick="like(<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>);" />
<?php } ?>

И JS (идентификатор, передаваемый в JS func, выглядит как 1105-249532-18117)

<script>
function unlike(id){
    console.log('unlike');
    var id2 = toString(id).split('-');
    console.log('Unlike: '+id);
    console.log('split id: '+ id2);
    $.ajax({
        url: 'index.php?route=product/product/like_review',
        type: "get",
        data: {
            'is_liked': 1,
            'review_id': id[0],
            'customer_id': id[1],
            'product_id': id[2]
        },
        dataType: 'json',
        success: function(json) {
            console.log(json);
            $('.btn-thumbs-up').find('input[type=checkbox][name=review_like]').attr("onclick","like(id);");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
}

function like(id){
    console.log('like');
    console.log('Liked: '+id);
    var id2 = toString(id).split('-');
    console.log('split: '+id2);
    $.ajax({
        url: 'index.php?route=product/product/like_review',
        type: "get",
        data: {
            'is_liked': 0,
            'review_id': id[0],
            'customer_id': id[1],
            'product_id': id[2]
        },
        dataType: 'json',
        success: function(json) {
            console.log(json);
            $('.btn-thumbs-up').find('input[type=checkbox][name=review_like]').attr("onclick","unlike(id);");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
}

Идентификатор, который я передаю функции «Мне нравится / не нравится», не работает нормально в консоли, а также разделяет функцию, даже используя toString func или wdout ...

Пожалуйста, исправьте это или предложите лучший способ выполнить эту задачу ...

Answer 1

Вы могли бы справиться с этим на стороне клиента с более простыми условиями.Измените тег на:

<input type="checkbox" name="review_like" data-id="<?php echo $review['review_id']; ?>" data-customer="<?php echo $review['customer_id'] ?>" data-product="<?php echo $review['product_id']; ?>" checked="<?php echo ( $review['is_liked'] ? "checked" : ""); ?>" />

И добавьте этот сценарий jQuery для обработки изменения флажка:

$('input[name="review_like"]').change ( function ()
{
  $.ajax (
  {
    url: 'index.php?route=product/product/like_review',
    type: "get",
    data:
    {
      'is_liked': $(this).prop('checked'),
      'review_id': $(this).data ( 'id'),
      'customer_id': $(this).data ( 'customer'),
      'product_id': $(this).data ( 'product')
    },
    dataType: 'json',
    success: function ( json)
    {
      console.log ( ( $(this).prop('checked') ? 'Unliked' : 'Liked') + ' review ' + $(this).data ( 'id') + ', customer ' + $(this).data ( 'customer') + ', product ' + $(this).data ( 'product'));
    },
    error: function ( xhr, ajaxOptions, thrownError)
    {
      alert ( thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
});