1

Mi problema es sencillo, la solución no para mi.

Tengo en mi JS una operación la cual hago:

$(document).ready(function () {
$('.botonEliminar').click(function (e) {

   e.preventDefault();

   var fila = $(this).parents('tr');
   var id = fila.data('id');

   var form = $('#form-delete');

   var url = form.attr('action').replace(':user_id', id);

   var data = form.serialize();

   $.post(url,data, function (respuesta) {
       //alert(respuesta);
       //fila.fadeOut();



       location.reload();

   }). fail(function () {
       alert('No se pudo eliminar el usuario');
   });  }); });

En fin, lo que quiero es que no haga el location.reload(); Por lo tanto, lo que necesito es que el div que hago la validación se refresque sin hacerlo toda la pagina.

$("#container").load("/");

En esa lo que hago es refrescar el DIV pero a la vez me inserta la pagina de inicio la cual solo quiero refrescar ese DIV.

¿Que me aconsejan?

Uso: Laravel 5.3 Jquery 2.1.3

En fin, el Laravel me funciona bien el problema es el DIV y la ejecución mía.

8
  • 1
    Para no tener que refrescar las páginas te recomiendo usar funciones AJAX. Commented el 2 nov. 2016 a las 15:31
  • Bueno en este caso uso Jquery, que es lo que mejor manejo, en ese caso... ¿Que me recomendarías para ese caso?. @Error404
    – Her Asd
    Commented el 2 nov. 2016 a las 15:33
  • AJAX también se basa en Javascript. Creo que desde Javascript y JQuery no se puede. Commented el 2 nov. 2016 a las 15:34
  • ¿Lo recomendable seria congelar la pagina, decir que fue exitosa la operación, la pongo a segundos y luego que refresque? @Error404
    – Her Asd
    Commented el 2 nov. 2016 a las 15:37
  • Nunca se debería de bloquear la página en una ejecución. Por eso te recomendé usar AJAX, porque a la vez que tu puedes seguir navegando por la página, AJAX trabaja en segundo plano. Commented el 2 nov. 2016 a las 15:41

2 respuestas 2

1

Solo remueve la linea del reload; si necesitas mostrar alguna información en el div.

$(document).ready(function () {
$('.botonEliminar').click(function (e) {

   e.preventDefault();

   var fila = $(this).parents('tr');
   var id = fila.data('id');

   var form = $('#form-delete');

   var url = form.attr('action').replace(':user_id', id);

   var data = form.serialize();

   $.post(url,data, function (respuesta) {
       //alert(respuesta);
       //fila.fadeOut();

$("#container").html('<h2>Guardado con éxito</h2>');

   }). fail(function () {
       alert('No se pudo eliminar el usuario');
   });  }); });

si lo que quieres mostrar son los datos, que devuelve el insert, entonces esos datos deben venir en la variable response, preferiblemente en json

2
  • Si tienes razon, pero ya no me funciona de nuevo las acciones como click al refrescar el div... @Aquiles Perez
    – Her Asd
    Commented el 3 nov. 2016 a las 1:34
  • Cual es el fin de tu función? , me imagino que es algo como un botón eliminar, que dependiendo de la respuesta muestre error o una notificación que diga eliminado con éxito, luego de eso ocultar el elemento eliminado o algo asi? Commented el 3 nov. 2016 a las 20:01
1
$(document).ready(function () {
$('.botonEliminar').click(function (e) {
  //bloqueas el boton y evitas hacer submits mientras esta procesando
  $('.botonEliminar').prop('disabled', true);

  e.preventDefault();
  var fila = $(this).parents('tr');
  var id = fila.data('id');
  var form = $('#form-delete');
  var url = form.attr('action').replace(':user_id', id);
  var data = form.serialize();

  $.post(url,data, function (respuesta) {
   // si la respuesta es el texto que quieres mostrar, 
   // si es json o cualquier cosa pues respuesta.mensaje... 
   // Lo que tengas, eso depende de tu tipo de respuesta
   $('#div_respuesta').html(respuesta); 

   // si quieres añadir y no cargarte lo que tiene ese div, 
   // o el elemento que sea, no tiene por que ser div.
   // o bien si recorres un array y quieres mostrar toda la info 
   // de ese array en un div
   $('#div_respuesta_append').append(respuesta);


  }). fail(function () {
    $('#div_respuesta').html("no se pudo modificar el usuario"); 
    // me ahorro un alert
  }).always(function() {
    // vuelvo a poner el boton activo, ya sea success o fail
    $('.botonEliminar').prop('disabled', false);
  });
}); 
});

Prueba a ver

12
  • ¿Si quiero recargar una pagina? Por ejemplo en ella tengo el botonEliminar o el botonActivar, bueno si presiono botonEliminar me refresca el div pero ya no funciona el boton, refresco la pagina y en efecto me funciono pero vuelvo a ejercutar esta vez el activar ahora el desactivar no funciona... @Mikel
    – Her Asd
    Commented el 3 nov. 2016 a las 1:21
  • Explicate mejor, no entiendo que quieres decir. Flujo de eventos?
    – Mikel
    Commented el 3 nov. 2016 a las 10:41
  • A ver, yo recargo el div, en el esta el botonEliminar, y elimina y me recarga correctamente sin actualizar la pagina... Pero ya no funciona de nuevo el boton. @Mikel
    – Her Asd
    Commented el 3 nov. 2016 a las 12:16
  • pero por que no funciona, por que el boton esta dentro del div_respuesta? O se ve todavía gris? o no se ve gris pero no hace nada?. Entiendo que si lo has eliminado ya no puedes eliminarlo de nuevo. A eso me refiero. Si esta dentro del div respuesta, sacalo de ahi, si se queda en gris prueba a poner $('.botonEliminar').prop('disabled', false); en el success para probar, por que, el always debería ejecutarse tanto en el fail como en el success
    – Mikel
    Commented el 3 nov. 2016 a las 12:22
  • El problema es el siguiente: Le doy desactivar y este me desactiva el registro y me refresca el div: imagen1 hay le presiono y me sale esto sin recargar la pagina de forma excelente: [imagen2] (imgur.com/AhYhciE) pero ya no me funciona el resto si le doy activar o a los otros desactivar xd @Mikel1
    – Her Asd
    Commented el 3 nov. 2016 a las 12:33

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.