Пользовательский интерфейс jQuery для подтверждения формы

Это мой первый вопрос в StackOverflow, и я уже рассмотрел все вопросы о диалоговых окнах и формах jQuery, но проблема все еще остается.

Я пытаюсь реализовать диалог подтверждения jQuery в своей форме. Окно действительно появляется без проблем, но когда я нажимаю «Подтвердить», форма не отправляется...

Это Javascript:

        // Form validation
        $(function(){
            var currentForm;
            $("#dialog-confirm").dialog({
                    autoOpen: false,
                    resizable: false,
                    modal: true,
                    buttons: {
                        'Confirm': function(e) {
                            currentForm.submit();
                            return true;
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                            return false;
                        }
                    }
                });
            $("#news-listing").submit(function(e){
                currentForm=$(this);
                if($("#dialog-confirm").dialog("open"))
                {
                    return false;
                } 
            });
});

И есть HTML

<div id="dialog-confirm" title="Empty the recycle bin ?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin: 20px 10px 20px 10px;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<form action="news/action/delete" id="news-listing">
<table id="users-listing">
    <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="url">URL</th>
        <th class="modify">Modify</th>
        <th class="checkcell">Delete</th>
    </tr>   
    <tr class='alt'>
        <td class='id'>".$news['news_id']."</td>";
        <td class='title'>".$news['news_title']."</td>";
        <td>".$this->News->get_url($news['news_id'])."</td>";
        <td class='modify'><a href="modify/1">Modify</a></td>;
        <td><input type="checkbox" name="delete[]" /></td>
    </tr>
</table>
<input type="submit" name="submit" />
</form>

Заранее спасибо за вашу помощь !

РЕДАКТИРОВАТЬ: Вот мой новый код, HTML не меняется. Теперь у меня есть диалог, но кнопка подтверждения не отправляется, кнопка отмены работает хорошо.

$(function() {   
                // Get the current form object 
                var currentForm = $("#news-listing");
                // Initialize dialog
                $("#dialog-confirm").dialog({
                    autoOpen: false,
                    resizable: false,
                    modal: true,
                    buttons: {
                        'Confirm': function() {
                            currentForm.submit();
                            return true;
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                            return false;
                        }
                    }
                });

                // Validate the form
                $("#news-listing").validate({
                    rules:{
                        "delete[]":"required"
                    },
                    submitHandler: function(e){
                        $("#dialog-confirm").dialog("open");
                    }
                });
            });

user-interface forms dialog jquery confirmation
person titoo87    schedule 18.01.2012    source источник
comment
Вы просмотрели в консоли ошибок Firefox, Chrome или Safari? Возможно, вы сделали ошибку javascript.   -  person Reporter    schedule 18.01.2012

Ответы (2)


arrow_upward
1
arrow_downward

Проблема в том, что currentForm становится undefined при выполнении этой строки:

currentForm.submit();

Будет выброшена ошибка, потому что undefined не имеет метода submit!

Вы пытаетесь установить значение currentForm в обработчике событий submit самой формы, поэтому вы страдаете от проблемы курицы и яйца. Вам нужно назначить элемент формы currentForm вне обработчика событий:

$(function() {    
    var currentForm = $("#news-listing");
    $("#dialog-confirm").dialog({
        //Dialog options...
        //currentForm.submit() will now work here
    });
    $("#news-listing").submit(function(e) {
        //Event handler...
        //This will be executed when currentForm.submit() is called
    });
});
person James Allardice    schedule 18.01.2012
comment
Спасибо за уделенное время ! Ваше решение удалило неопределенную ошибку, но кнопка подтверждения по-прежнему не отправляет форму без каких-либо ошибок. - person titoo87; 18.01.2012
comment
Для чего предназначен обработчик событий submit? В настоящее время он всегда будет возвращать false. Если нужно проверить, открыто ли диалоговое окно, вам нужен метод isOpen, а не open. - person James Allardice; 18.01.2012
comment
Обработчик отправки должен открыть диалоговое окно для подтверждения, если подтверждение нажато, то он фактически отправляет форму. - person titoo87; 18.01.2012
comment
Хорошо, я нашел свой ответ: просто замените currentForm.submit() на document.getElementById().submit(). Я не знаю почему, но jQuery Selector внутри метода Dialog недоступен... - person titoo87; 18.01.2012

arrow_upward
0
arrow_downward

Переменная currentForm должна быть инициализирована элементом формы.

изменять

var currentForm;

to

var currentForm = document.getElementById("news-listing");
person Nirmal    schedule 18.01.2012