javascript - How to prevent browsers from retrying failed POST requests (and check for internet connectivity)? -
i have site intended mobile users check connectivity every post requests. if there no internet connectivity, prompt out error message user. also, have transition effect indicating form being submitted.
i have following code:
var progress = 0; $('div').on('submit', 'form', function (e) { var thisform = this; if (progress === 1) { // check internet connection var connection = hostreachable(); if (!connection) { alert('no connection'); settimeout(function () { // re-allow submission after 8000 ms (not avoid browser retry) progress = 0; }, 8000); return false; } return true; } e.preventdefault(); e.stoppropagation(); if (progress === 0) { // first submit // updated progress value progress = 1; //form transition $('.spinner').show('fast', function () { $('.pagecontent').fadeout('fast'); thisform.submit(); }); } else { // prevent submit retries when no connectivity return false; } });
where hostreachable()
function checking connectivity using xhr request.
the problem after thisform.submit();
form submission event seems not triggered again. code inside if (progress === 1)
never run.
what's wrong code? thanks!
thisform.submit()
not trigger form submit event handler because if think it'll infinite loop. have programmatically click button trigger form submit event.
$('#submit-button').trigger('click');
demo:
var progress = 0; $('div').on('submit', 'form', function (e) { var thisform = this; if (progress === 1) { // check internet connection var connection = hostreachable(); if (!connection) { alert('no connection'); settimeout(function () { // re-allow submission after 8000 ms (not avoid browser retry) progress = 0; }, 8000); return false; } return true; } e.preventdefault(); e.stoppropagation(); if (progress === 0) { // first submit // updated progress value progress = 1; //form transition $('.spinner').show('fast', function () { $('.pagecontent').fadeout('fast'); $('#submit-button').trigger('click'); }); } else { // prevent submit retries when no connectivity return false; } }); function hostreachable() {}
.spinner { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form> <div class="spinner">loading</div> <input type="submit" value="submit" id="submit-button"/> </form> </div>
Comments
Post a Comment