Action method not called after Javascript modifies selectonemenu
haxwell Dec 27, 2009 3:10 AMI did a cursory search for this issue, but it seems the more search terms I added, the more results I got. Anyway, I had an issue with my Seam project yesterday. In case some lucky soul stumbles across the same issue, (and the appropriate search terms) maybe this will help them.
To reproduce the issue, you need a working project created by Seam-Gen. Then, add a form to the project. Next, add this code to the body of the .xhtml file:
` <script type="text/javascript">
//<![CDATA[
function doTheBug() {
var so = document.getElementById("<SELECTONEMENU_ID>");
var v = document.createElement('option');
v.text = "Test";
v.value = "Test";
so.add(v, null);
var noop = "";
}
// ]]>
</script>
`
-- Replace the <h:form> section with this:
`
<h:form id="form">
<rich:panel>
<f:facet name="header">FORM NAME</f:facet>
<s:decorate id="buggy">
<h:outputLabel id="label" value="Do The Bug" onclick="javascript:doTheBug()"/>
<h:selectOneMenu id="som"></h:selectOneMenu>
</s:decorate>
<div style="clear:both"/>
</rich:panel>
<div class="actionButtons">
<h:commandButton id="BUTTON_ID" value="Hit The Breakpoint" action="#{SESSIONBEAN.ACTIONMETHOD}"/>
</div>
</h:form>
`
In your IDE, set a breakpoint on the Action method that is called on the back end. In Firebug (in your browser), set a breakpoint at the beginning of the Javascript.
Now to see the bug, run this form in your new Seam-Gen app. If you click on the Action button for your form (lower left, named after your form), you will see that the breakpoint in your IDE is reached. Let it run through normally. Now, click on the label that says 'Do The Bug'. It adds an option to your SelectOneMenu. Cool. Now, click on the Action button again. This time, it should not reach your IDE breakpoint. This is because the page, even though refreshing/submitting, is not calling the Action method.
The reason for this is that the SelectOneMenu has no initial Options. The Javascript at |so.add(v, null)| is returning/causing an error which keeps the Action method from being called. If you add the following line,
` <f:selectItem itemLabel="Option 1" itemValue="1"></f:selectItem>
`
so that the h:selectOneMenu definition looks like
` <h:selectOneMenu id="som">
<f:selectItem itemLabel="Option 1" itemValue="1"></f:selectItem>
</h:selectOneMenu>
`
Then re-run that page, you will see that you can run the Javascript, and click the Action button, which will hit your IDE breakpoint as expected.
It caused me a lot of grief figuring out why my Action method was not being called after the Javascript had run. But hopefully, you'll read this and save yourself some when/if it happens to you.
Johnathan
To reproduce the issue, you need a working project created by Seam-Gen. Then, add a form to the project. Next, add this code to the body of the .xhtml file:
` <script type="text/javascript">
//<![CDATA[
function doTheBug() {
var so = document.getElementById("<SELECTONEMENU_ID>");
var v = document.createElement('option');
v.text = "Test";
v.value = "Test";
so.add(v, null);
var noop = "";
}
// ]]>
</script>
`
-- Replace the <h:form> section with this:
`
<h:form id="form">
<rich:panel>
<f:facet name="header">FORM NAME</f:facet>
<s:decorate id="buggy">
<h:outputLabel id="label" value="Do The Bug" onclick="javascript:doTheBug()"/>
<h:selectOneMenu id="som"></h:selectOneMenu>
</s:decorate>
<div style="clear:both"/>
</rich:panel>
<div class="actionButtons">
<h:commandButton id="BUTTON_ID" value="Hit The Breakpoint" action="#{SESSIONBEAN.ACTIONMETHOD}"/>
</div>
</h:form>
`
In your IDE, set a breakpoint on the Action method that is called on the back end. In Firebug (in your browser), set a breakpoint at the beginning of the Javascript.
Now to see the bug, run this form in your new Seam-Gen app. If you click on the Action button for your form (lower left, named after your form), you will see that the breakpoint in your IDE is reached. Let it run through normally. Now, click on the label that says 'Do The Bug'. It adds an option to your SelectOneMenu. Cool. Now, click on the Action button again. This time, it should not reach your IDE breakpoint. This is because the page, even though refreshing/submitting, is not calling the Action method.
The reason for this is that the SelectOneMenu has no initial Options. The Javascript at |so.add(v, null)| is returning/causing an error which keeps the Action method from being called. If you add the following line,
` <f:selectItem itemLabel="Option 1" itemValue="1"></f:selectItem>
`
so that the h:selectOneMenu definition looks like
` <h:selectOneMenu id="som">
<f:selectItem itemLabel="Option 1" itemValue="1"></f:selectItem>
</h:selectOneMenu>
`
Then re-run that page, you will see that you can run the Javascript, and click the Action button, which will hit your IDE breakpoint as expected.
It caused me a lot of grief figuring out why my Action method was not being called after the Javascript had run. But hopefully, you'll read this and save yourself some when/if it happens to you.
Johnathan