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

我想在按下一个按钮进入JSF页面时使用JQuery对话框以确认动作执行（在我的情况下确认删除行）。 我发现这个JQuery代码完美运行：

       $(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'); } ); });   /*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;}     
Dialog
 
Open Dialog
  
 
Dialog Test
 
   

问题是我需要从这个按钮调用对话框到Java Server Faces页面：

你能帮助我实现这个例子吗？

Answer 1

这是我使用的方法

你需要两个按钮

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

现在，对于将打开对话框的按钮，此按钮也将使用execute="@form"将表单提交给服务器（例如，如果您有选择列）

现在来执行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"); } } }); } } 

请注意，只有在单击“确定”对话框按钮时，才会执行隐藏按钮$("#myHiddenButtonID").click(); 否则什么都不会发生……

但我真的强烈建议你使用h:head而不是head和而不是div ...看看我之前的例子... JSF中的jQuery对话框

Answer 2

如果你必须在点击命令按钮时调用它，那么使用onclick事件

然后在对话框中，您可以检查确认条件，点击Okay发送事件。

根据评论编辑：

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

XHTML

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

如果你想坚持div但是让你的代码工作，你可以使用上面给出的相同的javascript，并用div id替换id。

Answer 3

一个更简单的方法是不使用jquery dailog来确认消息，只需在onclick中使用普通的javascript确认框，无需重新发明轮子：

您必须添加返回，否则jsf将忽略用户从确认框中选择的内容，因此如果用户说单击取消，则仍将执行删除function。