Mise à jour du contenu du site après un appel AJAX sans rechargement de page

Question

Mise à jour du contenu du site après un appel AJAX sans rechargement de page

0

38458 2015-03-17

J'ai créé cettefonction PHP qui supprime unproduit avec unidentifiantpassépar un appel AJAX:

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

Mon appel AJAX ressemble à ceci:

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

Comme vouspouvez le voir,j'effectue un rechargement depage avec window.location.reload(true); afin de rafraîchir une liste deproduits sur unepage (puisqu'unproduit vient d'être supprimé) .

Existe-t-il unmoyen simple demettre àjour le contenu de lapage sans recharger lapage?

Une des solutions auxquellesj'aipensé serait demodifier les scripts PHP afin qu'ils utilisent lamiseen mémoiretampon de sortie:

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

Jene saispas si c'est la voie à suivre. J'apprécierais vos conseils.

I've created this PHP function that deletes a product with an id passed by an AJAX call:

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

My AJAX call looks like this:

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

As you can see, I perform a page reload with window.location.reload(true); in order to refresh a list of products on a page (since a product has just been deleted).

Is there a straightforward way to update the page's content without a page reload?

One of the solutions I thought about would be amending the PHP scrips so that it uses 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();
}

I am not sure if this is the way to go. I would appreciate your advice.

- Si vosproduits ont desidentifiants,vouspouvez les cibler.Ce queje faisnormalement,c'est créer desidentifiants comme `id="product- [id] "` où [id]est l'identifiant de l'article.Ensuite,vouspouvez supprimer l'élément avec votre JS.
  
  If you're products have ID's then you can target them. What I normally do is create ID's that like `id="product-[id]"` where [id] is the post ID. Then you can remove the element with your JS.
  - 0
  - 2015-03-17
  - kel
- Oui,ilexiste unmoyen simple,il utilise AJAX.Enbref,vouspouvez simplement remplacer le contenu du conteneur de la liste deproduits après la suppression via AJAXpar l'état àjour de cette liste,pasbesoin de recharger lapage.Ou vous supprimez l'élément de liste comme @kel suggéré.
  
  Yes, there is a straightforward way, it is using AJAX. In short, you could just replace the product list container content after deletion via AJAX with the up-to-date state of that list, no need to reload the page. Or you delete the list element like @kel suggested.
  - 0
  - 2015-03-17
  - Nicolai
- les deux solutions ci-dessus sontbonnes.$ ('#product_container'). replaceWith (réponse)est comment vouspouvezfaire la suggestion de @ialocin.
  
  both solutions above are good. $('#product_container').replaceWith(response) is how you could do @ialocin's suggestion.
  - 0
  - 2015-03-18
  - Steven
- @shahar `$ ('#product_container'). replaceWith (response)`ne fonctionnerait que si la réponse était le HTMLmis àjourpour cettepartie de lapage.Le script auquelmon AJAXenvoie une requêtene renvoie aucunbalisage.Iln'effectue qu'une suppression.J'auraibesoin de concevoir le scriptpour qu'il renvoie lebalisagemis àjour ou d'utiliser laméthode de @ kel.
  
  @shahar `$('#product_container').replaceWith(response)` would only work if the response was the updated HTML for that part of the page. The script to which my AJAX sends a request does not return any markup. It performs only a deletion. I will need to design the script so that it returns the updated markup, or go with @kel's method.
  - 1
  - 2015-03-21
  - luqo33
- Bien sûr,je voulaisjusteillustrer comment la suggestion de @ialocinpouvait être réalisée.
  
  Of course, I was just illustrating how @ialocin's suggestion could be done.
  - 1
  - 2015-03-21
  - Steven

1 réponses

votes

DiverseAndRemote.com · Accepted Answer · 2015-03-18

0

2015-03-18

Vous devrez utiliser l'identifiant duproduit commenom de classe dans votre html,puis vouspourriezfaire:

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

Si vous avez des comptes sur lapage,vous devez également le comprendre.Deplus,si vous avez unepagination quin'estpasgénérée via unframeworkjavascript,lemieuxest de simplement continuer à recharger lapage sinécessaire.

You would need to use the product id as a classname in your html and then you could do:

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

If you have any counts on the page you would need to figure that out as well. Also if you have pagination thats not generated via some javascript framework then your best bet is to just continue reloading the page as needed.

Celafera certainement letravail.Mercipour cette suggestion.

This will definitely do the job. Thanks for this suggestion.
- 0
- 2015-03-21
- luqo33