Командная кнопка внутри окна jQuery SimpleModal не вызывает действия - PullRequest
Новая
       1

Командная кнопка внутри окна jQuery SimpleModal не вызывает действия

0 голосов
/ 20 февраля 2012

Я создал раздел DIV на своей странице следующим образом: 

<div id="modalAlert" style="display: none;">
 <h:panelGroup layout="block">
   <p>My Heading </p>
   </h:panelGroup>
   <h:panelGroup layout="block">
   </h:panelGroup><h:panelGroup layout="block">
   <h:commandButton id="btnSaveConfirmation" value="save" action="#{myBean.method}"> </h:commandButton>                    
  </h:panelGroup>                           
</div>

И я использую следующий скрипт JS для отображения окна SimpleModal с помощью jQuery: 

function showAlert() {
    fundpickerdialog = $('#modalAlert').modal({
        opacity : 100,
        overlayCss: {backgroundColor:"#fff"},
        modal : true,
        dataId : 'modalAlert',
        classname: 'ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable',
        closeOnEscape : false, 
        width : 50,
        height : 50
    }); 
}

$(document).ready(function() {

        showAlert();
    }   

});

Появляется модальное окно, но при нажатии кнопки «Сохранить» оно не вызывает метод вспомогательного компонента.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2012

Некоторые подходы модального диалога JavaScript / jQuery удаляют элемент, представляющий модальное диалоговое окно и все его дочерние элементы, из его текущей позиции в дереве HTML DOM и повторно вставляют его как непосредственный дочерний элемент <body>, чтобы предотвратить потенциальноепроблемы позиционирования и расслоения в разных браузерах.Поскольку вы не поместили <form> внутри элемента, представляющего модальное диалоговое окно, в конечном итоге он не будет иметь формы.

Вам действительно нужно поместить <h:form> внутри элемента, представляющего модальное диалоговое окно.

Кроме того, я рекомендую использовать библиотеку компонентов JSF вместо произвольного jQueryплагин.Например, PrimeFaces имеет компонент <p:dialog> именно для этой цели.Он уже учел для вас потенциальные неприятные побочные эффекты, связанные с JSF, без необходимости писать дополнительную строку кода JS / jQuery.

0 голосов
/ 20 февраля 2012

Вы забыли теги формы (h: commandButton должен находиться внутри формы), оберните содержимое div тегами

, попробуйте что-то вроде этого: 

<div id="modalAlert" style="display: none;">
 <h:form>
  <h:panelGroup layout="block">
  <p>My Heading </p>
  </h:panelGroup>
  <h:panelGroup layout="block">
  </h:panelGroup><h:panelGroup layout="block">
  <h:commandButton id="btnSaveConfirmation" value="save" action="#{myBean.method}"></h:commandButton>                  
  </h:panelGroup> 
 </h:form>                          
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...