Actualizarea conținutului site-ului după un apel AJAX fără reîncărcarea paginii

17 mar. 2015, 23:53:37
Vizualizări: 44.6K
Voturi: 0

Am creat această funcție PHP care șterge un produs cu un id transmis printr-un apel AJAX:

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

Apelul meu AJAX arată astfel:

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

După cum puteți vedea, execut o reîncărcare a paginii cu window.location.reload(true); pentru a reîmprospăta o listă de produse pe o pagină (deoarece un produs tocmai a fost șters).

Există o modalitate simplă de a actualiza conținutul paginii fără o reîncărcare a acesteia?

Una dintre soluțiile la care m-am gândit ar fi modificarea scriptului PHP astfel încât să utilizeze 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();
}

Nu sunt sigur dacă aceasta este calea de urmat. Aș aprecia sfatul vostru.

5
Comentarii

Dacă produsele tale au ID-uri, atunci le poți țintii. Ceea ce fac eu în mod normal este să creez ID-uri de genul id="product-[id]" unde [id] este ID-ul postării. Apoi poți elimina elementul cu JavaScript-ul tău.

kel kel
18 mar. 2015 00:26:32

Da, există o metodă simplă, folosind AJAX. Pe scurt, poți înlocui conținutul containerului cu lista de produse după ștergere prin AJAX cu starea actualizată a acelei liste, fără a fi nevoie să reîncarci pagina. Sau poți șterge elementul din listă cum a sugerat @kel.

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

ambele soluții de mai sus sunt bune. $('#product_container').replaceWith(response) este modul în care ai putea implementa sugestia lui @ialocin.

Steven Steven
18 mar. 2015 02:08:09

@shahar $('#product_container').replaceWith(response) ar funcționa doar dacă răspunsul ar fi HTML-ul actualizat pentru acea parte a paginii. Scriptul căruia trimit o cerere AJAX nu returnează niciun markup. Efectuează doar o ștergere. Va trebui să proiectez scriptul astfel încât să returneze markup-ul actualizat, sau să merg pe metoda lui @kel.

luqo33 luqo33
21 mar. 2015 16:55:44

Desigur, doar ilustram cum s-ar putea face sugestia lui @ialocin.

Steven Steven
21 mar. 2015 20:33:41
Toate răspunsurile la întrebare 1
1

Va trebui să utilizați ID-ul produsului ca nume de clasă în HTML-ul vostru și apoi puteți face:

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

Dacă aveți numărătoare pe pagină, va trebui să vă ocupați și de aceasta. De asemenea, dacă aveți paginare care nu este generată printr-un framework JavaScript, cea mai bună soluție este să continuați să reîncărcați pagina după necesități.

18 mar. 2015 08:27:43
Comentarii

Acest lucru va face cu siguranță treaba. Mulțumesc pentru această sugestie.

luqo33 luqo33
21 mar. 2015 16:52:45