Aggiornare il contenuto del sito dopo una chiamata AJAX senza ricaricare la pagina

17 mar 2015, 23:53:37
Visualizzazioni: 44.6K
Voti: 0

Ho creato questa funzione PHP che elimina un prodotto con un ID passato tramite una chiamata AJAX:

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

La mia chiamata AJAX si presenta così:

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

Come potete vedere, eseguo un ricaricamento della pagina con window.location.reload(true); per aggiornare una lista di prodotti sulla pagina (dato che un prodotto è stato appena eliminato).

Esiste un modo semplice per aggiornare il contenuto della pagina senza dover ricaricare la pagina?

Una delle soluzioni a cui ho pensato sarebbe quella di modificare lo script PHP in modo che utilizzi l'output buffering:

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();
}

Non sono sicuro che questo sia l'approccio corretto. Apprezzerei il vostro consiglio.

5
Commenti

Se i tuoi prodotti hanno degli ID, puoi targettarli. Quello che faccio di solito è creare ID come id="product-[id]" dove [id] è l'ID del post. Poi puoi rimuovere l'elemento con il tuo JS.

kel kel
18 mar 2015 00:26:32

Sì, c'è un modo semplice, utilizzando AJAX. In breve, potresti semplicemente sostituire il contenuto del contenitore della lista prodotti dopo l'eliminazione via AJAX con lo stato aggiornato di quella lista, non è necessario ricaricare la pagina. Oppure puoi eliminare l'elemento della lista come suggerito da @kel.

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

entrambe le soluzioni sopra sono valide. $('#product_container').replaceWith(response) è come potresti implementare il suggerimento di @ialocin.

Steven Steven
18 mar 2015 02:08:09

@shahar $('#product_container').replaceWith(response) funzionerebbe solo se la risposta fosse il codice HTML aggiornato per quella parte della pagina. Lo script a cui la mia richiesta AJAX invia la richiesta non restituisce alcun markup. Esegue solo un'eliminazione. Dovrò progettare lo script in modo che restituisca il markup aggiornato, oppure optare per il metodo di @kel.

luqo33 luqo33
21 mar 2015 16:55:44

Naturalmente, stavo solo illustrando come potrebbe essere implementato il suggerimento di @ialocin.

Steven Steven
21 mar 2015 20:33:41
Tutte le risposte alla domanda 1
1

Dovresti usare l'ID del prodotto come nome della classe nel tuo HTML e poi potresti fare:

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

Se hai dei conteggi nella pagina, dovrai gestire anche quelli. Inoltre, se hai una paginazione che non è generata tramite qualche framework JavaScript, la soluzione migliore è continuare a ricaricare la pagina quando necessario.

18 mar 2015 08:27:43
Commenti

Questo farà sicuramente al caso nostro. Grazie per il suggerimento.

luqo33 luqo33
21 mar 2015 16:52:45