jQuery .unload() function issue, activating only when a specific link is clicked

Question

I'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).

The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.

My solution is to use a jQuery unload event. I placed this in a .js file:

$( window ).unload(function() {
  alert( "Bye now!" );
});

But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?

--Update-- Here is the JSFiddle Link to JSFiddle

So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.

--Update 2-- Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page. Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked. Here is the code i used:

$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })

Check here for your answer http://stackoverflow.com/questions/9973816/why-is-jquery-unload-not-working-in-chrome-and-safari — Freez, Dec 12 '14 at 00:16

Ahuman · Accepted Answer · 2014-12-12T14:16:52.450

0

I am really not sure if your approach is right for the given problem.

About activating the window unload event conditionally,

move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!

Update:

Something like below. For illustration purpose only.

Warning: I feel there is a smell in this approach.

$(".link").click(function(){
   if(true){//Your condition check goes here.

      $( window ).unload(function() {
        alert( "Bye now!" );
       });
    }
    else{
        window.location.href = "someurl";
    }
});

edited Dec 12 '14 at 14:16

answered Dec 12 '14 at 00:12

Ahuman

752
6
18

Is there a link to explain how to move the unload event hookup inside a click event for a particular link? Thank you for the help. – Fabian Dec 12 '14 at 07:50
Excellent! What I was looking for! However, I have one final question. I implemented the code and a pop up appears for users who don't have access to the link, but when they click the OK button or exit the popup, they are still forwarded to the error page. Is there anyway to disable that? I tried updating the unload function with this code, and it works, but the pop up also activates when a user tries to close the page. Just want it to trigger when the link is clicked. $(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; }); – Fabian Dec 12 '14 at 17:54
First of all, I am not sure how AJAX call would redirect you to a error page. If at all, it should return you a error view from the server. If you can fix that, you dont have to worry about window load and unload techniques. IMO, it sound very hackish. Can you make a api call to check if the user has access to a folder and decide what to display to the user? – Ahuman Dec 12 '14 at 21:20
Thank you very much for the help MrGenius. I guess I will have to learn how to make an api call to check if the user has access to a folder and from there have a new display for them as opposed to the error view they are receiving from the server. Thank you so much, that is extremely helpful! – Fabian Dec 15 '14 at 16:25

jQuery .unload() function issue, activating only when a specific link is clicked

1 Answers1