JavaScript - Función Onclick para confirmar borrado

 
Vista:
sin imagen de perfil

Función Onclick para confirmar borrado

Publicado por Rodrigo (5 intervenciones) el 13/12/2015 11:02:11
Hola a todos, soy bastante nuevo en programación y me está saltando una duda de la función Onclick. Tengo una tabla en la que tengo unos registros con unos botones para borrar cada uno.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@foreach($tipusuarios as $tipusuario)
	<tr id={{$tipusuario->id}}>
		<td>
			<input type="checkbox" class="icheck-helper">
		</td>
		<td>{{ $tipusuario->id }}</td>
		<td>{{ $tipusuario->tipusuario }}</td>
		<td>
			<button class="btn btn-default btn-sm">
				<span class="fa fa-pencil"></span>
			</button>
			<button href="{{ route('backend.tip-usuarios.destroy', $tipusuario->id) }}" class="btn btn-danger btn-sm" onClick="delete_row({{$tipusuario->id}});">
				<span class="fa fa-times"></span>
			</button>
		</td>
	</tr>
@endforeach

Como veis le mando una ruta al botón que es la que se encarga de borrar el registro seleccionado con el parametro que le enviamos (en este caso el id):

1
href="{{ route('backend.tip-usuarios.destroy', $tipusuario->id) }}"

Despúes ejecuto la función Onclick y le envio la variable del id:

1
onClick="delete_row({{$tipusuario->id}});"

La función delete_row es la siguiente, muestra otro formulario creado por mi con dos botones del cual si apretas Si borra el registro:

1
2
3
4
5
6
7
8
9
10
11
12
13
function delete_row(row){
 
        var box = $("#mb-remove-row");
        box.addClass("open");
 
        box.find(".mb-control-yes").on("click",function(){
            box.removeClass("open");
            $("#"+row).hide("slow",function(){
                $(this).remove();
            });
        });
 
    }

El problema que tengo es que realmente no me lo borra, lo borra de la pantalla pero al recargar la pantalla lo tengo en la base de datos. El metodo del controlador para borrar los datos es el siguiente:

1
2
3
4
5
6
7
public function destroy($id)
    {
        $tipusuario = TipUsuario::find($id);
        $tipusuario->delete();
        Flash::error('!El registro se ha borrado correctamente!');
        return redirect()->route('backend.tip-usuarios.index');
    }

Haber si alguien me puede decir como enviarle los datos o como funciona internamente la función return confirm para hacer una versión que me sirva. Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Función Onclick para confirmar borrado

Publicado por Rodrigo (5 intervenciones) el 13/12/2015 11:51:24
Vale, ahora me funciona el borrado pero no puedo ejecutar la función, he cambiado los <button></button> por <a></a>. Al apretar el botton de eliminar, me abre el formulario y automaticamente me lo cierra y se borra el registro, es decir, no me deja confirmarlo en el formulario. Que puedo hacer?
El formulario es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="message-box animated fadeIn" id="mb-remove-row">
    <div class="mb-container">
        <div class="mb-middle">
            <div class="mb-title"><span class="fa fa-times"></span><strong>&iquest;Borrar Registro?</strong></div>
            <div class="mb-footer">
                <div class="pull-right">
                    <button href="" class="btn btn-success btn-lg mb-control-yes"><span class="fa fa-check btn-margin"></span>Si</button>
                    <button class="btn btn-danger btn-lg mb-control-close"><span class="fa fa-times btn-margin"></span>No</button>
                </div>
            </div>
        </div>
    </div>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Función Onclick para confirmar borrado

Publicado por Jordi (76 intervenciones) el 13/12/2015 12:01:06
Hola Rodrigo,

Primeramente, señalar que Javascript cuenta con una función confirm() que muestra un popup con un "aceptar o cancelar" y que devuelve una variable de tipo booleano según la selección.

1
2
3
4
5
6
if(confirm("¿Desea realizar la acción?")) {
      // Se ha seleccionado "Aceptar"
}
else {
      // Se ha seleccionado "Rechazar"
}

Más info en W3Schools: http://www.w3schools.com/jsref/met_win_confirm.asp


Por otro lado, te recomendaría no utilizar un href, un submit o cualquier otra acción por defecto junto con una acción de tipo onclick. ¿Por qué? Porque nos hacemos un lío. Lo mejor es que si ya se va a ejecutar una función onclick, no poner nada más y asegurarnos de que podemos controlar y tratar todos los posibles casos.

Entonces, el proceso sería el siguiente:

1) Dejar sólo la acción onclick y quitar el href.
2) Dentro del onclick, llamar a una función javascript personalizada para confirmar la acción, pasándole ya el id de fila.
3) Si se acepta, llamar a la función de borrar datos.

1
<button class="btn btn-danger btn-sm" onClick="comprobar({{$tipusuario->id}});"

1
2
3
4
5
6
7
function comprobar(id) {
         var ok = confirm("¿Quiere borrar el registro?");
         if (ok) {
             delete_row(id);    // Se borra la fila del front-end
             destroy(id);    // Se borra la fila del back-end
        }
}

La función delete_row(row) se mantendría declarada tal cuál.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Función Onclick para confirmar borrado

Publicado por Rodrigo (5 intervenciones) el 13/12/2015 13:59:15
Jordi, gracias por tu respuesta pero no creo que me este explicando bien. Cada tabla que tengo va dirigida a una ruta diferente por lo que necesito el href. Ahora mismo lo que consigo hacer es borrar el registro de la fila del botón. Lo que me pasa realmente es como puedo editar gráficamente el mensaje que saca el confirm() así no me lío más en lo demás.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar