OpenFaces 3 и IE6 (действия кнопок)

Question

Я использую OpenFaces и должен быть совместим с IE6. До сих пор все работает более или менее без проблем.

Однако я столкнулся с проблемой....

У меня есть несколько кнопок в форме. Сохранить, добавить, экспортировать и удалить. Нажатие на Export прекрасно работает с Firefox и IE8, вызывается exportToCsv() в определенном bean-компоненте, поэтому это должно быть поведение браузера. Нажатие на Export с IE6 вызывает add() в bean-компоненте вместо exportToCsv().

Любая идея?

Заранее спасибо.

Answer 1

<o:commandButton> Компонент отображает <button> тег вместо <input> только если вы указываете содержимое отображаемой кнопки между <o:commandButton> а также </o:commandButton>, Если вам просто нужно отобразить обычный текст, вам не нужно использовать этот подход, и вы можете использовать обычный value атрибут, который приведет к визуализации <input> тег вместо <button>, т.е. использовать:

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

вместо

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

Дело в том, что последняя форма позволяет размещать произвольный HTML и поэтому требует <button> тег.

Answer 2

IE6 имеет ошибки с <button> элемент. Он поддерживает это, но не отправляет значение правильно.

Решение 1: использование <input type='button'> вместо. Возможно, это наиболее очевидное решение, но в зависимости от дизайна вашей страницы это может быть проблемой, поскольку он не поддерживает вложенные элементы <button> делает.

Решение 2. Используйте <button> но инициируйте действия с помощью Javascript (или, скорее, JQuery), а не отправляйте форму напрямую, и используйте метод, такой как наличие скрытого поля, которое заполняется JS, в зависимости от того, какая кнопка нажата, чтобы обеспечить отправку правильных данных.

Answer 3

Это определенно проблема IE6:

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

Время найти обходной путь...

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

Answer 4

Обходной путь при использовании 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 */
}

Модифицированный CSS из этого источника:

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