Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

commandButton action executed twice #295

Closed
ghost opened this issue Feb 17, 2016 · 5 comments
Closed

commandButton action executed twice #295

ghost opened this issue Feb 17, 2016 · 5 comments
Assignees
Labels
Milestone

Comments

@ghost
Copy link

ghost commented Feb 17, 2016

In BootsFaces 0.8.1, I found an unnormal behaviour on using buttons with icons. Whenever I click on such a button, the method defined in the action attribute is called twice.

Example:

<b:commandButton action="#{myBean.myMethod}" iconAwesome="pencil" />

was rendered to

<button type="submit" id="j_id_17:j_id_18:17:j_id_24" name="j_id_17:j_id_18:17:j_id_24" 
        class="btn btn-default" onclick="return BsF.ajax.cb(this, event);">
<span>
<i id="j_id_17:j_id_18:17:j_id_24" class="fa fa-pencil" 
   onclick="return BsF.ajax.cb(this, event);"></i>
</span>
</button>

First question: why is there an onclick event on the i tag? Surrounding button tag still contains an onclick event, this should be enough.

Nevertheless, firebugging this generated code and removing onclick from i tag doesn't reduce the second method call, I could see that by setting a break point in eclipse.

Also did I find out that the method "myMethod" was called in the "before INVOKE_APPLICATION" phase and also in the "after RENDER_RESPONSE" phase.

When I change it to <h:commandButton ... />, only the "before INVOKE_APPLICATION" phase calls the method. So it could be a bug that in the "after RENDER_RESPONSE" phase myMethod is called.

Maybe it's a relict from ajax, as even on b:commandButton's ajax="false" BsF.ajax.cb is generated to be called. So I think to myself: "Why do you do such things? I'd like to have a h:commandButton with bootstrap design when I use b:commandButton, not a component that works on ajax only." Is there a good reason for that, and how can we fix this to make b:commandButton work again?

Besides, I found a workaround for my case to have a styled commandButton on my own using composite components; whoever has the same problem can use this one and replace all b:commandButton entries in its project. This is my composite component definition for my file commandButton.xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:cc="http://xmlns.jcp.org/jsf/composite"
                xmlns:b="http://bootsfaces.net/ui">
  <cc:interface>
    <cc:attribute name="action" required="true" method-signature="java.lang.String action()" />
    <cc:attribute name="value" required="false" default="" />
    <cc:attribute name="title" required="false" default="" />
    <cc:attribute name="iconAwesome" required="false" default="" />
    <cc:attribute name="iconAlign" required="false" default="left" />
    <cc:attribute name="look" required="false" default="default" />
    <cc:attribute name="styleClass" required="false" default="" />
    <cc:attribute name="immediate" required="false" default="false" />
  </cc:interface>
  <cc:implementation>
    <h:commandLink action="#{cc.attrs.action}" value="" title="#{cc.attrs.title}" 
                   styleClass="btn btn-#{cc.attrs.look} #{cc.attrs.styleClass}" 
                   immediate="#{cc.attrs.immediate}">
      <h:outputText value="#{cc.attrs.value}" 
                    rendered="#{cc.attrs.iconAlign == 'right' and cc.attrs.value != ''}" 
                    style="#{cc.attrs.iconAwesome != '' ? 'margin-right: 8px' : ''}" />
      <b:iconAwesome name="#{cc.attrs.iconAwesome}" rendered="#{cc.attrs.iconAwesome != ''}" />
      <h:outputText value="#{cc.attrs.value}" 
                    rendered="#{cc.attrs.iconAlign == 'left' and cc.attrs.value != ''}" 
                    style="#{cc.attrs.iconAwesome != '' ? 'margin-left: 8px' : ''}" />
    </h:commandLink>
  </cc:implementation>
</ui:composition>

I know that there are many attributes missing, at least the ajax ones, but that's what I intended to do.

Please let me know if this workaround could help anyone just by leaving a note here. Thanks.

@stephanrauh
Copy link
Collaborator

Thank you very much for your very detailed and useful analysis!
I believe we've already found and solved a part of the "called twice" bug in BootsFaces 0.8.2 (see #151 on how to get the current developer snapshot). However, I've missed the onclick handler of the icon. Thank for pointing this out! Probably this particular error is caused by trying to reuse the class rendering icons - but I'll have to check this later.

@stephanrauh stephanrauh added this to the v0.8.2 milestone Feb 18, 2016
@stephanrauh stephanrauh self-assigned this Feb 18, 2016
@XaeroDegreaz
Copy link
Contributor

I seem to remember mentioning the icon issue in this ticket ;)

@ghost
Copy link
Author

ghost commented Feb 19, 2016

This bug seems to be fixed in BootsFaces 0.8.2 on my project as far as I have tested it. Thanks!

@ghost ghost closed this as completed Feb 19, 2016
@stephanrauh
Copy link
Collaborator

@jottyfan You're welcome. Actually, we have to say "thank you", too. For reporting the bug, and for verifying it has been fixed. Thanks!

@ghost
Copy link
Author

ghost commented Feb 22, 2016

Thanks for all the thanks... 👍

@zhedar zhedar mentioned this issue May 7, 2016
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants