0

Tengo el siguiente código que su función es eliminar registros, y lo hace. Pero el registro sigue mostrándose hasta que manualmente actualizo la página, no lo hace ajax. El error que me muestra es el siguiente: ReferenceError: toastr is not defined

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
              <a class="nav-link" id="v-pills-2016-tab" data-toggle="pill" href="#v-pills-2016" role="tab" aria-controls="v-pills-2016" aria-selected="true">2016</a>
              <a class="nav-link" id="v-pills-2017-tab" data-toggle="pill" href="#v-pills-2017" role="tab" aria-controls="v-pills-2017" aria-selected="false">2017</a>
              <a class="nav-link" id="v-pills-2018-tab" data-toggle="pill" href="#v-pills-2018" role="tab" aria-controls="v-pills-2018" aria-selected="false">2018</a>
              <a class="nav-link" id="v-pills-2019-tab" data-toggle="pill" href="#v-pills-2019" role="tab" aria-controls="v-pills-2019" aria-selected="false">2019</a>
              <a class="nav-link active" id="v-pills-2020-tab" data-toggle="pill" href="#v-pills-2020" role="tab" aria-controls="v-pills-2020" aria-selected="false">2020</a>
            </div>
          </div>

          <div class="tab-content col-lg-10" id="v-pills-tabContent">

            <div class="tab-pane fade pl-5" id="v-pills-2016" role="tabpanel" aria-labelledby="v-pills-2016-tab">

            </div>

            <div class="tab-pane fade pl-5" id="v-pills-2017" role="tabpanel" aria-labelledby="v-pills-2017-tab">

              <div id="main">
                @foreach($photos as $photo)
                  @if($photo->year == '2017')
                  <div class="box">
                    <div class="pic">
                      <div class="item{{$photo->id}}">
                        <img class="img-fluid" src="{{ asset($photo->dir . $photo->filename . '.' .$photo->extension) }}" alt="">
                        <button class="delete-button delete-modal btn btn-danger" data-id="{{$photo->id}}" data-title="{{$photo->title}}">
                          <i class="fas fa-times-circle"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  @endif
                @endforeach
              </div>

            </div>

            <div class="tab-pane fade pl-5" id="v-pills-2018" role="tabpanel" aria-labelledby="v-pills-2018-tab">

            </div>

            <div class="tab-pane fade pl-5" id="v-pills-2019" role="tabpanel" aria-labelledby="v-pills-2019-tab">

            </div>

            <div class="tab-pane fade show active pl-5" id="v-pills-2020" role="tabpanel" aria-labelledby="v-pills-2020-tab">



            </div>

          </div>
        </div>           
      </div>

  </div>
</div>

<!-- Modal form to delete a form -->
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">
    <h5 class="text-center">Confirme que quiere eliminar la fotografía</h5>
      <div class="form-group">
        <label class="control-label col-sm-2" for="id">ID:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="id_delete" disabled>
        </div>
      </div>
      <div class="modal-footer col-lg-12">
      <button type="button" class="btn btn-danger delete" data-dismiss="modal">
        Sí
      </button>
      <button type="button" class="btn btn-warning" data-dismiss="modal">
        No
      </button>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).on('click', '.delete-modal', function() {
    $('.modal-title').text('Delete');
    $('#id_delete').val($(this).data('id'));
    $('#deleteModal').modal('show');
    id = $('#id_delete').val();
});
$('.modal-footer').on('click', '.delete', function() {
    $.ajax({
        type: 'DELETE',
        url: 'photos/' + id,
        data: {
            '_token': $('input[name=_token]').val(),
        },
        success: function(data) {
            console.log(data);
            toastr.success('Successfully deleted Post!', 'Success Alert', {timeOut: 5000});
            $('.item' + data['id']).remove();
            $('.col1').each(function (index) {
                $(this).html(index+1);
            });
        }
    });
});

public function destroy($id)
{
    $delete = Photo::find($id);

    $delete->delete();

    return response()->json($delete);
}

Errores:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

2
  • Abre developer tools (si usas chrome) y ve al apartado que te muestra las url que carga. Haz click en el icono/botón rojo y reintenta. Luego ahi mismo busca la dirección que cargó y revisa los detalles que te salieron y los anexas a tu pregunta.
    – PAGANA
    Commented el 23 may. 2020 a las 4:20
  • Buenos días, ya los agregué.
    – Joe
    Commented el 23 may. 2020 a las 11:51

1 respuesta 1

1

Intenta incluyendo estos archivos:

  <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.