How to implement JQuery confirm dialog with JSF

Question

I want to use JQuery dialog when I press a button into JSF page in order to confirm action execution(in my case to confirm the deletion of rows). I found this JQuery code working perfectly:

<html>
    <head>
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });

                // Tabs
                $('#tabs').tabs();


                // Dialog           
                $('#dialog').dialog({
                    autoOpen: false,
                    width: 600,
                    buttons: {
                        "Ok": function() { 
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    }
                });

                // Dialog Link
                $('#dialog_link').click(function(){
                    $('#dialog').dialog('open');
                    return false;
                });

                // Datepicker
                $('#datepicker').datepicker({
                    inline: true
                });

                // Slider
                $('#slider').slider({
                    range: true,
                    values: [17, 67]
                });

                // Progressbar
                $("#progressbar").progressbar({
                    value: 20 
                });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });
        </script>
        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>    
    </head>
    <body>

        <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
        <h2 class="demoHeaders">Dialog</h2>
        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>

        <!-- ui-dialog -->
        <div id="dialog" title="Dialog Title">
            <p>Dialog Test</p>
        </div>

    </body>
</html>

The problem is that I need to call the dialog from this button into Java Server Faces page:

<h:commandButton value="Delete" action="#{bean.deleteid}" >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

Would you help me please to implement this example?

score 4 · Accepted Answer · edited May 23 '17 at 12:09

Here an approach that I use

You need two buttons

first one will be hidden and will be called as a result of clicking Yes in the confirm dialog, this hidden button will be the one that will call the server side method and will do the render using the f:ajax

<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteid}" style="display:none">
    <f:ajax render="@form" ></f:ajax>
</h:commandButton>

now to the button that will open the dialog, this button will also submit the form to the server with execute="@form" (in case you have selection column for example)

<h:commandButton value="Delete">
    <f:ajax execute="@form" onevent="openDialogFunc()"></f:ajax>
</h:commandButton>

now to the implementation of the js function

function openDialogFunc(data){
    if (data.status === 'success') {
        $('#dialog').dialog({
             autoOpen: false,
             width: 600,
             buttons: {
                 "Ok": function() { 
                     $("#myHiddenButtonID").click();
                     $(this).dialog("close"); 
                 }, 
                 "Cancel": function() { 
                     $(this).dialog("close"); 
                 } 
             }
         });
    }
}

Notice that only upon clicking the OK dialog button there will be an execution of your hidden button $("#myHiddenButtonID").click(); otherwise nothing will happen...

But I really strongly recommend you to use h:head instead of head and <h:panelGroup instead of div ... look at my previous example... jQuery Dialog in JSF

Thank you for the answer. Are you sure that there is no other possible solution directly to call the ajax without using the hidden button? — user1285928, May 21 '12 at 19:45
INMO you really better do it this way, the other option is to write some js code that will simulate the same thing that the `f:ajax` do... I haven't seen "imitations of f:ajax with js more than once or twice" so the hidden button is the Best and Safe solution... — Daniel, May 21 '12 at 20:01
I'm just interested how this can be implemented. Would you show me a quick code snippet? — user1285928, May 21 '12 at 20:11
google for jsf.ajax.request https://www.google.com/search?q=jsf.ajax.request&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a , but looking at the following related issues (cause of trying to use it) http://stackoverflow.com/questions/9912735/using-jsf-ajax-request-from-javascript-to-do-ajax-calls-in-jsf-2-0 you can look at the comments that recommend to use f:ajax ... — Daniel, May 21 '12 at 20:16

mprabhat · Answer 2 · 2012-05-19T17:11:51.550

3

If you have to call it say on click of commandbutton then use onclick event

<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return myjavascriptmethod">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

then in the dialog you can check the condition for confirmation, on click of Okay dispatch the event.

Edit As per comment:

when you dont want to use a div, I just used a panel Grid, you can do something like this:

xhtml

<h:panelGrid id="panelGridAsDialogTest" style="display:none;">
        <h:outputLabel value="I Am a dialog test" />
    </h:panelGrid>
var alreadyValidated = false;
function testJQueryDialog(buttonReference){
    if(!alreadyValidated) {                
    $('#panelGridAsDialogTest').dialog({
            autoOpen: true,
            width: 600,
            buttons: {
                "Ok": function(event) { 
                    $(this).dialog("close"); 
                    alreadyValidated = true;
                    jQuery(buttonReference).trigger("click");
                }, 
                "Cancel": function(event) { 
                    event.preventDefault();
                    $(this).dialog("close"); 
                } 
           }
       });
    }
    return alreadyValidated;
}

If you want to stick to div but make your code work you can just use the same javascript given above, and replace the id with div id.

edited May 19 '12 at 17:11

answered May 18 '12 at 17:03

mprabhat

20,107
7
46
63

I added the `onclick` attribute and it works. But no matter what I click the button code is executed. How I have to edit the code in order to stop exaction? – user1285928 May 18 '12 at 17:11
On click of "No" in your dialog add event.preventDefault() that will resolve your issue – mprabhat May 18 '12 at 17:16
so in your case your cancel code will look like this : "Cancel": function(event) { $(this).dialog("close"); event.preventDefault(); } } – mprabhat May 18 '12 at 17:30
It's not working. Right after I press the button the row is deleted. The dialog is not preventing the deletion of the row. – user1285928 May 18 '12 at 18:29
However there is one more important problem that I want to ask: How I can remove this div `

Dialog Test

` and pass the content of the dialog via the `onclick="return myjavascriptmethod"`? Now if I remove the div the dialog will not work. – user1285928 May 18 '12 at 18:35

score 2 · Answer 3 · answered Jul 07 '13 at 14:15

A much simpler approach would be to not use a jquery dailog for confirmation message, just use normal javascript confirm box in the onclick, no need to reinvent the wheel:

<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return confirm('Are you sure you want to delete this?')">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

You must add return otherwise jsf will ignore what the user chose from the confirmation box, so if the user say clicks cancel the delete function will still be executed.

How to implement JQuery confirm dialog with JSF

3 Answers3

Linked