How to open Modal pop up in JSF 2 using JQuery

by

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

More Related Contents:

  1. How to select JSF components using jQuery?
  2. How to include JavaScript files by h:outputScript? [duplicate]
  3. How to select all images using jquery and give them an width?
  4. Difference between .on(‘click’) vs .click()
  5. Calculating text width
  6. How do you select a particular option in a SELECT element in jQuery?
  7. iframe to Only Show a Certain Part of the Page
  8. Pass array to ajax request in $.ajax() [duplicate]
  9. val() vs. text() for textarea
  10. Animate element transform rotate
  11. jQuery posting valid json in request body
  12. Load external css file like scripts in jquery which is compatible in ie also
  13. Unable to set data attribute using jQuery Data() API
  14. Store JSON object in data attribute in HTML jQuery
  15. Django dependent select
  16. jqgrid showLink
  17. jQuery UI Datepicker – Disable specific days
  18. jQuery .on(‘click’) vs. .click() and .delegate(‘click’)
  19. Bootstrap 3 jquery event for active tab change
  20. jQuery Ajax simple call
  21. A cleaner way to select by multiple possible attribute values?
  22. Populate Select box options on click with Javascript/Jquery with Json data
  23. Modify a svg file using jQuery
  24. How do I reset a jquery-chosen select option with jQuery?
  25. jquery can’t get data attribute value
  26. JSON stringify missing from jQuery 1.4.1?
  27. jQuery countdown timer
  28. Wrap some specified words with span in jQuery?
  29. Twitter Bootstrap Carousel cycle items right to left ( RTL ) reversed
  30. Removing multiple classes (jQuery)

Leave a Comment