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
>
Washington (WAS)
close
New York (NY)
close
New Region
close
