Even i click Stay on Page, event fire window.beforeunload

Question

$(window).bind('beforeunload', function() {

    return "Content will be deleted";
    Cookies.remove('title');
    Cookies.remove('description');
    Cookies.remove('imageCollection');
    Cookies.remove('imageIdCollection');

     $.ajax({
       url: "<?php echo base_url(); ?>myController/myFunction",
       type:'POST',
             }).done(function (data){
                 $("#display").html(data);
                 $('#loadingmessage').hide();

             });

         });

When i navigate to another page it show alert "Leave Page" or "Stay On Page" and ajax function fire whether i click stay on page.

How can i stop further function if user click "Stay On Page".

I want to call this method if user click Leave Page:

    Cookies.remove('title');
    Cookies.remove('description');
    Cookies.remove('imageCollection');
    Cookies.remove('imageIdCollection');

     $.ajax({
       url: "<?php echo base_url(); ?>myController/myFunction",
       type:'POST',
             }).done(function (data){
                 $("#display").html(data);
                 $('#loadingmessage').hide();

             });

Is there is any event to handle "Stay On Page" and "Leave Page" button.

Answer 1

your code is an unreachable and will throw error on console.

 Cookies.remove('title');
Cookies.remove('description');
Cookies.remove('imageCollection');
Cookies.remove('imageIdCollection');

 $.ajax({
   url: "<?php echo base_url(); ?>myController/myFunction",
   type:'POST',
         }).done(function (data){
             $("#display").html(data);
             $('#loadingmessage').hide();

         });

     });

you should move this code to be bound to "unload" event instead of beforeunload.

$(window).bind('beforeunload', function() {

return "Content will be deleted";
});

$(window).bind('unload', function() {
       Cookies.remove('title');
       Cookies.remove('description');
       Cookies.remove('imageCollection');
       Cookies.remove('imageIdCollection');

 $.ajax({
   url: "<?php echo base_url(); ?>myController/myFunction",
   type:'POST',
         }).done(function (data){
             $("#display").html(data);
             $('#loadingmessage').hide();

         });


});

This should work for you.

Answer 2

You can reference follow code:

var timeout;

function leavePage() {
    timeout = setTimeout(function() {
        Cookies.remove('title');
        Cookies.remove('description');
        Cookies.remove('imageCollection');
        Cookies.remove('imageIdCollection');

        $.ajax({
          url: "<?php echo base_url(); ?>myController/myFunction",
          type:'POST',
        }).done(function (data){
          $("#display").html(data);
          $('#loadingmessage').hide();
        });
    }, 1000);
    return "You are leaving the page";
}

function clear() {
    clearTimeout(timeout);
}

window.onbeforeunload = leavePage;
window.unload = clear;​