web-dev-qa-db-ja.com

ブートボックス確認ダイアログの問題

残念ながら、ドキュメントブートボックス（ http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-Twitter-bootstrap ）は、確認ダイアログの呼び出し方法を教えていません。ドキュメントウィンドウにあるため、ページが読み込まれると常に表示されます。何が問題なのかは、削除ボタンをクリックして呼び出されたときに表示されます。これは失敗したコードです。

// show "false" does not work, the confirm window is showing when page is loaded.
$(function () {
bootbox.confirm("Confirm delete?", "No", "Yes", function(result) {
show: false
});     
});

// need show the confirm window when the user click in a button, how to call the confirm window?

<td><a class="icon-trash" onclick="bootbox.confirm();" href="{% url 'del_setor' setor.id %}" title="Delete"></a></td>

削除ボタンがクリックされたときにのみ表示されるようにこのブートボックスを設定するにはどうすればよいですか？ありがとう！

編集-解決策：

$(function () {
$("a#confirm").click(function(e) {
    e.preventDefault();
    var location = $(this).attr('href');
    bootbox.confirm("Confirm exclusion?", "No", "Yes", function(confirmed) {
        if(confirmed) {
        window.location.replace(location);
        }
    });
});     
});

これで、「はい」をクリックすると削除が機能します。プラグインの開発者に完全なサンプルをドキュメントに入れるように依頼したので、「はい」をクリックしたときにオブジェクトを削除する方法に関する投稿をユーザーが作成する必要はありません。よろしく。

jquerytwitter-bootstrapbootbox
13
LinuxMan

このページの「基本的な使用法」の「確認」リンクでソースを確認することをお勧めします： http://bootboxjs.com/

これがスニペットです：

$("a.confirm").click(function(e) {
    e.preventDefault();
    bootbox.confirm("Are you sure?", function(confirmed) {
        console.log("Confirmed: "+confirmed);
    });
});

作業中のUIでjQueryを使用できると仮定すると、アンカータグでonClick属性を使用することは避けます。ちょうど私の2セント。

6
jstam

私も必要でしたが、少し変更しました...見てください...

次のように、この関数をグローバルな「jQuery Ready」関数に追加します。

$(document).on("click", "[data-toggle=\"confirm\"]", function (e) {
    e.preventDefault();
    var lHref = $(this).attr('href');
    var lText = this.attributes.getNamedItem("data-title") ? this.attributes.getNamedItem("data-title").value : "Are you sure?"; // If data-title is not set use default text
    bootbox.confirm(lText, function (confirmed) {
        if (confirmed) {
            //window.location.replace(lHref); // similar behavior as an HTTP redirect (DOESN'T increment browser history)
            window.location.href = lHref; // similar behavior as clicking on a link (Increments browser history)
        }
    });
});

そして、そのようなボタンやリンクにいくつかの「data- *属性」を追加するだけです：

<a class="btn btn-xs btn-default" data-toggle="confirm" data-title="Do you really want to delete the record 123?" href="/Controller/Delete/123"><span class="fa fa-remove"></span> </a>

だから...このようにして、パーソナライズされた質問をすることができます..これは、ユーザーにとってより直感的です...

あなたは好きでしたか？！

デモを見る： jsfiddle

3
Rodolpho Brock
$(document).on("click", ".confirm-modal", function(e) {
    e.preventDefault();
    bootbox.confirm("Are You sure?", function(result) {
        if(result) {
            top.location.href = e.target.href;
        }
    });
});
0
mdco