4

BootstrapDialog を呼び出して確認ポップアップを作成する独自のメソッドを作成しようとしています。ユーザーが「確認」を選択すると、メソッドは true を返し、jsf アクションの呼び出しを続行します。私がこれまでに持っているコード:

 /**
 * Confirm window
 *
 * @param {type} message
 * @param {type} callback
 * @returns {undefined}
 */
BootstrapDialog.confirmation = function(title, message) {

    var callback = function(result) {
        console.log(result);
        return result;
    };

    var b = new BootstrapDialog({
        title: title,
        message: message,
        closable: false,
        data: {
            'callback': callback
        },
        buttons: [{
                label: 'Cancel',
                action: function(dialog) {
                    typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
                    dialog.close();
                }
            }, {
                label: 'Continue',
                cssClass: 'btn-primary',
                action: function(dialog) {
                    typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
                    dialog.close();
                }
            }]
    }).open();


    return callback;


};

私はjsを次のように呼び出しています：

<h:commandButton type="button" value="Exit" action="myaction" styleClass="btn btn-default" onclick="return BootstrapDialog.confirmation('Data unsaved', 'Are you sure you want to continue');"/>

ダイアログは問題なくポップアップします。問題は、true / false が返されないことです。この例の後に js をモデル化しました: http://nakupanda.github.io/bootstrap3-dialog/

4

3 に答える 3

0

私は Bootstrap を初めて使用し、bootstrap-dialog をわずか 2 時間前に発見したので、私の答えはそれだけの価値があるだけです...

私はすぐに同様の問題に遭遇しました：送信ボタンのクリック時に醜いjavascript確認APIを置き換えるために素敵なブートストラップ確認を使用するにはどうすればよいですか?...

KLenwel が言ったように、confirm は同期 API であり、bootstrap-dialog は非同期 API です。あなたのスレッドは、ユーザーの回答がポストバックするのを待ちません (またはポストしません)。

二次ボタンを使用して確認ダイアログをポップアップしました。実際の送信ボタンは隠されています。Bootstrap ダイアログの確認により、送信ボタンのクリックが発生し、javascript 送信ハンドラーとサーバーに送信される http ヘッダーの両方が保持されます。

このコード例は、ASP.Net Webform ページの抜粋です。データバインディングを使用して、非表示のボタンに一意の css クラス名を付けて、javascript ダイアログ コールバックによって簡単にトリガーできるようにします。id プロパティではなく、CssClass プロパティを使用しました。これは、ASP.Net の理由によるものです。

<asp:Button style="display: none" runat="server" CssClass='<%# Eval( "Id" ) %>' OnCommand="Delete" CommandName='<%# Eval( "Id" ) %>' />
<input type="button" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('.<%# Eval( "Id" ) %>').click(); } )" />

同じこと、純粋な HTML では、ASP.Net WebForms に依存しません (コントロールの ID を使用します):

<input type="submit" style="display: none" id="TheSubmitButton" onclick="alert('ok, submit will be fired');" />
<input type="button" title="Delete" data-placement="bottom" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('#TheSubmitButton').click(); } )" />
于 2015-02-02T14:49:11.503 に答える
0

同じ質問がありましたが、eval() を使用して解決しました。機能は

function showConfirmBootstrap(type,title,mesagge, myFunction){

    BootstrapDialog.confirm({
        size: "size-small",
        type: "type-"+type, 
        title: title,
        message: mesagge,
        cssClass: 'delete-row-dialog',
        closable: true,
        callback: function(result) {
            if(result) { eval(myFunction); }
        }
    });
}

結果が true の場合、アプリは myFunction を実行します。ご覧のとおり、myFunction はメイン関数のパラメーターです。

タイプのブートストラップ、タイトル、およびメッセージをパラメーターとして送信できます。

例は次のとおりです。

showConfirmBootstrap("danger","Error","Do you want do this function?", "alert(5)")
于 2016-03-08T20:41:20.943 に答える