Initialiser à nouveau jquery après avoir remplacé la liste par un appel ajax

J'ai un module Prestashop pour afficher une liste des derniers produits de différentes catégories de produits. En haut de la liste des produits sont des liens de menu comme: ALL, CATÉGORIE 1, CATÉGORIE 2, CATÉGORIE 3, etc. Lorsque la page s'ouvre, il affiche "Tous" les derniers produits. Mais lorsque je clique sur la catégorie 1 par exemple, il utilise Ajax pour charger uniquement les produits appartenant à la catégorie sur laquelle j'ai cliqué.Initialiser à nouveau jquery après avoir remplacé la liste par un appel ajax

J'ai implémenté ce plugin jquery sur le module - https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/.

Les principaux grid.js de fichier jquery est chargé avant la fin de la </body> et initialize en ajoutant le code ci-dessous avant la fin de la </body> aussi:

<script> 
    $(function() { 
     Grid.init(); 
    }); 
</script>

Cela fonctionne bien lorsque la page est vient d'ouvrir . Mais quand l'un des liens de catégorie est cliqué. Les produits de cette catégorie sont chargés, mais la grille d'expansion de la grille jquery ne fonctionne plus.

Dans le fichier js pour le module chargé dans le <head> de la page, je remarquai que l'appel ajax pour les catégories sont faites avec le code ci-dessous:

$(document).on('click','#list-category-new-product li a',function(e){ 
     $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html()); 
     $('#blocknewproducts1').css('opacity', '0.7'); 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      headers: { "cache-control": "no-cache" }, 
      url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php', 
      async: true, 
      cache: false, 
      dataType : "json", 
      data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'), 
      success: function(jsonData,textStatus,jqXHR) 
      { 
       $('#blocknewproducts1').html(''); 
       $('#blocknewproducts1').html(jsonData.blocknewproduct); 
       $('#blocknewproducts1').css('opacity', '1'); 
      } 
     }); 
    });

Je ne sais pas beaucoup sur jquery donc je me demande comment je peux obtenir l'aperçu en expansion pour travailler lorsque les différentes catégories sont cliquées et les produits chargés via ajax.

Source

2017-02-16 atsngr

<script> 
$(function() { 
     Grid.init(); 
    }); 
</script>

est une fonction, vous avez besoin d'appeler à nouveau dans votre appel de succès comme si

$(document).on('click','#list-category-new-product li a',function(e){ 
     $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html()); 
     $('#blocknewproducts1').css('opacity', '0.7'); 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      headers: { "cache-control": "no-cache" }, 
      url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php', 
      async: true, 
      cache: false, 
      dataType : "json", 
      data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'), 
      success: function(jsonData,textStatus,jqXHR) 
      { 
       $('#blocknewproducts1').html(''); 
       $('#blocknewproducts1').html(jsonData.blocknewproduct); 
       $('#blocknewproducts1').css('opacity', '1'); 
       $(function() { 
        Grid.init(); 
       }); 
      } 
     }); 
    });

Source

2017-02-16 08:39:04

J'ai vraiment essayé cela, mais cela n'a pas fonctionné. Je suppose que c'est parce que le code de l'appel de succès est inclus dans la tête et non avant la fin du corps où le code de prévisualisation en expansion devrait être lieu. J'ai également copié tout le code d'appel de succès à la fin du corps en ajoutant la fonction comme vous l'avez fait ci-dessus mais cela n'a pas fonctionné aussi. – atsngr

Cela peut sembler stupide, mais sera-t-il possible d'insérer le code que vous avez suggéré ci-dessus de telle manière que cet aspect de celui-ci sera seulement tiré à la fin du corps comme le code original? – atsngr

non, les événements dont vous avez besoin de re déclencher doivent être placés dans le rappel de succès du code, vous pouvez essayer d'utiliser une fonction, puis l'appeler –

Initialiser à nouveau jquery après avoir remplacé la liste par un appel ajax

Répondre

Questions connexes