0

シンプルな jquery ダイアログ メッセージをフォームに埋め込もうとしています。ダイアログは、いくつかの追加情報のみを表示し、フォーム内からボタンを介して呼び出される以外の方法でフォームと対話しないようにする必要があります。

私の問題は次のとおりです。ダイアログがフォーム内から呼び出されると、ページ全体が即座に更新され、ダイアログがまったく表示されず、すべてのフォームフィールドがクリアされます。ボタンがフォームの外にある場合、すべてが正常に機能しています。

ダイアログのコンテンツは、次のようなテンプレートを介してロードされています。

<script>
$(function() {
    var dlg = $( "#dialog-message" ).dialog({
        autoOpen: false,
        width: '80%',
        closeOnEscape: false,
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        },
        open: function() {
            // Content laden...
            $("#dialog-message").load('template.html', function() {}).dialog()
        }
    });
    $( "#opener" ).click(function() {
        $( "#dialog-message" ).dialog( "open" );
    });
});
</script>

フォームの統合:

<form method="post" name="post" action="index.php?site=bewerbung">
  <table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="$border">

  ...

  </tr>
    <tr bgcolor="$bg1">
    <td height="25">&nbsp;</td>
    <td><input class="input" type="checkbox" name="rules" id="rules" value="1" /><button id="opener">Regeln</button></td>
  </tr>

</table>
</form>
4

2 に答える 2

0

ボタンはフォームを送信するため、JavaScript を介してデフォルトのボタン アクションを防止する必要があります。

$("#opener").on('click', function(e) {
    dlg.dialog("open");
    e.preventDefault();
});

使用しているjQuery（UI）のバージョンについては言及していません。上記の私のコードは、新しいバージョン用です。これがデモです。

于 2013-05-19T00:02:02.387 に答える
0

通常、ボタンと送信入力の場合: 「return false;」を配置すると、ページの更新を防ぐことができます。関数の最後に。あなたの場合

$( "#opener" ).click(function() {
    $( "#dialog-message" ).dialog( "open" );
    return false;
});
于 2013-05-19T00:24:55.587 に答える