jQuery UIは、複数のフォームのダイアログを確認します

StackOverflow https://stackoverflow.com/questions/3880815

質問

同じページにいくつかのフォームがあり、同じコードを使用してすべてのダイアログを追加したいと思います。それらはすべて確認型のクラスを持っており、[確認]ダイアログのタイトルは動的に生成する必要があります（これはATMではなく）。

HTMLには、ページが読み込まれたときに非表示になるダイアログがあります。 dialog('open') 関数は呼び出されます。

これは私が今持っているものであり、ダイアログのロードはまったく機能していませんが、確認すると、Else句をたくさん繰り返し、フォームを送信しません。

var deleteConfirmed = false;
$('form.confirm-form').submit(function(e) {
if ( ! deleteConfirmed)
{
    e.preventDefault();
    var title = $(this).find('input.action').val();
    var $this = $(this);
    console.log('title: ' + title);

    $('#confirm-dialog').attr('title', title);

    $('#confirm-dialog').dialog({
        buttons : {
            "Confirm" : function() {
                deleteConfirmed = true;
                $(this).dialog('close');
                $this.submit();
            },
            "Cancel" : function() {
                $(this).dialog('close');
            }
        }
    });

    $('#confirm-dialog').dialog('open');
}
else
{
    $(this).submit();
    deleteConfirmed = false;
}
});
役に立ちましたか？

解決

編集

1つの可能なソリューションがあります。 JSFiddleで異常な動作を得ていたので、ライブサーバーでテストしました。注：複数のフォームに対処しなかったため、元の投稿を廃棄しました。そして、おそらくフォームの送信はAjaxで提出されます。

x.htmlのソース


<!DOCTYPE html>
<html>
<head><title>SO</title>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
  rel="stylesheet"
  type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>

<div id="dlg1"></div>
<form method="post" action="/so/x.php" id="frm1" name="frm1">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm1_submit">
</form>
<form method="post" action="/so/x.php" id="frm2" name="frm2">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm2_submit">
</form>
<form method="post" action="/so/x.php" id="frm3" name="frm3">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm3_submit">
</form>


<script type="text/javascript">
var $current = { form : null, do_submit : false };

$('#dlg1').dialog({
    title: "Confirmation",
    width: 300,
    height: 200,
    autoOpen: false,
    modal: true,
    buttons : {
      "Confirm" : function(e){
        $current.do_submit = true;
        $(this).dialog('close');
      },
      "Cancel"  : function(e){
         $current.do_submit = false;
         $(this).dialog('close');
      }
    }
});

$('#dlg1').bind('dialogbeforeclose', function(){
    if($current.do_submit){
      ($current.form).submit();
      $current.form = null;
      $current.do_submit = false;
    }
});

$('.submitter_btn').click(function(e){
    e.preventDefault();
    $current.form = $(this).parents('form:first');
    $('#dlg1').dialog('open');
});


</script>
</body>
</html>

x.phpのソース


<?php
echo "HELLO";

他のヒント

私は見つけられるまで、自家式の検証に使用していました このスクリプト. 。それは非常に少ない脳の損傷であり、フォーム要素のほぼすべてのタイプまたは組み合わせを検証するのがうまくいくようです。要素ごとに1つのクラス宣言のみが検証を最小限に抑えます。ページごとに2つ（またはそれ以上）を実行するには、フォームIDまたは名前ごとに1つをインスタンス化するだけです。とても簡単！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top