Estoy usando Laravel en mi proyecto. Tengo un cupón que mantiene un estado. He usado AJAX para cambiar el estado y el código AJAX funciona con éxito.

Sin embargo, el estado no cambió en mi vista hasta después de actualizar la página. Estoy buscando una manera de resolver este problema.

<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 oct. 2019 a las 15:10

3 respuestas

La mejor respuesta

Puedes probar de esta manera:

Blade

Envuelva su código en algún titular con la clase status-enabled, cuando el estado sea 1. Establezca clases especiales para elementos que serán visibles o no según el estado.

<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

Establecer reglas:

    .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

Cambie la clase de titular cuando haya cambiado correctamente el estado.

$(".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 oct. 2019 a las 13:47

Html Tag sin necesidad de if condición 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

Cambia este código a tu código. archivo de comandos

$(".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 oct. 2019 a las 12:34

Solo en su función de éxito:

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