jQuery对话框显示来自先前ajax请求的数据

Question

In my MVC application I am facing very strange issue with jquery dialogs. I am using multilevel dialog for this application; wherein at 1st level dialog there will be jqGrid displaying records & provides link column to manipulate records in 2nd level dialog.

A dialog containing small form to manipulate data can be opened by using link column from jqGrid. There is an issue with pre-populating this form data when the link is clicked; & which occurs on random time interval. When I open this form for editing any record from jqGrid the data pre-populated is from previously opened record for editing. Then if close this dialog & try to open same record for editing 2nd time it will show me correct pre-populated data. And once this problem occurs then after this continues to exist till we refresh base page in browser. If I check response received with the current ajax call for loading data in dialog form using firebug; I see that data returned fro server is correct but data displayed in form is wrong which is from previously opened record of jqGrid. You can see this in screenshot below

see the screenshot below

In the grid behind the topmost dialog the last column having edit icon is the link column to open the top dialog having the form with issue. this column contains the data as well [May be date or text] which will be send to opened form as parameter for editing. as can be seen in the picture the 2nd record selected in grid is having date as 11/26/2013 & html response I got from ajax request generated by clicking respective link is as per the functionality . But the opened dialog is showing the date of first record which was edited previously before current editing.

This is a kind of data caching problem; I have tried including following meta tag on the respective 1st & 2nd level popup views

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

by which I thought the the problem was resolved; but it didn't. As per my observation It has just reduced frequency of occurance of this issue Not sure

I hope this description is clear enough to understand the issue.

Answer 1

It's difficult to find the reason of the described problem without looking into the code and without debugging of the problem. So I try just guess.

First of all I strictly recommend you to use always recreateForm: true option of form editing. Without usage of the option jqGrid hide Edit dialog on closing and show it back on the next editing. jqGrid refills the fields of the form, but in case of usage of recreateForm: true jqGrid recreate the full editing dialog every time.

The next possible problem could be id duplicates on the page. jqGrid set id attribute on every jqGrid row and on every column of editing form. If you have more as one grid on the page it's possible that you use native ids from the database. The problem is that native id from the database table are unique only inside of one table. If you display information from different tables ids can be the same. One more example is displaying a grid with based information ad the second grid with details information. In the case the same id could be used twice too. So I recommend you to use idPrefix option in every grid. For example if you use idPrefix: "a" in one grid and idPrefix: "b" in another grid then the id 1 returned from the server will be assigned as rowid "a1" in the first grid and as rowid "b1" in the second grid. If the results of row editing will be send back to the server the id prefix will be cut and the server will see the original id=1 .

One more possible origin of id duplicates are in the fields of editing form. The id of the field of the editing form uses id the same as the column name. So if you have more as one grids on the page with the same name property in both grids you could have id duplicates. So the recommendation: use unique name attributes for all grids. If you use repeatitems: false (named fields in the input data) then you can use jsonmap property of jqGrid which corresponds to the fields of JSON input data and use any free name value of columns in the grid. In the way you can easy construct grids having unique name in colModel . I hope that you understand the construct which I suggest.

I recommend you first of all to try to use recreateForm: true option adding the line

$.extend($.jgrid.edit, {recreateForm: true});

at the beginning of your code. It will set default value for recreateForm to true . After that you should repeat your tests.

It setting of recreateForm: true will not fix the problem you can include idPrefix with unique value ( "a" , "b" , "c" , ... or "g1_" , "g2_" , "g3_" , ...). After that you should repeat your tests. Making unique name in colModel you can make at the last step only if previous steps failed.