Форма диалога jQuery UI с AJAX и валидатором, нормально работающим только один раз - PullRequest
Новая
       23

Форма диалога jQuery UI с AJAX и валидатором, нормально работающим только один раз

1 голос
/ 29 июня 2011

Я работал над простой диалоговой формой JQuery, которая загружается через AJAX.Он использует JQuery Tools для проверки и, в случае успеха, отправляет через 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 работают правильно, и все довольны.Затем, когда вы попробуете второй раз, валидатор больше не работает, и нажатие кнопки «Создать заметку» практически ничего не делает ... диалоговое окно никогда не отправляется, и AJAX никогда не запускается.

Я проверяю, чтобы уничтожитьдиалог и валидатор после его закрытия.Диалоговое окно снова открывается нормально, но средство выбора даты не работает при втором открытии, больше нет подтверждения и форма не может быть отправлена.

Извините, что я включил весь код, но ядействительно не знаю, где ошибка здесь.Я уверен, что это как-то связано с тем, как я его закрываю (или снова открываю, или и то, и другое).Кто-нибудь может помочь?

Ответы [ 2 ]

1 голос
/ 29 июня 2011

Не уверен, что вы делаете в приведенной вами примерной ссылке, но (1) диалоговое окно даже не отображается в Chrome для Mac, (2) оно работает только в Firefox 5 для Windows и (3 ) он полностью искажен, а макет в IE 9 испорчен.

Когда я использую Firebug, чтобы посмотреть, что делает страница, он видит массу синтаксических ошибок и другие проблемы. Я предполагаю, что у вас либо небольшая опечатка, которая вызывает каскадный эффект, либо более глубокая проблема в вашем скрипте, которая вызывает все виды странного поведения.

Если бы я был вами, я бы сам посмотрел на него в Firebug, попытался сначала устранить все эти синтаксические ошибки и пошел оттуда.

В IE 9, даже когда я пытаюсь отправить новую публичную заметку в первый раз , я получаю следующее сообщение об ошибке:

enter image description here

0 голосов
/ 30 июня 2011

После МНОГО тестирования, я обнаружил, что каждый раз, когда диалог создавался и закрывался, оставшаяся форма и ее элементы оставались в DOM. Последующие вызовы диалогового окна будут запускаться на старой форме, поэтому средства выбора даты, проверки и отправки перестали работать.

Чтобы исправить проблему, я просто заменил эту строку в событии Close для функции диалога: 

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

... с этим: 

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

Эта новая строка уничтожает диалог, а затем удаляет div, который содержал диалог из DOM (в случае кода выше, на который ссылается переменная dialogDiv).

Все проблемы решены!

...