Как открыть модальное всплывающее окно в JSF 2 с помощью JQuery - PullRequest
Новая
       1

Как открыть модальное всплывающее окно в JSF 2 с помощью JQuery

3 голосов
/ 24 февраля 2012

У меня есть требование, чтобы на моей странице JSF была команда commandButton, и при нажатии этой кнопки command она запускает метод действия, который будет выполнять некоторую логику, и в зависимости от результата этой логики мне придется показывать всплывающее окно. с двумя командными кнопками на нем. Я не могу использовать любую реализацию JSF (например, RichFaces, IceFaces), мне нужно добиться этого только с помощью JSF 2 и JQuery. Является ли это возможным? Любые идеи или мысли будут очень полезны для меня. О, еще одна вещь, мне нужно добавить кнопку и ту же логику на нескольких страницах. Я пытался использовать плагин SimepleModal, но не смог придумать разумный подход.

1 Ответ

4 голосов
/ 25 февраля 2012

Вот полный рабочий пример

Я использовал display:none, чтобы скрыть контейнер диалога h:panelGroup, потому что функция .dialog сделает его видимым, когда его нужно будет

Вы также можете скрыть настоящие командные кнопки jsf и получить к ним доступ через диалоговую кнопку с селектором jquery # и вызвать .click на нее, как я сделал в файле js.

И последнее: использовал onclick="initDialog(); return false;" для вызова диалоговой функции js и добавил return false, чтобы командная кнопка не пыталась уйти ...

Используя JQuery UI Dialog, вы получите максимальную гибкость и контроль над своими диалогами.

Пример состоит из 2 файлов (один .xhtml и один .js),

Я использовал jQuery и jQueryUI, никаких других плагинов вообще не нужно

index.xhtml 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
    <h:head>
        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script language="javascript" src="scripts.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    </h:head>
    <h:body>
        <h:panelGroup id="idOfDialogPlaceHolder" style="display:none">
            <h:form prependId="false">
                <h:outputText value="Some Text"></h:outputText>
                <h:commandButton id="justAButton" onclick="alert('wow')" style="display:none"></h:commandButton>
            </h:form>
        </h:panelGroup>
        <h:form prependId="false">
               <h:commandButton id="dialogClickBtn" value="Click to display dialog" onclick="initDialog(); return false;"></h:commandButton>
        </h:form>

    </h:body>
</f:view>
</html>

и scripts.js 

function initDialog() {
 $("#idOfDialogPlaceHolder").dialog({
     modal: true,
     buttons: {
            SomeButton: function () {
                $("#justAButton").click();
            },
            Close: function () {
                $(this).dialog("close");
            }
     },
 });
}

Вот и все

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...