jQuery Girl
  1. jQuery Girl
  3. Comment supprimer un élément ajouté après un appel AJAX dans jQuery?
Intereting Posts
json – Jquery retourne undefined pour plusieurs valeurs dans un appel ajax Afficher une DIV uniquement la première fois qu’un site Web est chargé avec localStorage scripts en bas dans mvc 4 – N’exécute pas dans la page Afficher Est-il possible de créer un arrière-plan de type grid en CSS sans images ni tableaux? Erreur jQuery ASP.NET: Méthode Web inconnue Pourquoi la hauteur en pourcentage ne fonctionne-t-elle pas sur ma div? recharger un PHP inclure ou exiger Jenkins json api REST avec demande CORS utilisant jQuery Obtenir le premier et le dernier élément visible dans un div à défilement Définissez la valeur par défaut dans la liste déroulante à l’aide de jQuery Passage d’une variable d’une boucle while à une requête JQuery Detect Scroll at Bottom Utilisation de jQuery pour définir la taille d’une nouvelle fenêtre Générateur de requêtes SQL simple dans JQuery Erreur jQuery (tinyMCE n’est pas définie) sur le panneau d’administration WordPress

Comment supprimer un élément ajouté après un appel AJAX dans jQuery?

J’essaie de supprimer un élément HTML ajouté à ma page au retour d’un appel AJAX. Mais jQuery ne semble pas au courant de ces éléments ajoutés dynamicment. Des solutions?

Contexte :

  • Je construis un panier d’achat simpliste.
  • Lorsque l’utilisateur clique sur le bouton “Ajouter”, j’ajoute l’élément dans la firebase database ET je souhaite l’afficher à l’écran sans recharger la page.
  • Mais étant donné que l’utilisateur peut cliquer sur “Ajouter” plusieurs fois pour le même article lors d’une session d’achat, chaque fois qu’il clique dessus, je souhaite supprimer les lignes de cet article du panier DIV et ne conserver que la plus récente pour cet article. .

Pour l’instant, cela ne fonctionne pas, donc mon HTML ressemble à ceci après plusieurs ajouts:

Mon jQuery ressemble à ceci: 

 function AddToCartClicked() { item_code = $("#ItemCode").val(); qty = $("#Qty").val(); $.ajax ( { type: "POST", url: "/_res/php/add-item.php", dataType: "text", data: "puid=123&code=" + item_code + "&qty=" + qty, success: function(data) { // PROBLEM: First, remove any existing line with this ID $("#Item_" + item_code).remove(); // Write new line newLine = "
" + item_code + "
"; // Add the line in the HTML $("#CartList").prepend(newLine); } } ); return true; }

J’ai cherché dans les forums et je n’ai pas trouvé de réponse à ma question. De plus, je suis nouvelle dans ce domaine, alors supposez que vous êtes stupide. Merci.

Merci pour votre aide les gars, ça m’a vraiment aidé à déboguer ça!

En fin de compte, le problème était que certains codes d’article comportaient un point (“shirt235.b”) et que jQuery avait un problème pour extraire le point si le point n’était pas échappé ( dans la FAQ ).

Je suis vraiment désolé d’avoir utilisé un exemple fictif pour plus de simplicité, pensant que le paramètre item_code importait peu … J’ai appris ma leçon et je ne posterai plus que du code du monde réel! S’il vous plaît accepter mes excuses et merci pour votre compréhension.

Passe une bonne semaine!

Je pense que val () ne fonctionne que pour les éléments de formulaire, vous ne recevez donc pas de retour valide lorsque vous l’appelez sur un élément de paragraphe; Ainsi, votre sélecteur ne sélectionne rien.

Pour le débogage, essayez de générer le résultat val () (variable item_code) et de voir également la longueur de la longueur du sélecteur.

Cela ressemble à cela devrait fonctionner dans la plupart des cas, mais en dessous il pourrait y avoir la condition de concurrence suivante:

Imaginons que si l’utilisateur clique sur append deux fois, le navigateur reçoit et exécute les deux fonctions de rappel en parallèle.

Les callbacks ne sont pas atomiques, ils pourraient tous les deux avoir terminé la fonction “remove” avant que l’un d’eux n’exécute la fonction “prepend”. Dans ce cas, vous auriez deux doublons ajoutés.

Une solution pourrait être d’utiliser une queue ajax ou d’utiliser une variable pour simuler un «verrou».

Un peu novice aussi, mais plusieurs identifiants identiques sont mauvais. Essayez d’utiliser .attr (‘data-id’, item_code) pour le sélecteur ou créez des identifiants uniques.