Pourquoi la dom est-elle désynchronisée après l'appel et l'actualisation de jquery ajax?

Question

J'ai une table qui utilise l'édition en ligne avec ajax pour modifier les champs. La table est triée par nom de famille.

Si je change un nom de famille afin que l'ordre des lignes soit modifié et que j'effectue une actualisation de la page, la table est réorganisée mais le champ que j'ai modifié a la valeur précédente dans la dom. Le champ de saisie a la valeur correcte dans le HTML mais la valeur dom est affichée.

Un rafraîchissement dur, bien sûr, affiche toutes les valeurs correctes.

Pourquoi mon DOM n'est-il pas synchronisé? Comment puis-je obtenir l'actualisation pour afficher la valeur correcte?

---

Modifier après les réponses

Il était Firefox en conservant la valeur précédente pour les champs d'entrée. Après avoir farfouillé sur le web, j'ai trouvé que l'ajout de <form autocomplete="off"> forcera Firefox à pas à de mettre en cache l'ancienne valeur.

Answer 1

Il est presque certain que votre navigateur retiendra les valeurs de formulaire lors de l'actualisation. Est-il possible pour vous de l'organiser de sorte qu'à l'actualisation, le déclencheur que vous utilisez pour mettre à jour le DOM à partir du champ de saisie est à nouveau déclenché?

Difficile de donner plus de détails sans savoir comment votre DOM et vos champs de saisie interagissent dans le code.

Answer 2

Je pense que le navigateur met en cache les valeurs précédentes pour le champ de formulaire (qui suce). Ce qui est vraiment frustrant, c'est que si je change plusieurs éléments, il est presque impossible de déterminer si l'attribut value est correct ou si le texte dans le champ est correct (puisqu'il peut aller dans les deux sens).

Je suis vraiment surpris que vous utilisiez ajax mais vous n'avez pas de bouton de tri automatique/rafraîchissement automatique. À court terme, vous devez utiliser des tables triées pour éviter que les utilisateurs ne se sentent confus s'ils sont sur la page.

À long terme, vous devriez aller avec une solution que je travaille sur un problème similaire ...

Demandez aux données stockées (ajax au serveur, serveur stocke il dans DB), la table a toujours les champs de valeur côté serveur de la base de données, et au chargement de la page, un script js qui boucle tous les éléments d'entrée et définit manuellement la valeur du champ de l'attribut value, quelque chose comme:

$("table :input").each(
    $(this).value($(this.attr("value"))); 
);