OpenFaces 3 and IE6 (Button actions)

I am using OpenFaces and have to be compatible with I开发者_如何转开发E6. Up to now everything works more or less without problems.

However, I've run into a problem....

I've got a few buttons within a form. Save, Add, Export and Delete. Clicking on Export works fine with Firefox and IE8, exportToCsv() in the defined bean is invoked, so it must be a browser behaviour. Clicking on Export with IE6 invokes add() in the bean instead of exportToCsv().

Any idea?

Thank you in advance.

The <o:commandButton> component renders the <button> tag instead of <input> only if you specify the displayed button's content in between <o:commandButton> and </o:commandButton>. If you just need to display plain text, then you don't have to use this approach, and you can use the usual value attribute, which will result in rendering <input> tag instead of <button>, i.e. use:

<o:commandButton value="Submit"... /> 

instead of

<o:commandButton ...>Submit</o:commandButton>

The thing is that the latter form allows placing arbitrary HTML and thus requires the <button> tag.

IE6 has bugs with the <button> element. It does support it, but it doesn't send the value correctly.

Solution 1: Use <input type='button'> instead. This is probably the most obvious solution, but depending on your page design, it may be a problem because it doesn't support nested elements the way <button> does.

Solution 2: Use <button> but trigger the actions via Javascript (or more likely JQuery) rather than submitting the form directly, and use a technique such as having a hidden field that gets populated by JS according to which button is clicked, to ensure that the correct details get submitted.

It's definitively a IE6 problem:

• http://www.vancelucas.com/blog/ie6-and-multiple-button-submit-elements/
• http://www.peterbe.com/plog/button-tag-in-IE

Time to find a workaround...

• http://www.kopz.org/public/documents/css/multiple_buttons_ie_workaround.html

Workaround if using OpenFaces

<o:outputLink styleClass="linkButton" ...>

.linkButton {
    display: block;
    float: left;
    margin: 0 0 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
    padding: 2px 2px 2px 2px; /* Links */
}

Modified CSS from this source:

• http://particletree.com/features/rediscovering-the-button-element