Невозможно выполнить вызов ajax в функции кнопки диалога jQuery.Возвращает ноль - PullRequest
Новая
       10

Невозможно выполнить вызов ajax в функции кнопки диалога jQuery.Возвращает ноль

0 голосов
/ 22 мая 2018

Мне нужно подтвердить, что пользователь действительно хочет отправить форму через диалоговую кнопку jQuery.Я попытался поместить свою функцию ajax в мою функцию «Подтвердить», но она вернула NULL.

Как я могу вызвать функцию ajax только , если они нажимают «Подтвердить»?

Здесь у меня есть диалоговое окно div: 

echo "<div id=\"dialog_confirm\">
      <p style=\"font-size:20px; color:white;\">Are you sure you wanna do that?</p>
      <p style=\"font-size:20px; color:white;\">All records will be removed!</p>
  </div>";

ЗдесьЯ инициализирую свой диалог 

//Confirmation dialog
    $('#dialog_confirm').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        },
        buttons: {
            "Confirm": function () { //Tried to place my ajax function
                                     //here but it returned null
                $(this).dialog('close');
                $('#remove_domain_form')[0].reset();
            },
            "Cancel": function () {
                $(this).dialog('close');
            }
        }
    });

Моя функция отправки формы: 

 $('#remove_domain_form').submit(function (e) {
    e.preventDefault();
    var isEmpty = false;
    $(':input:not(button)').each(function () {
        if ($(this).val() === "") {
            var error_text = $('#dialog p').text("All fields are required");
            $('#dialog').html(error_text);
            $('#dialog').dialog('option', 'title', 'Error').dialog('open');
            isEmpty = true;
        }
        else {
            $('#dialog_confirm').dialog('open');
        }
    });
    if (!isEmpty) {
        // <------ I NEED TO HAVE THE CONFIRMATION DIALOG HERE
        console.log("Not Empty");
        $.ajax({
            url: "check-domain-remove.php",
            type: "post",
            dataType: 'json',
            data: $('#remove_domain_form').serialize(),
            success: function (response) {
                if (response === "Success") {
                    //DO OTHER STUFF
                    var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                    $('body').append(success_div);
                }
            }

        });
    }
});

Редактировать : Я также пытался поместить ее в функцию, которая срабатывает при закрытии /Подтвердить событие, пока безрезультатно.Если я нажимаю «Подтвердить», возвращается ноль.Если я нажимаю «Отмена», я получаю правильные результаты!Это так странно, и я не знаю, почему это происходит.

$('#dialog_confirm').bind('dialogclose', function(event, ui) {
        if($(event.target).text() != 'Cancel') {
            console.log("Clicked Confirm");
            $.ajax({
                url: "check-domain-remove.php",
                type: "post",
                dataType: 'json',
                data: $('#remove_domain_form').serialize(),
                success: function (response) {
                    if (response === "Success") {
                        //DO OTHER STUFF
                        var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                        $('body').append(success_div);
                    }
                }

            });
        }
    });

Ответы [ 3 ]

0 голосов
/ 22 мая 2018

ОК, сделайте это: 

$('#yourFirstButton').on('click', function (e) {
    e.preventDefault();
    $(':input:not(button)').each(function () {
        if ($(this).val() === "") {
            var error_text = $('#dialog p').text("All fields are required");
            $('#dialog').html(error_text);
            $('#dialog').dialog('option', 'title', 'Error').dialog('open');
            return false;
        }
        else {
            $('#dialog_confirm').dialog('open');
        }
    });        
});

$('#yourConfirmButton').on('click', function(){
    $('#remove_domain_form').submit(
        // <------ I NEED TO HAVE THE CONFIRMATION DIALOG HERE
        console.log("Not Empty");
        $.ajax({
            url: "check-domain-remove.php",
            type: "post",
            dataType: 'json',
            data: $('#remove_domain_form').serialize(),
            success: function (response) {
                if (response === "Success") {
                    //DO OTHER STUFF
                    var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                    $('body').append(success_div);
                }
            }    
        });
    )
});

Таким образом, проверка прерывается при возврате ложного значения, а затем, если он проходит, продолжается с вызовом ajax.

0 голосов
/ 23 мая 2018

Хорошо, я понял это.Мне нужно (по какой-то причине я еще не знаю), чтобы добавить пустые функции щелчка в моей инициализации диалога.Теперь я могу отправить форму и получить диалог.Если я нажимаю Отмена, он закрывается.Если я нажимаю «Подтвердить», ajax возвращает то, что мне нужно.

Кит, ваше предложение создать функцию щелчка было почти тем, что мне было нужно.Мне просто нужно было добавить функции щелчка. 

$('#dialog_confirm').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        },
        buttons: {
            'Confirm' : {
                text:'Confirm',
                id:'confirm_button',
                click:function() {
                    $(this).dialog('close');
                }
            },
            'Cancel' : {
                text:'Cancel',
                id:'cancel_button',
                click:function() {
                    $(this).dialog('close');
                }
            }
        }
    });

$('#remove_domain_form').submit(function (e) {
    e.preventDefault();
    //var isEmpty = false;
    $(':input:not(button)').each(function () {
        if ($(this).val() === "") {
            var error_text = $('#dialog p').text("All fields are required");
            $('#dialog').html(error_text);
            $('#dialog').dialog('option', 'title', 'Error').dialog('open');
            return false;
        }
        else {
            $('#dialog_confirm').dialog('open');
        }
    });

    $('#confirm_button').click(function() {
        console.log("Not Empty");
        $.ajax({
            url: "check-domain-remove.php",
            type: "post",
            dataType: 'json',
            data: $('#remove_domain_form').serialize(),
            success: function (response) {
                if (response === "Success") {
                    //DO OTHER STUFF
                    var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                    $('body').append(success_div);
                }
            }

        });
    });
});
0 голосов
/ 22 мая 2018

Это может быть связано с отсутствием элемента при загрузке jQuery.Попробуйте изменить свой код на это: 

$(document).on('submit', '#remove_domain_form', function (e) {...})
...