Actualizar el contenido del sitio después de una llamada AJAX sin recargar la página

17 mar 2015, 23:53:37
Vistas: 44.6K
Votos: 0

He creado esta función PHP que elimina un producto con un id pasado por una llamada AJAX:

function deleteSelectedProduct() 
{
   if ( isset($_POST['productToDelete']) && ! empty($_POST['productToDelete']) ) {
     $postId=$_POST['productToDelete'];
     wp_delete_post($postId);
    }
   die();
}

Mi llamada AJAX se ve así:

    $.ajax({
        data: sampleData,
        type: 'POST',
        url: AjaxObject.ss_ajax_url,
        success: function(msg) {
            window.location.reload(true);
        }               
    });

Como pueden ver, realizo una recarga de página con window.location.reload(true); para actualizar una lista de productos en una página (ya que un producto acaba de ser eliminado).

¿Hay alguna manera directa de actualizar el contenido de la página sin necesidad de recargarla?

Una de las soluciones que pensé sería modificar los scripts PHP para que utilicen buffer de salida:

function deleteSelectedProduct() 
{
   if ( isset($_POST['productToDelete']) && ! empty($_POST['productToDelete']) ) {
     $postId=$_POST['productToDelete'];
     wp_delete_post($postId);
    }

   ob_start();
   include 'some_page.php';
   $response = ob_clean();
   echo $response;
   die();
}

No estoy seguro si este es el camino a seguir. Agradecería su consejo.

5
Comentarios

Si tus productos tienen ID's entonces puedes apuntar a ellos. Lo que normalmente hago es crear ID's como id="product-[id]" donde [id] es el ID del post. Luego puedes eliminar el elemento con tu JS.

kel kel
18 mar 2015 00:26:32

Sí, hay una forma directa, es usando AJAX. En resumen, podrías reemplazar el contenido del contenedor de la lista de productos después de la eliminación mediante AJAX con el estado actualizado de esa lista, no es necesario recargar la página. O eliminas el elemento de la lista como sugirió @kel.

Nicolai Grossherr Nicolai Grossherr
18 mar 2015 00:55:35

ambas soluciones anteriores son buenas. $('#product_container').replaceWith(response) es como podrías implementar la sugerencia de @ialocin.

Steven Steven
18 mar 2015 02:08:09

@shahar $('#product_container').replaceWith(response) solo funcionaría si la respuesta fuera el HTML actualizado para esa parte de la página. El script al que mi AJAX envía la solicitud no devuelve ningún marcado. Solo realiza una eliminación. Necesitaré diseñar el script para que devuelva el marcado actualizado, o seguir el método de @kel.

luqo33 luqo33
21 mar 2015 16:55:44

Por supuesto, solo estaba ilustrando cómo se podría implementar la sugerencia de @ialocin.

Steven Steven
21 mar 2015 20:33:41
Todas las respuestas a la pregunta 1
1

Necesitarías usar el ID del producto como nombre de clase en tu HTML y luego podrías hacer:

$.ajax({
    data: sampleData,
    type: 'POST',
    url: AjaxObject.ss_ajax_url,
    success: function(msg) {
        $( '.product-' + sampleData.productToDelete ).remove();
    }               
});

Si tienes contadores en la página, también necesitarías resolver eso. Además, si tienes paginación que no está generada mediante algún framework de JavaScript, tu mejor opción sería seguir recargando la página según sea necesario.

18 mar 2015 08:27:43
Comentarios

Esto definitivamente hará el trabajo. Gracias por esta sugerencia.

luqo33 luqo33
21 mar 2015 16:52:45