javascript - How can I electively ignore a knockout 'submit' binding? -
i have form knockout binding data-bind="submit: saveprofilechanges". viewmodel function saveprofilechanges calls following new code:
dataaccess.submitjsonwithfilerequestjquerywitherrorfunction = function () { function uploadimagecomplete() { // hanlde response image post. } $("#upload_iframe").load(function() { uploadimagecomplete(); }); $("#userprofileform").submit(); }; i have added code allow pseudo-ajax image upload ie9, using iframe fallback. have tried jquery plugins upload without success , decided plain , simple approach less risky , minimise impact on loads of functionality not aware of.
the problem submit call in upload method triggers ko bound saveprofilechanges, calls upload function again, ad-nauseum. there way can ignore ko binding local call submit? less savouryu alternative set flag in viewmodel while busy doing upload, saveprofilechanges return without doing further, until upload finishes.
this jquery issue rather ko. change submission call to:
$("#userprofileform")[0].submit(); // change -----------^^^ e.g., call form element's submit rather jquery's. form element's function won't fire submit event again, jquery's will.
i take form submission happening after asynchronous task (like uploading file), since otherwise you'd want have saveprofilechanges return true tell ko allow default action (since ko default automatically preventing submission).
here's demonstration of issue using jquery's submit: live copy
<!doctype html> <html> <head> <meta charset="utf-8"> <title>example</title> </head> <body> <form action="http://google.com/search"> <input type="text" name="q" value="kittens"> <input type="submit" value="send"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> (function() { var counter = 0; // hook handler form's submit event. note ko // use jquery if jquery on page, we'll // via jquery $("form").on("submit", function(e) { var form = this; // note got event ++counter; display("submit event received, counter = " + counter); // simulate asynchronous task settimeout(function() { // limit number of times we'll re-fire if (counter < 3) { alert("submitting form using jquery's submit function (counter = " + counter + ")"); $(form).submit(); } else { alert("but we'll submit directly, not through jquery"); form.submit(); } }, 10); // default, ko prevent default, e.preventdefault(); }); function display(msg) { $("<p>").html(string(msg)).appendto(document.body); } })(); </script> </body> </html> 
Comments
Post a Comment