等待基于模态的响应执行ajax请求(Wait to execute ajax request based on response from modal)

等待基于模态的响应执行ajax请求(Wait to execute ajax request based on response from modal)

我希望使用来自模式弹出窗口的响应来中断ajax请求，然后执行它或基于该响应将其中止。

我已经让beforeSend正常启动，但是在我可以使用模态的用户输入做任何事情之前，ajax请求仍然执行。

理想情况下，ajax请求不会触发，直到confirmResubmit返回值。

我知道我可能需要使用ajax.abort(); 要实际停止请求，但我不确定如何在此上下文中实现它。

我意识到我在问如何让AJAX同步执行......是否有办法做我想做的事情？ 还是我在错误的轨道上？

function readyMyForm() { $("#my_button").submit(function(event){ // prevent html submission event.preventDefault(); // start the spinner spinner.spin(document.getElementById("spinner")); var myAjaxRequest = $.ajax({ beforeSend: confirmResubmit(), dataType: "json", url: $(this).attr('action'), method: $(this).attr('method'), data: $(this).serialize(), timeout: 15000 }); myAjaxRequest.done(function(data) { if (data.errors) { // handle rescued ruby errors displayErrors(data.errors); } else { updateMyPage(data); } }) myAjaxRequest.fail(function(jqXHR, textStatus, data) { // handle AJAX errors displayErrors(textStatus); }) }); }

confirmResubmit()正确地调用confirmResubmit() ，但是在我到达debugger;之前，AJAX请求就会被触发debugger;

function confirmResubmit() { var dataFromPage = $(document.getElementById('where-my-data-lives'))[0].dataset.dataIWant; if (dataFromPage != null && dataFromPage != "") { var confirm = $('#confirmation_modal').foundation('reveal', 'open'); debugger; // do something with returned value from confirm }; }

从模态获得响应是微不足道的，但这里是JS的完整性

$('#confirm_resubmit').click(function() { $('#confirmation_modal').foundation('reveal', 'close'); true; }); $('#cancel_resubmit').click(function() { $('#confirmation_modal').foundation('reveal', 'close'); false; });

I'd like to use the response from a modal popup to interrupt an ajax request, and then either perform it or abort it based on that response.

I've got the beforeSend to fire properly, but the ajax request executes anyway before I can do anything with the user input from the modal.

Ideally the ajax request wouldn't fire until a value comes back from confirmResubmit.

I understand that I probably need to use ajax.abort(); to actually stop the request, but I'm not sure how to implement it in this context.

I realize that I'm asking how to get AJAX to perform synchronously... is there a way to do what I'd like to do? Or am I on the wrong track?

function readyMyForm() { $("#my_button").submit(function(event){ // prevent html submission event.preventDefault(); // start the spinner spinner.spin(document.getElementById("spinner")); var myAjaxRequest = $.ajax({ beforeSend: confirmResubmit(), dataType: "json", url: $(this).attr('action'), method: $(this).attr('method'), data: $(this).serialize(), timeout: 15000 }); myAjaxRequest.done(function(data) { if (data.errors) { // handle rescued ruby errors displayErrors(data.errors); } else { updateMyPage(data); } }) myAjaxRequest.fail(function(jqXHR, textStatus, data) { // handle AJAX errors displayErrors(textStatus); }) }); }

The beforeSend works properly to call confirmResubmit(), but the AJAX request fires before I even get to the debugger;

function confirmResubmit() { var dataFromPage = $(document.getElementById('where-my-data-lives'))[0].dataset.dataIWant; if (dataFromPage != null && dataFromPage != "") { var confirm = $('#confirmation_modal').foundation('reveal', 'open'); debugger; // do something with returned value from confirm }; }

Getting the responses out of the modal is trivial, but here's the JS for completeness

$('#confirm_resubmit').click(function() { $('#confirmation_modal').foundation('reveal', 'close'); true; }); $('#cancel_resubmit').click(function() { $('#confirmation_modal').foundation('reveal', 'close'); false; });

最满意答案

所以这是工作的设置 - 以这种方式传递表单属性感觉有点笨拙，但它工作。 真正结束了关于香草JS比AJAX更多。

“如何让AJAX请求等待用户响应？”这个问题的答案？ 不是为了这样做。 不要中断请求，不要使用beforeSend 。 相反，只有在获得我想要的响应后才能调用AJAX请求。

任何尝试将变量传递到弹出窗口上的模式的人都可能会感兴趣。 有一段时间我试图弄清楚如何将formAttributes传递给'#confirmation_modal' 。 我认为答案是针对来自模式内部的数据，而不是试图在通话中传递数据。

function readyMyForm() { $("#my_button").submit(function(event){ // prevent html submission event.preventDefault(); var formAttributes = [$(this).attr('action'), $(this).attr('method'), $(this).serialize()] var dataFromPage = $(document.getElementById('where-my-data-lives'))[0].dataset.dataIWant; if (dataFromPage != null && dataFromPage != "") { var confirm = $('#confirmation_modal').foundation('reveal', 'open'); } else { // submit AJAX without confirmation if no data already present runMyRequest(formAttributes); }; }); }

提取AJAX功能

function runMyRequest(formAttributes) { // start the spinner spinner.spin(document.getElementById("spinner")); // form attr passed from caller var myAjaxRequest = $.ajax({ dataType: "json", url: formAttributes[0], method: formAttributes[1], data: formAttributes[2], timeout: 15000 }); myAjaxRequest.done(function(data) { if (data.errors) { // handle rescued ruby errors displayErrors(data.errors); } else { updatePageData(data); } }); myAjaxRequest.fail(function(jqXHR, textStatus, data) { // handle AJAX errors displayErrors(textStatus); }); }

更新处理程序

$('#confirm_resubmit').click(function() { // submit AJAX on confirmation var formAttributes = [$('#my_form_id').attr('action'), $('#my_form_id').attr('method'), $('#my_form_id').serialize()]; $('#confirmation_modal').foundation('reveal', 'close'); runMyRequest(formAttributes); });

So this is the setup that worked - passing the form attributes this way feels a little clunky, but it works. Really ended up being about vanilla JS more than AJAX.

The answer to the question 'how do I make the AJAX request wait for a response from the user?' was not to do it. Don't interrupt the request, don't use beforeSend. Instead, only call the AJAX request after I have the response I want.

This might also be of interest to anyone trying to pass variables into a modal on popup. For a while I was trying to figure out how to pass formAttributes into '#confirmation_modal'. I think the answer is to target the data from inside the modal instead of trying to pass it in on the call.

function readyMyForm() { $("#my_button").submit(function(event){ // prevent html submission event.preventDefault(); var formAttributes = [$(this).attr('action'), $(this).attr('method'), $(this).serialize()] var dataFromPage = $(document.getElementById('where-my-data-lives'))[0].dataset.dataIWant; if (dataFromPage != null && dataFromPage != "") { var confirm = $('#confirmation_modal').foundation('reveal', 'open'); } else { // submit AJAX without confirmation if no data already present runMyRequest(formAttributes); }; }); }

extracted AJAX function

function runMyRequest(formAttributes) { // start the spinner spinner.spin(document.getElementById("spinner")); // form attr passed from caller var myAjaxRequest = $.ajax({ dataType: "json", url: formAttributes[0], method: formAttributes[1], data: formAttributes[2], timeout: 15000 }); myAjaxRequest.done(function(data) { if (data.errors) { // handle rescued ruby errors displayErrors(data.errors); } else { updatePageData(data); } }); myAjaxRequest.fail(function(jqXHR, textStatus, data) { // handle AJAX errors displayErrors(textStatus); }); }

updated handler

$('#confirm_resubmit').click(function() { // submit AJAX on confirmation var formAttributes = [$('#my_form_id').attr('action'), $('#my_form_id').attr('method'), $('#my_form_id').serialize()]; $('#confirmation_modal').foundation('reveal', 'close'); runMyRequest(formAttributes); });