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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -