Fatal编程技术网
  • java/
  • Java 如何用JSF实现JQuery确认对话框

Java 如何用JSF实现JQuery确认对话框

java javascript jsf jsf-2

Java 如何用JSF实现JQuery确认对话框,java,javascript,jsf,jsf-2,jquery-ui-dialog,Java,Javascript,Jsf,Jsf 2,Jquery Ui Dialog,我想在按下JSF页面中的按钮时使用JQuery对话框来确认操作的执行（在我的例子中是确认行的删除）。 我发现这个JQuery代码工作得非常好： <html> <head> <title>jQuery UI Example Page</title> <link type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css" rel="

我想在按下JSF页面中的按钮时使用JQuery对话框来确认操作的执行（在我的例子中是确认行的删除）。 我发现这个JQuery代码工作得非常好：

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


jQueryUI示例页面
$（函数（）{
//手风琴
$（“#accordion”）.accordion（{标题：“h3”}）；
//标签
$（“#tabs”）.tabs（）；
//对话
$（'#dialog'）。dialog({
自动打开：错误，
宽度：600，
按钮：{
“Ok”：函数（）{
$（此）.dialog（“关闭”）；
}, 
“取消”：函数（）{
$（此）.dialog（“关闭”）；
} 
}
});
//对话框链接
$（“#对话框_链接”）。单击（函数（）{
$（'dialog'）。dialog（'open'）；
返回false；
});
//日期选择器
$（“#日期选择器”）。日期选择器({
内联：对
});
//滑块
$（“#滑块”）。滑块({
范围：对，
价值：[17,67]
});
//进度条
$（“#progressbar”）.progressbar({
价值：20
});
//静态小部件上的悬停状态
$（“#对话框#链接，ul#图标li”）。悬停(
函数（）{$（this.addClass（'ui-state-hover'）；}，
函数（）{$（this）.removeClass（'ui-state-hover'）；}
);
});
/*演示页面css*/
正文{字体：62.5%“投石机MS”，无衬线；边距：50px；}
.demoHeaders{页边距顶端：2em；}
#对话框链接{填充：.4em 1em.4em 20px；文本装饰：无；位置：相对；}
#对话框链接span.ui-图标{页边距：0 5px 0；位置：绝对；左侧：.2em；顶部：50%；页边距顶部：-8px；}
ul#图标{边距：0；填充：0；}
ul#图标li{边距：2px；位置：相对；填充：4px 0；光标：指针；浮点：左；列表样式：无；}
ul#icons span.ui-icon{float:left；margin:04px；}
对话


对话测试
问题是，我需要从该按钮将对话框调用到Java Server Faces页面：

<h:commandButton value="Delete" action="#{bean.deleteid}" >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
您能帮我实现这个示例吗？

如果您必须调用它，请单击命令按钮，然后使用
onclick
事件

<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return myjavascriptmethod">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
然后，在对话框中，单击OK dispatch the event（确定分派事件），可以检查确认条件

根据评论编辑：

当您不想使用div时，我只使用了一个面板网格，您可以这样做：

xhtml


var alreadyValidated=假；
函数测试jquerydialog（按钮引用）{
如果（！alreadyValidate）{
$（'#panelGridAsDialogTest'）。对话框({
自动打开：对，
宽度：600，
按钮：{
“Ok”：函数（事件）{
$（此）.dialog（“关闭”）；
alreadyValidated=真；
jQuery（按钮引用）.trigger（“单击”）；
}, 
“取消”：函数（事件）{
event.preventDefault（）；
$（此）.dialog（“关闭”）；
} 
}
});
}
返回已验证；
}
如果您想坚持使用div，但要使代码正常工作，您可以使用上面给出的相同javascript，并将id替换为div id。

如果您必须调用它，请单击commandbutton，然后使用
onclick
事件

<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return myjavascriptmethod">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
然后，在对话框中，单击OK dispatch the event（确定分派事件），可以检查确认条件

根据评论编辑：

当您不想使用div时，我只使用了一个面板网格，您可以这样做：

xhtml


var alreadyValidated=假；
函数测试jquerydialog（按钮引用）{
如果（！alreadyValidate）{
$（'#panelGridAsDialogTest'）。对话框({
自动打开：对，
宽度：600，
按钮：{
“Ok”：函数（事件）{
$（此）.dialog（“关闭”）；
alreadyValidated=真；
jQuery（按钮引用）.trigger（“单击”）；
}, 
“取消”：函数（事件）{
event.preventDefault（）；
$（此）.dialog（“关闭”）；
} 
}
});
}
返回已验证；
}
如果您想坚持使用div，但让代码正常工作，您可以使用上面给出的相同javascript，并用div id替换id。

这里是我使用的方法

你需要两个按钮

在确认对话框中单击
Yes
，第一个按钮将被隐藏并被调用，此隐藏按钮将调用服务器端方法，并使用
f:ajax

<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteid}" style="display:none">
    <f:ajax render="@form" ></f:ajax>
</h:commandButton>
现在来看看js函数的实现

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"); 
                 } 
             }
         });
    }
}
请注意，只有在单击“确定”对话框按钮时，才会执行隐藏按钮
$（“#myhiddenbutonid”）。单击（）否则什么都不会发生


但我强烈建议您使用
h:head
而不是
head
，这里是我使用的方法

你需要两个按钮

第一个将被隐藏，并在conf中单击
Yes
后被调用

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"); 
                 } 
             }
         });
    }
}



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