Как предотвратить повторную попытку браузеров с запросами POST (и проверить подключение к Интернету)?

Question

У меня есть сайт, предназначенный для мобильных пользователей, который будет проверять подключение для каждого запроса POST. Если подключение к Интернету отсутствует, я вывешу сообщение об ошибке для пользователя. Кроме того, я хотел бы иметь эффект перехода, указывающий, что форма отправляется.

У меня есть следующий код:

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 immediately to 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; 
    } 
}); 

где hostReachable() функция для проверки связи с использованием запроса XHR.

Проблема теперь после thisform.submit(); Событие отправки формы, похоже, не срабатывает снова. Таким образом, код внутри if (progress === 1) никогда не запускается.

Что случилось с моим кодом? Благодаря!

Answer 1

thisform.submit() не будет запускать обработчик события отправки формы, потому что, если вы думаете об этом, это будет бесконечный цикл. Что вам нужно сделать, это программно нажать кнопку, чтобы вызвать событие отправки формы.

$('#submit-button').trigger('click'); 

Демо:

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 immediately to 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>