StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUsing jQuery deferred to submit form only if a series of processes pass
text
Body
copied!<p>Firstly, I admit that getting a hold over deferred pipe API has been the most challenging things to me recently.</p> <p><strong>Requirement</strong></p> <p>I would like to submit a form if a series of checks pass. </p> <ul> <li><p>Some of them would be functions with synchronous client side validations and some would be asynchronous checks which do an AJAX call. The asynchronous functions return a boolean callback value.</p></li> <li><p>Both the synchronous and async functions may have <code>confirm()</code> prompts to take user input. The user input will decide whether the next block will execute or not (if user opts cancel for a confirm dialog, next block should not proceed) and hence the form should not get submitted. <em>This is very important.</em></p></li> <li><p>The form should only be submitted if all the individual blocks return (or callback) true.</p></li> </ul> <p><em>Added later</em> - The asynchronous functions may contain the ajax calls inside some conditions, hence in some use cases, the ajax call may not be done.</p> <ul> <li>Inside the asynchronous functions, there could be user confirmation check inside the AJAX response handling code.</li> </ul> <p><strong>Following are the structures of my functions -</strong> </p> <pre><code>function synchronousMethod() { //some logic return (confirm("user input")); } function aSynchronousMethod1(callback) { if(condition) { //ajax call callback(bool); //does callback true/false } else {//some use cases may follow this path and not make the AJAX call at all. return true; } } </code></pre> <p><strong>Following is one of my trials with $.Deferred (may be I am doing it completely wrong)-</strong> </p> <pre><code>$.when( synchronousMethod(), aSynchronousMethod1(),aSynchronousMethod2()) .done(function() { //I want to submit my form if all the functions returned/called-back true console.log("submitting form"); }) .fail(function() { console.log( 'I fire if one or more requests failed.' ); }); </code></pre> <p>But the text "submitting form" executes before the completion of the asynchronous function and the anychronous functions also cause this error <code>TypeError: callback is not a function</code>.</p> <p>I observed that none of the functions execute if I don't put the brackets after the function calls inside the <code>$.when</code>, i.e. if I keep it like this - </p> <p><code>$.when( synchronousMethod, aSynchronousMethod1,aSynchronousMethod2)</code> But none of the functions execute.</p> <p><strong>Update</strong></p> <p><em>Another approach</em> </p> <p>I also tried something like this, but had similar issues as with the first approach - </p> <pre><code>var promise = defer.pipe(synchronousMethod); promise = promise.pipe(aSynchronousMethod1); promise = promise.pipe(aSynchronousMethod2); promise = promise.pipe($("form#frmCampaigns").submit()); </code></pre> <p><strong>Update 2</strong> Added two more points - </p> <ul> <li><p>The asynchronous functions may contain the ajax calls inside some conditions, hence in some use cases, the ajax call may not be done.</p></li> <li><p>Inside the asynchronous functions, there could be user confirmation check inside the AJAX response handling code.</p></li> </ul> <p>Updated structure of asynchronous function - </p> <pre><code>function aSynchronousMethod1(callback) { //some sync logic here if(condition) /*some condition*/ { //ajax call if(ajax sucess response) { callback((confirm("If user accepts")); } else { callback(false); } } else {//some use cases may follow this path and not make the AJAX call at all. callback(true); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload