1

アクションの実行を確認するために（私の場合は行の削除を確認するために）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>

問題は、このボタンからJavaServerFacesページにダイアログを呼び出す必要があることです。

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

この例を実装するのを手伝っていただけませんか。

4

3 に答える 3

4

ここで私が使用するアプローチ

2つのボタンが必要です

最初のYesボタンは非表示になり、確認ダイアログでクリックした結果として呼び出されます。この非表示のボタンは、サーバー側のメソッドを呼び出しrender、f:ajax

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

ダイアログを開くボタンに移動すると、このボタンはフォームをサーバーに送信します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"); 
                 } 
             }
         });
    }
}

[OK] ダイアログ ボタンをクリックした場合にのみ、非表示のボタンが実行されることに注意してください。$("#myHiddenButtonID").click();それ以外の場合は何も起こりません...

しかし、div の代わりに、およびdivh:headの代わりに使用することを強くお勧めします... 前の例を見てください... JSF の jQuery Dialoghead<h:panelGroup

于 2012-05-21T10:13:16.237 に答える
3

コマンドボタンのクリックで呼び出す必要がある場合は、onclickイベントを使用します

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

次に、ダイアログで確認のために条件を確認できます。[OK] をクリックすると、イベントがディスパッチされます。

コメントに従って編集：

div を使用したくない場合は、パネル Grid を使用しました。次のようなことができます。

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 を使用して、id を div id に置き換えることができます。

于 2012-05-18T17:03:08.357 に答える
2

はるかに簡単なアプローチは、確認メッセージにjqueryダイログを使用せず、onclickで通常のjavascript確認ボックスを使用するだけで、車輪を再発明する必要はありません:

<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 はユーザーが確認ボックスから選択したものを無視するため、ユーザーがクリックをキャンセルすると言うと、削除機能は引き続き実行されます。

于 2013-07-07T14:15:23.267 に答える