3

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 based on the outcome of that logic I will have to show a pop up with two commandButton on it. I can can not use any implementation of JSF (like RichFaces, IceFaces), I need to achieve this only using JSF 2 and JQuery. Is it possible? Any ideas or thoughts will be very helpful to me. Oh another thing I need to add the button and the same logic in several pages. I have tried using the SimepleModal plug in but was not successful to come up with a smart approach.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user1220373
  • 383
  • 1
  • 9
  • 19
  • RichFaces and ICEfaces are not JSF implementations. It are JSF component libraries. What exactly is the reason that you need to spend days/weeks to homebrew a couple hundred lines of code to achieve the requirement instead of just using a ready-to-use component of a component library for this? – BalusC Feb 24 '12 at 16:42
  • The reason behind is to build the logic by myself than relying on third party codes. – user1220373 Feb 24 '12 at 16:47
  • It is truly possible, it's only going to be a lot of work. Your question is too open ended to give a suitable answer. All I can suggest is to take a look in source code of the open source component libraries to learn by example. In the meanwhile, I'd rethink if JSF is really the right choice for you: http://stackoverflow.com/questions/4421839/what-is-the-need-of-jsf-when-ui-can-be-achieved-from-css-html-javascript-jquery – BalusC Feb 24 '12 at 16:49

1 Answers1

6

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

Daniel
  • 36,833
  • 10
  • 119
  • 200
  • Is it possible to implement this without ` – Peter Penzov May 18 '12 at 22:43
  • @PeterPenzov you mean like simple js confirm ? http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm , no you can't , (unless you use some third party jquery plugin) - for example http://projectshadowlight.org/jquery-easy-confirm-dialog/ – Daniel May 19 '12 at 12:31
  • Hi i have created same type of dialog box but facing issues https://stackoverflow.com/questions/73222472/dailog-box-get-closes-automatically-after-the-action-call-in-jsf – Dinshaw Raje Aug 03 '22 at 13:21