CODEWITHSUNDEEP
javascriptjqueryhyperlinkpopuponbeforeunload
Techy
Techy

Reputation: 2654

Issue in clicking links with window.onbeforeunload

I have a parent div content_div which contain form elements inside a table where user selects multiple row elements(clickable rows),download link elements etc.

I have a warning pop up for the user changes done and then try to refresh without clicking save button.

When I select a row and tried to click a download link inside that row,I dont need to show the warning popup.I have the following code but its not working.

If I dont select any rows and tried to click any download links,its not showing any popup,means thats fine.

If I select any rows and then try to click any download links,its showing me the popup which is wrong in my case.

If a user clicks on some other links outside my #content_div,its showing the popup which is true for me.

$(function() {
  var formmodified = 0;

  //click event for each row inside the table
  $(".course_row").click(function(e) {
    -- -- -
    formmodified = 1; //setting the variable to 1 means user 
    has changed something inside the page
  });
  //when form submits 
  $("#submit").click(function() {
    formmodified = 0; //assuming that form is saved after form change
  });
  //function for warning popup
  window.onbeforeunload = confirmExit;

  function confirmExit() {
    var element_clicked = 0;
    //#content_div is the main parent which contain the entire
    contents.

    $('#content_div').children().on('click', function(e) {
      console.log('clicked');
      element_clicked = 1; //means the clicked element is inside the #content_div which can be a link or other things

    });
    console.log(element_clicked);
    EDIT: I am always getting element_clicked value as 0 when I click any element inside the div.The value 'clicked'
    is showing.I dont know why the value
    for the variable is not setting to 1


    if (element_clicked) {
      //element_clicked = false;  
      return; // abort beforeunload
    } else {
      if ((!element_clicked) && (formmodified == 1)) {
        return "The selected courses are not saved.
        Do you wish to leave the page ? ";
      }

    }

  }
});

Please help me in this case.Thanks in advance

Upvotes: 0

Views: 1434

Answers (1)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

Just add click() event to anchor elements and unbind onbeforeunload event.

$("a").on('click', function() {
  window.onbeforeunload = null;
});

This is just an example. You can add a class or id to the selector so that the event is unbinded only when clicked on a specific anchor tag.

For example

$("#content_div a").on('click', function() {
  window.onbeforeunload = null;
});

EDIT

If you want to add onbeforeunload to refresh, you either have to do it when any change is trriggered ir just add event when F5 button is pressed.

To be honest I think that first solution is better, necause then even if user clicks refresh button in a browser the popup will come out.

So you would have to change your functionality.

If you do not want to. Here is a quick add to F5 button.

$(document.body).on("keydown", this, function (event) {
    if (event.keyCode == 116) {
        window.onbeforeunload = true;
    }
});

Upvotes: 1

Related Questions