0

次のコードがあります。

HTML

<form action="" method="post" accept-charset="utf-8" class="button-to-delete">
    <input type="submit" name="delete" value="Delete" class="btn btn-danger" />
</form>

<div class="hidden-dialog" title="Delete product">
    <p>Are you sure that you want to delete thi product?</p>
    <p>Green Lantern T-Shirt</p>
</div>

CSS

.hidden-dialog   { display: none; }​

JavaScript

$(document).ready(function() {
    var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        buttons: {
            'Yes!' : {
                class: 'btn btn-danger',
                text: 'Yes!',
                click: function () {
                    $(this).prev('form.button-to-delete').submit(true);
                }
            },
            'No!' : {
                class: 'btn',
                text: 'No!',
                click: function () {
                    $(this).dialog("close");
                }
            }
        }
    });

    $('form.button-to-delete').submit(function() {
        var targetURL = $(this).attr("href");

        dialog.dialog('open');
        return false;
    }); 
});

そして、これが jsFiddle バージョンです: http://jsfiddle.net/mdJZ8/1/

フォーム ボタンをクリックすると、jQuery UI ダイアログが表示され、メッセージと 2 つのボタンが表示されます。と「いいえ！」。「いいえ！」ボタンは正常に動作します。「はい！」一方、ボタンはそうではありません。フォームを送信するはずですが、送信しません。問題はreturn false発言にあるのではないかと思います。ただし、ステートメントを削除すると、ダイアログが一瞬表示され、ユーザーがオプションを選択する機会を与えずにフォームが送信されます。ユーザーが「はい」をクリックした場合にのみフォームを送信するように、このコードを修正するにはどうすればよいですか。ボタンください？

4

3 に答える 3

0

JSを次のように置き換えることができると思います：

 $(document).ready(function() {

 var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        'Yes!' : {
            class: 'btn btn-danger',
            text: 'Yes!',
            click: function () {
                return true;
            }
        },
        'No!' : {
            class: 'btn',
            text: 'No!',
            click: function () {
                $(this).dialog("close");
                return false;
            }
        }
    }
});

$('form.button-to-delete').submit(function() {
    var targetURL = $(this).attr("href");

    return dialog.dialog('open');
});

});

于 2012-09-14T22:17:21.027 に答える
0

モーダル ダイアログの可視性をキーオフするのはどうですか?

$(document).ready(function() {
  var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        'Yes!' : {
            class: 'btn btn-danger',
            text: 'Yes!',
            click: function () {
                $(this).prev('form.button-to-delete').submit();
            }
        },
        'No!' : {
            class: 'btn',
            text: 'No!',
            click: function () {
                $(this).dialog("close");
            }
        }
    }
  });

  $('form.button-to-delete').submit(function() {
    var targetURL = $(this).attr("href");

    if($('div.hidden-dialog').is(':visible')) {
      return true;
    }

    dialog.dialog('open');
    return false;

  }); 
});
于 2012-09-14T22:31:38.213 に答える
0

私は何が間違っているかを見つけました。私がする必要があったのは、次のステートメントを使用することです。

$('form.button-to-delete').unbind("submit").submit();

完全な jQuery スクリプトは次のとおりです。

$(document).ready(function() {    
    var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        buttons: {
            'Yes!' : {
                class: 'btn btn-danger',
                text: 'Yes!',
                click: function () {
                    $('form.button-to-delete').unbind("submit").submit();
                }
            },
            'No!' : {
                class: 'btn',
                text: 'No!',
                click: function () {
                    $(this).dialog("close");
                }
            },
        }
    });

    $('form.button-to-delete').submit(function() {
        var targetURL = $(this).attr("href");

        dialog.dialog('open');
        return false;
    });
});
于 2012-09-14T22:42:14.880 に答える