Javascript 'onbeforeunload()' ne fonctionne pas avec un appel de fonction

Question

J'ai ce script ci-dessous qui est utilisé dans un sondage. Le problème que j'ai, onbeforeunload() fonctionne quand je n'appelle pas une fonction à l'intérieur. Si je fais une fonction appel (save_survey() ou fetch_demographics()) à l'intérieur, le navigateur ou l'onglet se ferme sans aucune invite.

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

J'ai vérifié si ces fonctions ont un problème, mais ils fonctionnent très bien quand je les appelle de différentes parties du code. Plus tard, j'ai pensé que c'était peut-être à cause d'une fonction inaccessible, mais ce n'est pas le cas. J'ai essayé de déplacer le onbeforeunload() à la fin du script et le problème persiste toujours. Vous vous demandez pourquoi cela arrive, quelqu'un peut-il m'éclairer?

Answer 1

J'ai identifié l'origine du problème. J'utilise json_encode au lieu de JSON.stringify et donc il plante (que j'ai trouvé et changé déjà dans sf = 1 case). Cette astuce avec le débogueur est inestimable. En outre, son fonctionnement fonctionne même sans async: false.

Encore merci @AdrianoRepetti!