After several attempts, I have been able to consistently reproduce
this problem. It appears that this is an issue with the ajaxSubmit in
the form plugin and only in firefox (latest version), IE 7 does not
seem to have this issue.
The issue occurs in firefox only; when a page with multiple forms is
refreshed (by hitting F5 or ctrl-r) the body of the form and the form
header get unsynchronized. But after clicking on the reset button for
each form it gets rectified.
On IE 7 the refresh did not cause any issue anytime.
I tried after removing the ajaxSubmit and the problem did not occur in
firefox or IE.
I have these lines which I think is the cause of the problem:
submitHandler: function(form) {
$(form).ajaxSubmit({
target: 'body',
error: function (xhr) {
$('.derror').text("Errors: Please fix " +
xhr.statustext).show("fast");
}
It could be that I am doing something wrong, but that does not explain
the inconsistent behavior between the 2 browsers. It was this block of
text that I had to remove to make my forms work even after a refresh.
Thanks,
Anoop
On Jul 24, 11:01 am, Anoop kumar V <anoopkum...@gmail.com> wrote:
> Attached an html - that shows my situation...
>
> In the page - clicking on any region opens the pop-up form, and once in a
> while after you submit the pop-ups are mixed up, you see Newyork details for
> the Washington tab etc. But as soon as I click on the reset button, it
> rectifies itself...
>
> Can somebody please help a bit? I am not able to understand / explain why
> this happens - I do not have a lot of javascript / jquery code, just the 2
> functions...
>
> Should I call reset for all forms after I submit? If so can someone please
> show / hint at how that can be achieved?
>
> Thanks,
> Anoop
>
> On Fri, Jul 24, 2009 at 2:09 AM, Anoop kumar V <anoopkum...@gmail.com>wrote:
>
> > 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
>
>
>
> jqtest.html
> 8KViewDownload
