[jQuery] Form values getting unsynchronized after ajaxsubmit [validate]

Hi All,
I have a very weird issue that I have been trying to resolve for over a week now with no success in sight.
I use jsp to generate a page of regional information. The regions are displayed as clickable blocks. On clicking each block a pop-up form opens up with the corresponding region details like id, name and acronym. These can be edited and submitted as updates. There is also a last block that allows to create a new region which on clicking opens the same kind of form as the others, except all the fields are blank and required.
I am using jquery validator plugin (bassistance) to ensure that the user does not leave any field blank and I also use the form plugin to do an ajaxsubmit, so that the id enterred is not a duplicate id.
On submitting the new region form, a new region gets created and updates the page fine, but intermittently when I click on the other existing blocks the information shown in the pop-up is for a completely different region: for example when I click on a block labelled Washington, the popup that comes up shows New York, NY, 02. On clicking New York block, the same (correct) information is show. This does not happen always and I have noticed it happening only in firefox, I use firefox more often also. Also if I take out the ajaxsubmit and do a simple form submit, it seems to not occur, but I need the ajaxsubmit for the id validation..
Interestingly, when I click on the reset button on the individual form, the values in the fields correct themselves automagically for that form..
I also used firebug, and when I mouseover the field in the firebug console, the values in the fields are shown correct (in forebug), except the page displays the incorrect info. I think this safely eliminates my java code as the culprit... Again - when I reset the particular form, the values are good, but only for that form, so if I want to clean all such incorrect data, I will have to open each form pop-up on the page and click on the reset button - this would not work even as a workaround.
Below is the code if it helps:
*************** JS*******************************
$(function() {
var bbap = function() {
 $('.cbnav').live('click',function(event) {
 var target = $(event.target);
 if(($(target).is(".main-title")) || ($(target).is(".cls")))
 {
 $('.details').hide();
 if($(target).is(".main-title"))
 $(target).next('.details').show(450);
 } else if ($(target).is('input[type=reset]')){
 $('.derrors').hide();
 $('.errors').hide();
 }
 });
}
bbap();
});
var v = $(function() {
 $('.main-title').click(function(event) {
 var target = $(event.target);
 var parent = $(target).parent();
 $(parent).validate({
 rules: {
 regionid: "required",
 regionname: "required",
 regionacronym: "required",
 regioncode: "required"
 },
 submitHandler: function(form) {
 $(form).ajaxSubmit({
 target: 'body',
 error: function (xhr) {
 $('.derror').text("Errors: Please fix " + xhr.responseText).show("fast");
 }
 });
 return false;
 }
 });
 });
});
$('input[type=reset]').click(function() {
 $('.derrors').hideErrors()
});
*************** /JS*******************************
*************** HTML*******************************
<pre id="line210"><div class="cbdd">

<form class="cbnav" action="user/region.jsp" method="post">
</pre><pre id="line225"> <div class='main-title'>Washington (WAS)</div>
<div class="details">
<div class="cls">close </div>
<div class="form-class">
<label>Id</label>
<input type="text" name="regionid" value="01" size="2" readonly="readonly"/>
</div>
</pre><pre id="line232"> <div class="form-class">
<label>Acronym</label>
<input type="text" name="regionacronym" value="WAS" size="3"/>
</div>
<div class="form-class">
<label>Name</label>
<input type="text" name="regionname" value="Washington" size="20"/>
</div>
</pre><pre id="line240"> <div class="form-class">
<label>Code</label>
<input type="text" name ="regioncode" value="M00" size="2"/>
</div>
<div class="btn">
<input type="submit" value="Submit"/>
<input type="reset" name="resetButton" value="Reset" />
</div>
</pre><pre id="line248"> </div>
</form>

<form class="cbnav" action="user/region.jsp" method="post">
<div class='main-title'>New York (NY)</div>
<div class="details">
<div class="cls">close </div>
<div class="form-class">
</pre><pre id="line257"> <label>Id</label>
<input type="text" name="regionid" value="01" size="2" readonly="readonly"/>
</div>
<div class="form-class">
<label>Acronym</label>
<input type="text" name="regionacronym" value="NY" size="3"/>
</div>
<div class="form-class">
</pre>
<pre id="line265"> <label>Name</label>
<input type="text" name="regionname" value="New York" size="20"/>
</div>
<div class="form-class">
<label>Code</label>
<input type="text" name ="regioncode" value="NY" size="2"/>
</div>
<div class="btn">
</pre>
<pre id="line273"> <input type="submit" value="Submit"/>
<input type="reset" name="resetButton" value="Reset" />
</div>
</div>
</form>

<form class="cbnav" action="user/region.jsp">
<div class='main-title'>New Region</div>
<div class="details">
<div class="cls">close </div>
<span class="derror"></span>
<input type="hidden" name="create" value="1"/>
<div class="form-class">
<label>Id</label>
<input type="text" name="regionid" size="2"/>
</div>
<div class="form-class">
<label>Acronym</label>
<input type="text" name="regionacronym" size="3"/>
</div>
<div class="form-class">
<label>Name</label>
<input type="text" name="regionname" size="20"/>
</div>
<div class="form-class">
<label>Code</label>
<input type="text" name="regioncode" size="3"/>
</div>
<div class="btn">
<input type="submit" value="Submit"/>
<input type="reset" name="resetButton" value="Clear" />
</div>
</div>
</form>
</div>
*************** /HTML*******************************
</pre>****************CSS*********************
.cbdd {
 background-color: ghostwhite;
 border:1px solid darkblue;
 display: block;
 margin: 1em;
 padding: 1em;
 overflow:auto;
}
.cbnav {
 width: 18em;
 float: left;
 margin: .5em .5em .5em .5em;
 text-align: left;
}
.main-title {
 font: normal small-caps bold 1.35em/170% "Lucida Grande",sans-serif;
 padding: 0 .25em 0 1em;
 color: #888;
 background: #003399;
 cursor: pointer;
}
.main-title:hover {
 color: #fff;
 background: #0A42AF;
}
.cbnav .details {
 border-top: 1px solid red;
 margin-top: 1px;
 background: ivory;
 display: none;
 position: absolute;
 width: 20em;
 border: 1px solid #888;
 border-top: 2px solid #a00;
}
.cls {
 background: #fff url(../images/close.gif) no-repeat right bottom;
 clear: both;
 cursor: pointer;
 color: darkgray;
 font: normal small-caps bold 1em/100% "Lucida Grande",sans-serif;
 text-align: right;
 padding-right: 12px;
 margin: 2px 3px 0 0;
 float:right;
}
.cls:hover {
 background: #fff url(../images/close_hover.gif) no-repeat right bottom;
 color: #000;
}
.form-class {
 margin-top: 5px;
 width: 30em;
 text-align: left;
 padding: 0em .1em;
}
.form-class label {
 float: left;
 width: 5em;
 font: normal small-caps bold 1.25em/100% "Lucida Grande",sans-serif;
}
***************************/CSS***************** 
Thanks for any help,
Anoop

Topic Participants
anoopkumarv

[jQuery] Form values getting unsynchronized after ajaxsubmit [validate]

[jQuery] Form values getting unsynchronized after ajaxsubmit [validate]

Topic Participants

anoopkumarv