[TAPESTRY-2070] EventListener on checkbox components within a @For loop - Issues

• Type: Bug
• Status: Resolved
• Priority: Critical
• Resolution: Fixed
• Affects Version/s: 4.1.3
• Fix Version/s: 4.1.5
• Component/s: Annotations
• Environment: Tapestry 4.1.3
• Assignee: Jesse Kuhnert
• Reporter: kanthimathinathan
• Created: 21/Jan/08 21:43
• Updated: 30/Jan/08 22:39
• Resolved: 30/Jan/08 22:39

Description

I want to enable / disable a button on clicking a checkbox in the screen. i am trying the below code Snippet

HTML template code snippet

<tr jwcid="@For" source="ognl:lists" index="ognl:listIndex" value="ognl:listData">
<td align="left">
<form jwcid="@Form" style="margin:0px;padding:0px;">
<span jwcid="checkbox@Checkbox" id="ognl:listIndex" value="ognl:checkedList[listIndex]" />
</form>
</td>
</tr>

Java code snippet

@EventListener(events = "onclick", targets =

{"checkbox"}

)
public void updateComponents(IRequestCycle cycle, BrowserEvent event)

{ cycle.getResponseBuilder().updateComponent("button1"); }

Issue 1: Eventlistener is not called for last checkbox and so button is not enabled / disabled as expected.

Issue 2: on clicking 2nd or subsequent checkboxes in the UI screen, Button is enabled/disabled as expected. However AJAX requests sent is equivalent to the no of checkboxes(or rows) in the screen, which cause performance issues.

Note : On clicking 1st checkbox, buttons are enabled/disabled as expected with just 1 Ajax request.

please help me to resolve these issues.

Thanks,
Kanthi.

Additional Information - Added on 24th January 2008

Problem is with DOJO java scripts generated by tapestry 4.1.3. I have pasted the dojo code snippet generated. For the 4th checkbox, forms of checkbox 1- 4 are submittted asynchronously. Please let me know how this could be resolved

<script type="text/javascript"><!--
dojo.addOnLoad(function(e) {
dojo.require("tapestry.form");
tapestry.form.registerForm("Form");
tapestry.form.registerForm("Form_0");

tapestry.cleanConnect(dojo.byId("checkbox0"),
"onclick", "formEvent2009464232");
tapestry.formEvent2009464232=function(e){
var content=

{beventname:"onclick", bcomponentid:"checkbox"}

;
tapestry.event.buildEventProperties(e, content, arguments);
if (!content["beventtarget.id"])

{ content["beventtarget.id"]="checkbox0"; }

var validateState=tapestry.form.forms["Form_0"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0", validateForm);

tapestry.form.submitAsync("Form_0", content);

tapestry.form.setFormValidating("Form_0", validateState);

};
dojo.event.connect(dojo.byId("checkbox0"), "onclick",
tapestry, "formEvent2009464232");
tapestry.form.registerForm("Form_0_0");
tapestry.cleanConnect(dojo.byId("checkbox1"),
"onclick", "formEvent1811198999");
tapestry.formEvent1811198999=function(e){
var content=

{beventname:"onclick", bcomponentid:"checkbox"}

;
tapestry.event.buildEventProperties(e, content, arguments);
if (!content["beventtarget.id"])

{ content["beventtarget.id"]="checkbox1"; }

var validateState=tapestry.form.forms["Form_0"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0", validateForm);

tapestry.form.submitAsync("Form_0", content);

tapestry.form.setFormValidating("Form_0", validateState);

};
dojo.event.connect(dojo.byId("checkbox1"), "onclick",
tapestry, "formEvent1811198999");
tapestry.form.registerForm("Form_0_1");
tapestry.cleanConnect(dojo.byId("checkbox2"),
"onclick", "formEvent1811198999");
tapestry.formEvent1811198999=function(e){
var content=

{beventname:"onclick", bcomponentid:"checkbox"}

;
tapestry.event.buildEventProperties(e, content, arguments);
if (!content["beventtarget.id"])

{ content["beventtarget.id"]="checkbox2"; }

var validateState=tapestry.form.forms["Form_0"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0", validateForm);

tapestry.form.submitAsync("Form_0", content);

tapestry.form.setFormValidating("Form_0", validateState);

var validateState=tapestry.form.forms["Form_0_0"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0_0", validateForm);

tapestry.form.submitAsync("Form_0_0", content);

tapestry.form.setFormValidating("Form_0_0", validateState);

};
dojo.event.connect(dojo.byId("checkbox2"), "onclick",
tapestry, "formEvent1811198999");
tapestry.form.registerForm("Form_0_2");
tapestry.cleanConnect(dojo.byId("checkbox3"),
"onclick", "formEvent1811198999");
tapestry.formEvent1811198999=function(e){
var content=

{beventname:"onclick", bcomponentid:"checkbox"}

;
tapestry.event.buildEventProperties(e, content, arguments);
if (!content["beventtarget.id"])

{ content["beventtarget.id"]="checkbox3"; }

var validateState=tapestry.form.forms["Form_0"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0", validateForm);

tapestry.form.submitAsync("Form_0", content);

tapestry.form.setFormValidating("Form_0", validateState);

var validateState=tapestry.form.forms["Form_0_0"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0_0", validateForm);

tapestry.form.submitAsync("Form_0_0", content);

tapestry.form.setFormValidating("Form_0_0", validateState);

var validateState=tapestry.form.forms["Form_0_1"].validateForm;
var validateForm=false;
tapestry.form.setFormValidating("Form_0_1", validateForm);

tapestry.form.submitAsync("Form_0_1", content);

tapestry.form.setFormValidating("Form_0_1", validateState);

};
dojo.event.connect(dojo.byId("checkbox3"), "onclick",
tapestry, "formEvent1811198999");
tapestry.form.focusField('checkbox0');});
// --></script></body>

<script>

Issue Links

• duplicates: TAPESTRY-2092 EventListener in components that get included more than once in a page aren't triggered