title: Check if changes saved before unload
body: <p>I have the following JavaScript</p>
  
  <p><strong>EDIT: included assignments for changesSaved</strong></p>
  
  <pre><code> var changesSaved = true;
  
      $(document).ready(function () {
  
          $(".applyChanges").click(function (e) {
              e.preventDefault();
              var id = (this).id;
              var dayofweek = document.getElementById("dayofweek" + id).value;
              var hour = document.getElementById("hour" + id).value;
              var duration = document.getElementById("duration" + id).value;
              $.ajax({
                  url: '@Url.Action("ApplyChanges")',
                  type: 'POST',
                  data: {
                      id: id,
                      dayofweek: dayofweek,
                      hour: hour,
                      duration: duration
                  },
                  success: function (data) {
                      $('#Calendar').fullCalendar('refetchEvents')
                      $('#Calendar2').fullCalendar('refetchEvents')
                      changesSaved = false;
                  }
              });
          });
      });
  
  window.onbeforeunload = function () {
      if (changesSaved == true) {
          return true;
      } else {
          return ("You havent saved your changes. Are you sure you want to leave the page?")
      }
  }
  </code></pre>
  
  <p>but the message is being prompted regardless of what <code>changesSaved</code> is set too.</p>
  
  <p>What actually I actually get is the following:</p>
  
  <p><img src="https://i.stack.imgur.com/zUIfh.png" alt="enter image description here"></p>
  
  <p>or if <code>changesSaved</code> is set to false it says false instead. </p>
  
  <p>Can I not do this ?</p>