jQuery UI Clasificable: ¿Revierte los cambios si la devolución de llamada de actualización hace que una llamada AJAX falle?

Estoy usando el widget ordenable para reordenar una lista de artículos. Después de que un elemento se arrastra a una nueva ubicación, inicio una publicación de formulario AJAX en el servidor para guardar la nueva orden. ¿Cómo puedo deshacer la clasificación (por ejemplo, devolver el elemento de arrastre a su posición original en la lista) si recibo un mensaje de error del servidor?jQuery UI Clasificable: ¿Revierte los cambios si la devolución de llamada de actualización hace que una llamada AJAX falle?

Básicamente, solo quiero que el reordenamiento se "admita" si el servidor confirma que se guardaron los cambios.

Fuente

2010-04-23 Seth Petry-Johnson

Estoy bastante seguro de que sortable no tiene ninguna función para deshacer la última gota, ¡pero es una gran idea!

Mientras tanto, creo que su mejor opción es escribir algún tipo de start que almacene el pedido, y luego en caso de falla llamar a una función de revertir. Es decir. algo como esto:

$("list-container").sortable({ 
    start: function() { 
      /* stash current order of sorted elements in an array */ 
     }, 
    update: function() { 
      /* ajax call; on failure, re-order based on the stashed order */ 
     } 
});

Me encantaría saber si otros tienen una mejor respuesta, sin embargo.

Fuente

2010-04-23 16:39:15 brahn

Acabo de clonar todo el ordenable inicialmente en la carga de la página y rellenarlo en una variable para su custodia. En ajax save success, reemplace la variable de clonación con la última clasificación (clonar de nuevo). En caso de error, reemplazo el ordenable con el clon (y lo reinicio como un ordenable). Parece que está funcionando bien hasta ahora ... – Ryan

¿Podría publicar esto como respuesta para que pueda ser votado? :) –

intente lo siguiente:

$(this).sortable('cancel');

Fuente

2010-11-18 15:11:37 thyphus

Esto funcionó para mí, aunque estaba publicando una actualización a la vez. – Joe

ajax suele ser asincrónico, por lo tanto, para que esto realmente funcione, deberá esperar/dormir en el método ordenable beforeStop para la solicitud de ajax, tal vez configurando async como falso en la solicitud de jquery. – Ryan

@Ryan He usado '$ elem.sortable ('cancelar')' a _undo_ UI sorting si el back-end no pudo mantener los cambios y simplemente funcionó. Parece que 'cancelar' deshace la ** última modificación ** de la disposición de los elementos, no importa cuánto tiempo haya pasado (a menos que uno actualice la página o algo así). –

simplemente me encontré con este mismo tema, y en aras de una respuesta completa, que quería compartir mi solución a este problema:

$('.list').sortable({ 
    items:'.list:not(.loading)', 
    start: function(event,ui) { 
    var element = $(ui.item[0]); 
    element.data('lastParent', element.parent()); 
    }, 
    update: function(event,ui) { 
    var element = $(ui.item[0]); 
    if (element.hasClass('loading')) return; 
    element.addClass('loading'); 
    $.ajax({ 
     url:'/ajax', 
     context:element, 
     complete:function(xhr,status) { 
     $(this).removeClass('loading'); 
     if (xhr.status != 200) { 
      $($(this).data('lastParent')).append(this); 
     } 
     }, 
    }); 
    } 
});

Usted' Necesitaré modificarlo para que se adapte a su base de código, pero esta es una solución segura de múltiples subprocesos que funciona muy bien para mí.

Fuente

2012-02-27 06:11:48

¡Gracias! me ayudó mucho! –

¡Gracias! Gran pedazo de código. Plug 'n play! :) – gabn88

jQuery UI Clasificable: ¿Revierte los cambios si la devolución de llamada de actualización hace que una llamada AJAX falle?

Respuesta

Cuestiones relacionadas