JQuery dialog in JSF page

Question

I want to implement question dialog in JSF page. Simply explained I want the user to confirm (Yes or No) before he deletes a row into JSF table. I tried to implement this JavaScript dialog but something is wrong.

function questiondialog(){
    $('#dialog').dialog({
        autoOpen: false,
        width: 600,
        buttons: {
            "Yes": function() { 
                $(this).dialog("close"); 
            }, 
            "No": function() { 
                $(this).dialog("close"); 
            } 
        }
    }); 
}  


<h:commandButton value="Delete" action="#{beam.deleterow}"
                    onclick="questiondialog()"  >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

When I click the button there is not dialog.

EDIT After spending half a day in cutting the code slice by slice I found the problem: This is the code that is working:

<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>

I turns out that I need also div layer to display the dialog. How I can use this code with this AJAX JSF button?

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

try onclick="questiondialog(); return false;" – Daniel May 17 '12 at 14:45 — Daniel, May 17 '12 at 14:45

score 3 · Answer 1 · answered May 17 '12 at 14:40

Change autoOpen: false to autoOpen: true.

The jQuery-UI-Dialog documentation (http://jqueryui.com/demos/dialog/) clearly says,

When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.

score 2 · Answer 2 · edited May 23 '17 at 12:07

2

add

$('#dialog').dialog('open');

before

$('#dialog').dialog({....

INMO you better remove the autoOpen at all

Also know that you can't do confirm dialog like this... I mean if you want to stop the workflow with open dialog and continue it or discard it you should change your dialog Yes and No buttons behavior... but that's a diff question...

In short : you should open dialog from a button (but don't use that button action to delete row, instead execute another hidden button click with jquery , and that button will be the one with action attribute set to call bean method that deletes the row...) cause opening a dialog from mouse click is differnt than call js built in confirm function , cause the confirm function stop the workflow , while opening a dialog does not...

take a look at this complete example of jQuery dialogs + JSF2

EDIT

<h:commandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
    <f:ajax render="@form" execute="@form" oneven="function(data){if(data.status==='success'){openDialogFunc();}}"></f:ajax>
</h:commandButton>

edited May 23 '17 at 12:07

Community

1
1

answered May 17 '12 at 14:43

Daniel

36,833
10
119
200

1

I think that the OP definitely needs to remove the autoOpen:false. The documentation says that when autoOpen is set to false, the dialog will not be displayed until there is a subsequent call to $.dialog('open') – Vivian River May 17 '12 at 14:56
The problem is somewhere else. I added all the JS code into the JSF page and CSS code but the dialog is not opening. – user1285928 May 17 '12 at 16:08
have you looked at the example I the link i posted? did you include all the needed js and css ? what do u see in the firebug console ? – Daniel May 17 '12 at 17:37
Post updated. It turns out that there was code missing. Would you show me once again how I use JSF and AJAX button with JQuery dialog, please. – user1285928 May 18 '12 at 14:52
@user1285928 edited my answer if that what you were looking for, but I really think that you should look at the link i posted... its a complete working example, (just noticed that you r wrote your question... you should have start a new one with a proper subject: "how to create custom confirm dialog with jquery/JSF2"), for now I only posted a way to open a dialog - instead of how to program a confirm dialog.... – Daniel May 19 '12 at 19:49

JQuery dialog in JSF page

2 Answers2