Javascript 'onbeforeunload()' not working with a function call

Question

I have this script below which is used in a survey. The problem I have is, onbeforeunload() works when I don't call a function inside it. If I make any function call(save_survey() or fetch_demographics()) inside it, the browser or the tab closes without any prompt.

  <script type="text/javascript">

  $(document).ready(function() {

  $('#select_message').hide();    
  startTime = new Date().getTime();
  });

  loc = 0;
  block_size = {{ block_size }};
  sid = {{ sid }};
  survey  = {{ survey|tojson }}; 
  survey_choices = '';
  startTime = 0;
  demographics_content = {};

 function save_survey(sf)
  {       
      var timeSpentMilliseconds = new Date().getTime() - startTime;
      var t = timeSpentMilliseconds / 1000 / 60;
      var surveydat = '';
          if(sf==1)
          { //Success
              surveydat = 'sid='+sid+'&dem='+JSON.stringify(demographics_content)+'&loc='+loc+'&t='+t+'&survey_choice='+JSON.stringify(survey_choices);
          }
          if(sf==0)
          { //Fail
              surveydat = 'sid='+sid+'&dem='+json_encode(demographics_content)+'&loc='+loc+'&t='+t+'&survey_choice='+json_encode(survey_choices);
          }
          //Survey Save Call
          $.ajax({
          type: 'POST',
          url: '/save_surveyresponse/'+sf,
          data: surveydat,
          beforeSend:function(){
              // this is where we append a loading image
              $('#survey_holder').html('<div class="loading"><img src="/static/img/loading.gif" alt="Loading..." /></div>');
            },
          success:function(data){
              // successful request; do something with the data
              $('#ajax-panel').empty();
              $('#survey_holder').html('Success');
              alert("Dev Alert: All surveys are over! Saving data now...");
              window.location.replace('http://localhost:5000/surveys/thankyou');
            },
          error:function(){
              // failed request; give feedback to user
              $('#survey_holder').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
            }
          });


  }

  function verify_captcha()
  {
     // alert($('#g-recaptcha-response').html());
  }

  function block_by_block()
  {
      var div_content ='<table border="0" cellspacing="10" class="table-condensed"><tr>';
      var ii=0;
      var block = survey[loc];
      var temp_array = block.split("::");
      if(loc>=1)
      {
          var radio_val = $('input[name=block_child'+(loc-1)+']:checked', '#listform').val();
          //console.log(radio_val);
          if(radio_val!=undefined)
              survey_choices += radio_val +'\t';
          else
              {
                  alert("Please select one of the choices");
                  loc--;
                  return false;
              }

      }
      for(ii=0;ii<block_size;ii++)
      {
          //Chop the strings and change the div content
          div_content+="<td>" + temp_array[ii]+"</td>";
          div_content+="<td>" + ' <label class="btn btn-default"><input type="radio"  id = "block_child'+loc+'" name="block_child'+loc+'" value="'+temp_array[ii]+'"></label></td>';
          div_content+="</tr><tr>";
      }

      div_content+='<tr><td><input type="button" class="btn" value="Next" onClick="survey_handle()"></td><td>';
      div_content+='<input type="button" class="btn" value="Quit" onClick="quit_survey()"></td></tr>';
      div_content+="</table></br>";
      $("#survey_holder").html(div_content);

      //return Success;
  }

  function updateProgress()
  {

          var progress = (loc/survey.length)*100;
          $('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);
          $("#active-bar").html(Math.ceil(progress));
 }


  function survey_handle()
  {

      if(loc==0)
      {
          verify_captcha();
          $("#message").hide();
          //Save the participant data and start showing survey
          fetch_demographics(); 
          block_by_block();
          updateProgress();
          $('#select_message').show();    
      }
      else if(loc<survey.length)
      {
        block_by_block();
        updateProgress();
      }

      else if(loc == survey.length)
      {
          //Save your data and show final page
          $('#select_message').hide();    
          survey_choices += $('input[name=block_child'+(loc-1)+']:checked', '#listform').val()+'\t';
          //alert(survey_choices);
          //Great way to call AJAX
          save_survey(1);
      }
      loc++;
      return false;
  }
  </script>
  <script type="text/javascript">
      window.onbeforeunload = function() {
      var timeSpentMilliseconds = new Date().getTime() - startTime;
      var t = timeSpentMilliseconds / 1000 / 60;
      //fetch_demographics();
      save_survey(0);
      return "You have spent "+Math.ceil(t)+ " minute/s on the survey!"; 
      //!!delete last inserted element if not quit

  }
  </script>

I have checked whether those functions have any problem but they work fine when I call them from different part of the code. Later, I thought it might be because of unreachable function scope but its not the case. I have tried moving the onbeforeunload() at the end of script and the problem still persists. Wondering why this is happening, can anyone enlighten me?

Answer 1

I identified where the problem was. I am using json_encode instead of JSON.stringify and hence it is crashing(which I found and changed already in sf=1 case). That tip with debugger is invaluable. Also, its working fine even without async: false.

Thank you again @AdrianoRepetti!