How to open Modal pop up in JSF 2 using JQuery

前端未结

关注

 1  2003

I have a requirement that in my JSF page there will be a commandButton, and on clicking that commandButton it will fire a action method which will perform some logic and bas

相关标签:

1条回答

忘掉有多难

2020-11-30 13:41

Here's a complete working example

I used display:none to hide the h:panelGroup dialog container cause the .dialog function will make it visible when its needed to be

You also can hide the real jsf command buttons and access it through dialog button with jquery # selector and invoke the .click on it like I did in the js file.

One last thing , used onclick="initDialog(); return false;" to call the dialog js function and added return false so the commandbutton wont try to navigate away...

By using the jQuery UI Dialog you will get maximum flexibility/control over your dialogs.

The example consists from 2 file (one .xhtml and one .js) ,

I used jQuery and jQueryUI , no need in any other plugins at all

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>

and scripts.js

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

That's it

0 讨论(0)