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*******************************
<div class="cbdd">
<form class="cbnav" action="user/region.jsp" method="post">
<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>
<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>
<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>
</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">
<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">
<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">
<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*******************************
****************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
