Saya menggunakan Laravel dalam proyek saya. Saya memiliki voucher yang mempertahankan status. Saya telah menggunakan AJAX untuk mengubah status dan kode AJAX berhasil.

Namun status tidak berubah dalam tampilan saya sampai setelah saya me-refresh halaman. Saya mencari cara untuk menyelesaikan masalah ini.

<button class="btn btn-link p-0 change" type="submit" data-id="{{ $voucher->id }}">
  @if ($voucher->status == 1)
    <i class="fa fa-toggle-on text-success"></i>
  @else
    <i class="fa fa-toggle-off text-muted"></i>
  @endif
</button> 
@if ($voucher->status == 1)
  <span class="badge badge-soft-success">
    enable
  </span> 
@else
  <span class="badge badge-soft-pink">
    disbale
  </span> 
@endif
$(".change").click(function() {
  var id = $(this).data("id");
  $.ajax({
    url: "vouchers/change-status/" + id,
    type: 'put',
    dataType: "JSON",
    data: {
      "id": id,
      "_method": 'put',
      "_token": "{{ csrf_token() }}",
    },
    success: function() {
      console.log("it Work");
      // $("tr#"+id).remove();
    }
  });

  console.log("It failed");
});
2
hassan khosro 29 Oktober 2019, 15:10

3 jawaban

Jawaban Terbaik

Anda dapat mencoba cara ini:

Pisau

Bungkus kode Anda di beberapa pemegang dengan kelas status-enabled, ketika statusnya adalah 1. Tetapkan kelas khusus untuk elemen yang akan terlihat atau tidak sesuai status.

<div class="holder @if($voucher->status == 1) status-enabled @endif">
    <button class="btn btn-link p-0 change" type="submit" data-id="{{ $voucher->id }}">
        <i class="fa fa-toggle-on text-success enabled-visible"></i>
        <i class="fa fa-toggle-off text-muted enabled-invisible"></i>
    </button>

    <span class="badge badge-soft-success enabled-visible">
        enable
    </span>

    <span class="badge badge-soft-pink enabled-invisible">
        disbale
    </span>
</div>

CSS

Tetapkan aturan:

    .holder .enabled-visible {
        display: none;
    }
    .holder .enabled-invisible {
        display: inline-block;
    }

    .holder.status-enabled .enabled-visible {
        display: inline-block;
    }
    .holder.status-enabled .enabled-invisible {
        display: none;
    }

JS

Alihkan kelas pemegang ketika Anda berhasil mengubah status.

$(".change").click(function() {
    var id = $(this).data("id");
    $.ajax({
        url: "vouchers/change-status/" + id,
        type: 'put',
        dataType: "JSON",
        data: {
            "id": id,
            "_method": 'put',
            "_token": "{{ csrf_token() }}",
        },
        success: function() {
            $(this).closest('.holder').toggleClass('status-enabled');
        }
    });

    console.log("It failed");
});
2
Roman Bobrik 29 Oktober 2019, 13:47

Hanya dalam fungsi sukses Anda:

 success: function() {
      console.log("it Work");
      $("i.fa-toggle-on).hide();
      $("i.fa-toggle-off).show();
    }
1
sajad Haibat 29 Oktober 2019, 12:39

Tag HTML tidak perlu jika kondisi php blade.

<button class="btn btn-link p-0 change" type="submit" data-id="{{ $voucher->id }}">
    @if ($voucher->status == 1)
        <i class="fa fa-toggle-on text-success"></i>
    @else
        <i class="fa fa-toggle-off text-muted"></i>
    @endif
</button>
<div id="alert-message"></div>  // add this line
@endrole

Ubah kode ini menjadi kode Anda. file skrip

$(".change").click(function() {
        var id = $(this).data("id");

        var success = '<span class="badge badge-soft-success">' +
            'enable' +
            '</span>';

        var failed = '<span class="badge badge-soft-pink">' +
            'disbale' +
            '</span>';
        $.ajax({
            url: "vouchers/change-status/" + id,
            type: 'put',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'put',
                "_token": "{{ csrf_token() }}",
            },
            success: function() {
                console.log("it Work");
                $('#alert-message').html(success);
                // $("tr#"+id).remove();
            }
        });

        $('#alert-message').html(failed);
    });
0
Aravinth E 29 Oktober 2019, 12:34