Dans mon application MVC, je suis confronté à un problème très étrange avec les dialogs jQuery. J’utilise un dialog à plusieurs niveaux pour cette application; Dans la boîte de dialog de premier niveau, jqGrid affiche les enregistrements et fournit une colonne de lien permettant de manipuler les enregistrements dans la boîte de dialog de deuxième niveau.
Une boîte de dialog contenant un petit formulaire pour manipuler des données peut être ouverte à l’aide de link column from jqGrid. Il existe un problème de pré-remplissage de ces données de formulaire lorsque le lien est cliqué; & qui se produit sur un intervalle de temps aléatoire. Lorsque j’ouvre ce formulaire pour éditer un enregistrement de jqGrid, les données préremplies proviennent d’enregistrements précédemment ouverts. Ensuite, si vous fermez cette boîte de dialog et essayez d’ouvrir le même enregistrement pour le modifier une deuxième fois, les données préremplies correctes seront affichées. Et une fois que ce problème survient, il continue d’exister jusqu’à ce que nous actualisions la page de base dans le navigateur. Si je vérifie la réponse reçue avec l’appel ajax en cours pour charger des données sous forme de boîte de dialog à l’aide de firebug; Je vois que les données renvoyées par le serveur sont correctes, mais que les données affichées dans le formulaire sont incorrectes et proviennent d’un enregistrement précédemment ouvert de jqGrid. Vous pouvez voir ceci dans la capture d’écran ci-dessous
Voir la capture d’écran ci-dessous
Dans la grid située derrière la boîte de dialog la plus haute, la dernière colonne ayant une icône d’édition est la colonne de lien permettant d’ouvrir la boîte de dialog supérieure contenant le formulaire avec le problème. cette colonne contient également les données [Date ou texte] qui seront envoyées au formulaire ouvert en tant que paramètre à modifier. comme on peut le voir sur l’image, le deuxième enregistrement sélectionné dans la grid a pour date le 26/11/2013 et la réponse html que j’ai obtenue à partir d’une demande ajax générée en cliquant sur le lien correspondant est conforme à la fonctionnalité . Mais la boîte de dialog ouverte montre la date du premier enregistrement qui a été édité précédemment avant l’édition en cours.
C’est une sorte de problème de mise en cache des données; J’ai essayé d’inclure les méta-tags suivants sur les vues respectives des 1er et 2ème niveaux de popup
par lequel je pensais que le problème était résolu; mais ça n’a pas été le cas. Selon mon observation, il vient de réduire la fréquence d’occurrence de cette question Pas sûr
J’espère que cette description est suffisamment claire pour comprendre le problème.
Il est difficile de trouver la raison du problème décrit sans regarder dans le code ni déboguer le problème. Alors j’essaie juste de deviner.
Tout d’abord, je vous recommande vivement d’utiliser toujours l’option recreateForm: true
de l’édition de formulaire. Sans utiliser l’option jqGrid, masquer la boîte de dialog Modifier lors de la fermeture et l’afficher lors de la prochaine édition. jqGrid remplit les champs du formulaire, mais en cas d’utilisation de recreateForm recreateForm: true
jqGrid recrée la boîte de dialog d’édition complète à chaque fois.
Le prochain problème possible pourrait être les doublons d’identifiant sur la page. jqGrid set atsortingbut id
sur chaque ligne jqGrid et sur chaque colonne du formulaire d’édition. Si vous avez plus d’une grid sur la page, vous pouvez utiliser les identifiants natifs de la firebase database. Le problème est que les identifiants natifs de la table de firebase database sont uniques uniquement à l’intérieur d’une table. Si vous affichez des informations provenant de tables différentes, les identifiants peuvent être identiques. Un autre exemple consiste à afficher une grid avec des informations basées sur la seconde grid avec des informations détaillées. Dans le cas où le même identifiant pourrait être utilisé deux fois aussi. Je vous recommande donc d’utiliser l’option idPrefix
dans chaque grid. Par exemple, si vous utilisez idPrefix: "a"
dans une grid et idPrefix: "b"
dans une autre grid, l’id 1
renvoyé par le serveur sera atsortingbué à rowid "a1"
dans la première grid et à rowid "b1"
dans le répertoire. deuxième grid. Si les résultats de l’édition des lignes sont renvoyés au serveur, le préfixe id sera coupé et le serveur verra l’ id=1
original id=1
.
Une autre origine possible des doublons d’identifiant se trouve dans les champs du formulaire d’édition. L’identifiant du champ du formulaire d’édition utilise l’identifiant identique au nom de la colonne. Ainsi, si vous avez plusieurs grids en une sur la page avec la même propriété de name
dans les deux grids, vous pouvez avoir des doublons d’identifiant. Donc, la recommandation: utiliser des atsortingbuts de name
uniques pour toutes les grids. Si vous utilisez repeatitems: false
(champs nommés dans les données d’entrée), vous pouvez utiliser la propriété jsonmap
de jqGrid qui correspond aux champs des données d’entrée JSON et utiliser n’importe quelle valeur de name
libre des colonnes de la grid. De la même manière, vous pouvez facilement construire des grids ayant un name
unique dans colModel
. J’espère que vous comprenez la construction que je suggère.
Je vous recommande tout d’abord d’essayer d’utiliser recreateForm: true
option recreateForm: true
append la ligne
$.extend($.jgrid.edit, {recreateForm: true});
au début de votre code. Il définira la valeur par défaut pour recreateForm
sur true
. Après cela, vous devriez répéter vos tests.
Le réglage de recreateForm: true
ne idPrefix
pas le problème. Vous pouvez inclure idPrefix
avec une valeur unique ( "a"
, "b"
, "c"
, … ou "g1_"
, "g2_"
, "g3_"
, … ). Après cela, vous devriez répéter vos tests. En colModel
un name
unique à colModel
vous ne pouvez le faire à la dernière étape que si les étapes précédentes ont échoué.