2

Tengo varios inputs que los cargo con un foreach con Razor.

<table class="table">
            @foreach (var item in Model.Municipalities)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(x => item.Name)
                    </td>
                    <td>                            
                        <input class="btn btn-danger" type="button" value="Delete" onclick="SweetAlert(@item.MunicipalityId)" />
                    </td>
                </tr>
            }
        </table>

como pueden ver tiene un evento onclick y necesito que cuando haga success, se borre sin cargar la pagina y esto es lo que tengo pero no me funciona.

function () {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("DeleteMunicipality")',
                    data: { MunicipalityId: id },
                    datatype: "html",
                    //success: function (data) {
                    //    //codigo
                    //}
                    success: function () {
                        swal('Deleted!',
                             'Your imaginary file has been deleted.',
                             'success'
                             );
                        $(this).remove();
                    },
                    error: function () {
                        swal("Oops", "We couldn't connect to the server! or The record can't be delete.(has related records)", "error");
                    }
                });
                return false;
            }
1
  • Creo que el problema es $(this), no es el control que esperas.
    – user227
    Commented el 14 jun. 2016 a las 15:18

4 respuestas 4

1

Tienes que llegar hasta el tag <tr> para eliminar la row

success: function () {
            swal('Deleted!',
                 'Your imaginary file has been deleted.',
                 'success'
                 );
            var tr = $('#'+id).parent().parent();
            tr.remove();
        },

usando el parent() subes al tag anterior a quien lanza el evento que en este caso seria el boton, o deberias asegurar que this sea el boton.

Si la estructura va as er dinamica podrias usar

var tr = $('#'+id).closest('tr');
tr.remove();

jquery .closest()

4
  • Creo que no es buena practica así como lo implementas, porque podría existir muchos mas elementos, osea inputs y no sabria cuantos parent() debería de poner alguna otra opción? para saber cual fue el botón que me lanzo el evento Commented el 14 jun. 2016 a las 15:44
  • base la implementacion al ejemplo que proporcionas, en donde quieres eliminar la row de la tabla, si la estructura va a ser dinamica deberias haberlo mencionarlo Commented el 14 jun. 2016 a las 15:54
  • edite la respuesta y agregue una solucion algo mas de dinamica respecto al selector que usarias para obtener el contenedor que debes remover al presionar el boton Commented el 14 jun. 2016 a las 16:00
  • si amigo, mira abajo mi respuesta ya lo había logrado puse un id en cada <tr/> tu que dices si esta bien hecho? en cuanto a seguridad y buena practica ? Commented el 14 jun. 2016 a las 16:04
1

En el caso que planteas, this (usado dentro de la opción success) se refiere al objeto de la solicitud ajax, no al elemento que activó la solicitud.

Si quieres usar this para referirte al botón en el callback, debes agregarlo en la opción context de $.ajax():

$.ajax({
  // las demás opciones de configuración ...
  context: this,
  success: function(response) {
    // aquí `this` se referirá a lo que esté en `context`
  }
});

Puedes ver más información sobre context en la documentación de ajax de jQuery: http://api.jquery.com/jQuery.ajax/

2
  • Lo implemente así y no me funciono Commented el 14 jun. 2016 a las 16:11
  • Seguramente no definiste el contexto adecuado.
    – Shaz
    Commented el 14 jun. 2016 a las 17:05
0

Lo que puedes hacer es quitar el this y poner un selector tipo css tu success quedaría de esta forma

success: function () {
  swal('Deleted!',
    'Your imaginary file has been deleted.',
    'success'
  );
  $('input[value="Delete"]').remove();
}  

Ya que como lo tienes con el this es como si estuvieras eliminando un elemento de otro fragmento página

2
  • si quieres comprobar que estas eliminando realmente pon un console.log(this) después de tu variable swal.
    – JuankGlezz
    Commented el 14 jun. 2016 a las 15:19
  • Pero si pongo eso me eliminaría todos los inputs del ciclo y solo necesito eliminar al que me ejecute el evento Commented el 14 jun. 2016 a las 15:19
0

Ya lo solucione me toco hacer esto, esta correcto y es buena practica hacerlo?

 <table class="table">
            @foreach (var item in Model.Municipalities)
            {
                <tr id="@item.MunicipalityId">
                    <td>
                        @Html.DisplayFor(x => item.Name)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "EditMunicipality", new { id = item.MunicipalityId }, new { @class = "btn btn-warning" }) |
                        @* @Html.ActionLink("Delete", "DeleteMunicipality", new { id = item.MunicipalityId }, new { @class = "btn btn-danger", onClick = "swal({   title: 'Are you sure?',   text: 'You will not be able to recover this imaginary file!',   type: 'warning',   showCancelButton: true,   confirmButtonColor: '#DD6B55',   confirmButtonText: 'Yes, delete it!',   closeOnConfirm: false }, function(){   swal('Deleted!', 'Your imaginary file has been deleted.', 'success');});" })*@
                        <input class="btn btn-danger" type="button" value="Delete" onclick="SweetAlert(@item.MunicipalityId)" />
                    </td>
                </tr>
            }
        </table>

<script>
    //$('.link1').click(
    function SweetAlert(id) {
        swal({
            title: 'Are you sure?',
            text: 'You will not be able to recover this imaginary file!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, delete it!',
            closeOnConfirm: false
        },
            function () {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("DeleteMunicipality")',
                    data: { MunicipalityId: id },
                    datatype: "html",
                    //success: function (data) {
                    //    //codigo
                    //}
                    success: function () {
                        swal('Deleted!',
                             'Your imaginary file has been deleted.',
                             'success'
                             );
                        $('#'+id).remove();
                    },
                    error: function () {
                        swal("Oops", "We couldn't connect to the server! or The record can't be delete.(has related records)", "error");
                    }
                });
                return false;
            }

        );
    }
</script>

}

7
  • Tal vez no es la mejor práctica, asumo que es 'correcto' según tus estándares, pues funciona bien.
    – Shaz
    Commented el 14 jun. 2016 a las 16:03
  • Shaz Disculpa solo quiero ser amigable ya se para la proxima Commented el 14 jun. 2016 a las 16:05
  • Sabes cual seria la mejor practica, quiero hacerlo de la mejor forma Commented el 14 jun. 2016 a las 16:06
  • en realidad lo correcto seria que uses onclick="SweetAlert(this)" de esta forma le pasas directo el elemento que lanza la accion por parametro Commented el 14 jun. 2016 a las 16:24
  • si pero si observas necesito enviarle un id para poder enviarlo como parámetro al controlador, y como tu respuesta de ahora fue muy buena ya que si! me debo devolver a eliminar todo el <tr /> entonces estaría bien como esta o que otra opción planteas? Commented el 14 jun. 2016 a las 16:36

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.