java - How to implement JQuery confirm dialog with JSF- Stack Overflow

IT技术

更新时间：2025-03-090

admin管理员组
文章数量:1290208

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:mandButton value="Delete" action="#{bean.deleteid}" >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>

Would you help me please to implement this example?

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:mandButton value="Delete" action="#{bean.deleteid}" >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>

Would you help me please to implement this example?

Share Improve this question edited May 21, 2012 at 10:14 Daniel 37.1k10 gold badges122 silver badges204 bronze badges asked May 18, 2012 at 16:50 user1285928 1,47629 gold badges102 silver badges156 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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:mandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteid}" style="display:none">
    <f:ajax render="@form" ></f:ajax>
</h:mandButton>

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:mandButton value="Delete">
    <f:ajax execute="@form" onevent="openDialogFunc()"></f:ajax>
</h:mandButton>

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 remend you to use h:head instead of head and <h:panelGroup instead of div ... look at my previous example... jQuery Dialog in JSF

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

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

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

Edit As per ment:

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.

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

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.

本文标签： javaHow to implement JQuery confirm dialog with JSF Stack Overflow

版权声明：本文标题：java - How to implement JQuery confirm dialog with JSF- Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1741494990a2381797.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

java - How to implement JQuery confirm dialog with JSF- Stack Overflow

3 Answers 3

更多相关文章