CODEWITHSUNDEEP
javascriptjqueryajax
HereToLearn_
HereToLearn_

Reputation: 1190

How to check if a function was fired jquery

I have a warning message in my project where we warn the end user if they are closing the window before saving the form they are filling out. It works fine but it is also firing even when they saved the form and try to exit out. I want this warning message to only pop up if users try to exit out before saving the form. How do I go about it ?

Below is the code which pops up the warning message. 

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;

});

And this is my save function

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();
        });

    },

Help appreciated! :)

Upvotes: 0

Views: 202

Answers (5)

Brad Christie
Brad Christie

Reputation: 101604

You need some kind of dirty flag (and check against it onbeforeunload).

A VERY basic example:

(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>

Upvotes: 1

Anup Singh
Anup Singh

Reputation: 1563

USE a varialble for like 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;
}
    });

Upvotes: 0

dmeglio
dmeglio

Reputation: 2830

The easiest solution is to set a variable, something like isSaved to true when they save, then check that before displaying the warning.

The better way would be to also check if any of the form fields have been modified so you don't prompt a user to save when nothing has changed (wasting a round trip to the server/database only to save the exact same record). You can do that by caching the values of each form field in your $(document).ready(). Then, in the beforeunload, in addition to checking isSaved, you can check the individual values of the form fields to see if they differ from the cached values.

Upvotes: 0

Sylver
Sylver

Reputation: 8967

Set a global variable is_saved to true on save success and revert it to false as soon as you change something in the form.

That way you can check if the information have been saved already.

Upvotes: 1

Shilly
Shilly

Reputation: 8589

When the user saves the form, put a variable 'saved' to 'true', and check for this variable before showing the error message.

Upvotes: 1

Related Questions