如何使用JSF實現JQuery確認對話框

當我按下一個按鈕到JSF頁面以確認動作執行時（在我的情況下確認刪除行），我想使用JQuery對話框。我發現這個jQuery代碼可以正常使用：如何使用JSF實現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>

的問題是，我需要從這個按鈕進入Java服務器調用對話框Faces頁面：

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

你能幫我，請執行這一例？

來源

2012-05-18 user1285928

在這裏，我使用

你需要兩個按鈕

第一個將被隱藏，將被稱爲點擊Yes在確認對話框的結果，這個隱藏的按鈕將是一個的辦法，將調用服務器端方法，並使用f:ajax

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

現在的按鈕，將打開的對話框中做render，此按鈕也將提交表單的SER版本與execute="@form"（如果你有例如選擇列）

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

執行通知書，只有在點擊確定對話框按鈕會出現的執行你的隱藏按鈕$("#myHiddenButtonID").click();否則什麼也不會發生......

但我真的強烈建議您使用h:head而不是head和<h:panelGroup，而不是股利..看看我以前的例子...jQuery Dialog in JSF

來源

2012-05-21 10:13:16 Daniel

謝謝你的回答。你確定沒有其他可能的解決方案直接調用ajax而不使用隱藏按鈕嗎？ – user1285928

INMO你真的最好這樣做，另一種選擇是寫一些js代碼，它將模擬與'f：ajax'相同的東西...我還沒有看到「模仿f：ajax和js more比一次或兩次「隱藏的按鈕是最好的和安全的解決方案... – Daniel

我只是很感興趣，這可以實現。你會告訴我一個快速的代碼片段嗎？ – user1285928

如果你要調用它的命令按鈕的點擊且說使用onclick事件

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

然後在對話框中你可以檢查的情況進行確認，對奧凱調度事件的點擊。

編輯爲根據註釋：當你不想使用一個div，我只是用面板網格

，你可以做這樣的事情：

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

如果您想要堅持div但讓你的代碼工作，你可以使用上面給出的相同的JavaScript，並用div id替換id。

來源

2012-05-18 17:03:08 mprabhat

我添加了'onclick'屬性，它的工作原理。但是不管我點擊按鈕代碼是否執行。我如何編輯代碼才能停止exaction？ – user1285928

點擊對話框中的「否」，添加event.preventDefault（），以解決您的問題 – mprabhat

因此在您的情況下，您的取消代碼將如下所示：「取消」：function（event）{ $（this）.dialog （「關」）; event.preventDefault（）; } } – mprabhat

一個更簡單的方法是不使用jQuery的dailog確認消息時，只需使用普通的JavaScript確認框在的onclick，沒有必要重新發明輪子：

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

您必須添加return否則jsf會忽略用戶從確認框中選擇的內容，所以如果用戶說clicks取消，刪除功能仍然會被執行。

來源

2013-07-07 14:15:23

如何使用JSF實現JQuery確認對話框

回答

相關問題