Как проверить, была ли запущена функция jQuery

Question

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

Ниже приведен код, отображающий предупреждающее сообщение.

jQuery(window).bind('beforeunload', function (e) { 

    var message = "You have attempted to leave this page. Your information will be lost. Please submit before exiting the page. Are you sure you want to exit this page?"; 
    e.returnValue = message; 
    return message; 

});

И это моя функция экономии

save: function (e) { 
     e.preventDefault(); 

     var that = this; 

     that.Height = that.HeightFeet * 12 + that.HeightInches; 
     that.UrinationFrequencyMinutes = that.UrinationFrequencyHours * 60 + that.UrinationFrequencyMins; 

     var modelData = kendo.stringify(that); 

     $.ajax({ 
      type: "POST", 
      url: constants.serviceUrl + "Form/Create/", 
      data: modelData, 
      dataType: "json", 
      contentType: "application/json; charset=utf8", 
      beforeSend: function (xhr) { 
       $("#loadingBackground").show(); 
       $("#loaderContainer").show(); 
      } 
     }) 
     .success(function (e) { 
      var test = e; 
      that.set("SaveCompleted", true); 
      that.set("SaveSucceeded", true); 
     }) 
     .fail(function (e) { 
      var test = e; 
      that.set("SaveCompleted", true); 
      that.set("SaveSucceeded", false); 
     }) 
     .done(function (e) { 
      var test = e; 
      $("#loadingBackground").hide(); 
      $("#loaderContainer").hide(); 
     }); 

    }, 

Помощь оценили! :)

Answer 1

Установить глобальную переменную is_saved истину при сохранении успеха и вернуть его к ложному, как только вы что-то изменить в форме.

Таким образом, вы можете проверить, сохранена ли информация уже.

Answer 2

Когда пользователь сохраняет форму, поместите переменную 'saved' в 'true' и проверьте эту переменную перед отображением сообщения об ошибке.

Answer 3

Вам нужен какой-то грязный флаг (и проверьте его onbeforeunload).

очень простой пример:

(function(window,$,undefined){ 
 
    var hasUnsavedChanges = false, 
 
     $form = $('form'), 
 
     $status = $('#form-status'); 
 
    
 
    $form.find(':input').on('keypress change',function(){ 
 
    hasUnsavedChanges = true; 
 
    $status.text('Unsaved Changes'); 
 
    }).end() 
 
    .on('submit',function(){ 
 
    hasUnsavedChanges = false; 
 
    $status.text('Changes Saved.'); 
 
    return false; 
 
    }); 
 
    $(window).on('beforeunload',function(){ 
 
    if (hasUnsavedChanges){ 
 
     return 'Save your work first!' 
 
    } 
 
    }); 
 
})(window,jQuery);

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-8"> 
 
    <h3>Your Profile</h3> 
 
    <form> 
 
     <div class="form-group"> 
 
     <label for="name">Name</label> 
 
     <input type="text" class="form-control" placeholder="Your name"/> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="email">Email Address</label> 
 
     <input type="email" class="form-control" placeholder="Your Email"/> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Save</button> 
 
     <span id="form-status"></span> 
 
    </form> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <h4>Favorite Links</h4> 
 
    <ul class="list-group"> 
 
     <li class="list-group-item"> 
 
     <a href="http://StackOverflow.com/">StackOverflow</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 4

Самое простое решение - установить переменную, что-то вроде isSaved, на true, когда они сохраняются, а затем проверьте это, прежде чем отображать предупреждение.

Лучше способом было бы также проверить, было ли изменено какое-либо из полей формы, чтобы вы не запрашивали пользователя, чтобы сохранить, когда ничего не изменилось (тратите туда и обратно на сервер/базу данных только для сохранения точно такая же запись). Вы можете сделать это, кэшируя значения каждого поля формы в $ (документе) .ready(). Затем, в preunload, помимо проверки isSaved, вы можете проверить отдельные значения полей формы, чтобы узнать, отличаются ли они от кешированных значений.

Answer 5

использовать для varialble как isSaved

jQuery(window).bind('beforeunload', function (e) { 
    if(isSaved){ 
     var message = "You have attempted to leave this page. Your information will be lost. Please submit before exiting the page. Are you sure you want to exit this page?"; 
     e.returnValue = message; 
     return message; 
} 
    });