Плагин формы JQuery - запрос подтверждения пользователя перед отправкой формы? - PullRequest
Новая
       0

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

0 голосов
/ 03 декабря 2010

Мы используем форму JQuery плагин для заполнения наших форм: 

    var options = {
            dataType: 'json',
            beforeSubmit:  createposPreSubmit,
            success:       createposPostSubmit,
            error: function(xhr) { handleError(xhr, 'Error in Create Pos grid form submission'); }
    };

    $('#form-createpos').ajaxForm(options);

Мы хотим отобразить запрос подтверждения продолжения / отмены с помощью метода dialog пользовательского интерфейса JQuery перед формойотправляется.

Проблема в dialog асинхронна, поэтому мы не можем дождаться ответа пользователя.Так что мы возвращаемся false из beforeSubmit.Но я не могу понять, как вызвать отправку формы, если пользователь решит продолжить:

Это кнопки в нашем модальном диалоге: 

function createposPreSubmit(formData, jqForm, options) {

...

var buttons = {
    "Continue": function () {
        $(this).dialog("close");
        //HOW CAN WE SUBMIT FORM??  
        disableSubmit($("#submit-createpos"));
    },
    "Cancel": function() {
        $(this).dialog("close");
    }
};

//Show dialog

//Always return false
return false;
}

В функции кнопки Продолжить jqForm.submit и jqForm[0] не работают должным образом.jqForm[0] кажется, что отправляет форму, но браузер действует "странным" образом.

??

Ответы [ 2 ]

1 голос
/ 03 декабря 2010

Если я правильно понимаю, вы хотите «предварительно отправить» свою форму, чтобы, когда они примут, надеюсь, больше не нужно было выполнять какую-либо работу, или, в худшем случае, им просто придется подождать, пока не закончится текущий запрос.,

Я бы порекомендовал вам использовать глобальную переменную, изначально равную null, и пометить ее как true, когда они «отправят».Когда вы получаете обратный вызов от «pre-submit», проверьте состояние глобальной переменной.Если это правда, приступайте к представлению.Если это ложь, ничего не делай.Если он нулевой, это означает, что обратный вызов завершен ДО того, как они закроют диалоговое окно, что означает, что вам потребуется вторая глобальная переменная, изначально нулевая, которую вы можете установить в true в таком случае, чтобы, если вы обнаружили, что она истинна в вашем «Продолжить'действие кнопки, вы бы знали, что нужно действовать немедленно, а не ждать.

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

var ajaxPreSubmitOk = null;
var dialogSubmitOk = null;
var buttons = {
    "Continue": function () {
        $(this).dialog("close");
        dialogSubmitOk = true;
        if(ajaxPreSubmitOk !== null && ajaxPreSubmitOk) {
            // Presubmit returned and everything is ok.. proceed!
            callSubmit();
        } else if (ajaxPreSubmitOk === null) {
            // Gotta wait still
            disableSubmit($("#submit-createpos"));
        }
    },
    "Cancel": function() {
        // Regardless of presubmit outcome, do nothing
        dialogSubmitOk = false;
        $(this).dialog("close");
    }
};

function ajaxFormCallback() {
    // If callback success 
    if(true) {
        ajaxPreSubmitOk = true;
        if(dialogSubmitOk !== null && dialogSubmitOk) {
            // User already clicked continue.  We're good!
            callSubmit();
        }
    // else callback fail
    } else {
        // Regardless of outcome, do nothing
        ajaxPreSubmitOk = false;
    } 
}

function callSubmit() {
    enableSubmit($("#submit-createpos"));
    ajaxPreSubmitOk = null;
    dialogSubmitOk = null;

    // What do do when everything goes as planned
}
0 голосов
/ 03 декабря 2010

Я закончил тем, что использовал этот подход: 

$('#form-createpos').submit(function() {
    var options = {
        success: myfunc //WE DON'T NEED A PRESUBMIT HANDLER
    };

    var buttons = {
        "Continue": function () {
            $(this).dialog("close");
            theForm.ajaxSubmit(options);  //MANUALLY SUBMIT FORM 
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    };

    //Show JQuery dialog
});
...