1

私はAJAX経由でロードする単純なJQueryダイアログフォームに取り組んできました。JQueryツールを使用して検証し、成功した場合はAJAX経由で送信して閉じます。AJAXを介して（素敵な小さなリンクを介して）ダイアログを開くコードは次のとおりです。

<script type="text/javascript">
var activeDialog;
$(function (){
    $('a.ajax').click(function() {
        var dialogDiv = '<div style="display:hidden" id="dialogDiv" title="'+this.title+'"></div>';
        var dialog = $(dialogDiv).appendTo('body');
        // load remote content
        activeDialog = dialog.load(
            this.href, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    resizable: true,
                    title: this.title,
                    autoOpen: true,
                    height: 350,
                    width: 600,
                    modal: true,
                    close: function(event, ui) {
                        try {$("#addNoteForm").data("validator").destroy();}catch(e){}
                        $(this).dialog("destroy");
                    }
                });
            }
        );
        return false;
    });
});
</script>
<BR><BR>
<a class="ajax" href="dialog_clientEdit.php?cid=172" title="Add New Note">Create note</a>

ご覧のとおり、ダイアログは「dialog_clientEdit.php」ページから読み込まれます。ダイアログは独自の処理スクリプトで読み込まれ、入力されて正常に送信されると、AJAXを介してデータを送信し、エラーがない場合は、それ自体を閉じてバリデーターとダイアログを破棄します。

<div id="dialogNote9356904" title="Add New Note">
    <form action="process_note.php" method="post" name="addNoteForm" id="addNoteForm" class="form has-validation">
    <fieldset style="border:none;">
        <div class="clearfix">
            <label for="form-note" class="form-label">Note <em>*</em></label>
            <div class="form-input form-textarea"><textarea id="form-note" rows="5" name="note" required="required" /></textarea></div>
        </div>
        <div class="clearfix">
            <label for="form-notedate" class="form-label">Date <em>*</em><small>mm/dd/yyyy</small></label>
            <div class="form-input"><input type="date" id="form-notedate" name="date" data-value="03/05/2004" format="mm/dd/yyyy" required="required" /></div>
        </div>
        <div class="clearfix">
            <label class="form-label">Visibility <em>*</em><small>Private not visible to client</small></label>
            <div class="form-input"><label for="form-visibility-private"><input type="radio" name="visibility" id="form-visibility-private" value="private" checked /> Private</label> <label for="form-visibility-public"><input type="radio" name="visibility" id="form-visibility-public" value="public" /> Public</label></div>
        </div>
        <div class="form-action clearfix">
        <button class="button" id="submitNote" type="button" data-icon-primary="ui-icon-circle-check">Create Note</button>
            <button class="button" type="button" onClick="activeDialog.dialog("close");">Cancel</button>
            <span id="addDialogLoader"></span>
        </div>
    </fieldset>
    </form>
</div>
<script>
$('#submitNote').click(function () { 
    var form = $('#addNoteForm');
    if(form.data("validator").checkValidity()){
        var formData = $(form).serialize();
        // Save form via AJAX
        var ajax_load = "<img src='../images/ajax-loader.gif' alt='Saving...' />";
        var loadUrl = "process_note.php?cid=172";
        $("#addDialogLoader").html(ajax_load).load(loadUrl, formData, function(response, status, xhr) {
            if (status != "error") {
                if(response == "1"){
                    activeDialog.dialog("close");
                } else { alert("There was an error saving this note: "+response); }
            } else {
                 alert("An error occurred while performing your request: " + xhr.status + " " + xhr.statusText);
            }
        });
    }
    return false;
});
</script>

問題はこれです：フォームは一度だけ送信します。記入することができ、検証は正常に機能し、すべてのAJAXが正しく起動し、誰もが満足しています。次に、2回目の試行では、バリデーターが機能しなくなり、[メモの作成]ボタンをクリックしても基本的に何も行われません...ダイアログが送信されたり、AJAXが起動したりすることはありません。

ダイアログとバリデーターを閉じた後、必ず破棄します。ダイアログは正常に再び開きますが、日付ピッカーは2番目の開口部では機能せず、有効性がなくなり、フォームを送信できません。

すべてのコードを含めて申し訳ありませんが、エラーがどこにあるのか本当にわかりません。それは私がそれを閉じる（またはそれを再び開く、あるいはその両方）方法と関係があると確信しています。誰か助けてもらえますか？

4

2 に答える 2

1

提供したサンプルリンクで何をしているのかわかりませんが、（1）ダイアログはChrome for Macでも表示されません、（2）Firefox 5 for Windowsではほとんど機能しません、（3）完全に機能します不正な形式であり、IE9ではレイアウトが混乱しています。

Firebugを使用してページの動作を監視すると、大量の構文エラーやその他の問題が発生します。私の推測では、カスケード効果を引き起こしている小さなタイプミスか、あらゆる種類の奇妙な動作を引き起こしているスクリプトのより深い問題があります。

もし私があなたなら、Firebugでそれを自分で見て、最初にそれらの構文エラーをすべて排除して、そこから進んでいきます。

IE 9では、新しい公開メモを初めて送信しようとしても、次のエラーポップアップが表示されます。

ここに画像の説明を入力してください

于 2011-06-29T03:19:35.217 に答える
0

多くのテストを行った後、ダイアログを作成して閉じるたびに、残りのフォームとその要素がDOMに残っていることがわかりました。その後のダイアログの呼び出しは古いフォームで発生するため、日付ピッカー、検証、および送信が機能しなくなりました。

この問題を修正するために、ダイアログ関数のCloseイベントで次の行を置き換えました。

$(this).dialog("destroy");

...これで：

$(this).dialog("destroy").remove();

この新しい行は、ダイアログを破棄してから、ダイアログを保持していたdivをDOMから削除します（上記のコードの場合、変数「dialogDiv」によって参照されます）。

すべての問題が解決しました！

于 2011-06-29T22:03:35.443 に答える