Develop Reference

Control whether a link is clickable or not

I want to control whether a link is clickable or an error should be displayed (Based on result of an ajax call).
<a class="lnkCustomer" href="http://localhost/viewcustomer" target="_blank" data-customerno="237">View</a>
I get to the point where I am able to set the link as "allowed to be clicked":
// Authorized
anchor.data("authorized", true);
However when I run this code, the link still does not open. Ideally once the ajax call is complete, it should invoke the click event. I believe the issue is in this line.
// Trigger Anchor
anchor.click();
This is the entire code:
<script type="text/javascript">
$(".lnkCustomer").click(function(e)
{
var customerNo = $(this).data('customerno');
var anchor = $(this);
// Check for authorized
if (anchor.data("authorized"))
{
return true;
}
$.ajax(
{
url: 'http://localhost/checkcustomer',
type: 'POST',
dataType: 'json',
data: { customerNo: customerNo },
cache: false,
success: function (result)
{
if (result.success)
{
// Authorize
anchor.data("authorized", true);
// Trigger Anchor
anchor.click();
}
else
{
// Show a message in a alert or div
alert('Not authorized');
}
}
});
// Default to false (Do not process anchor)
return false;
});
</script>
Notes: I am using class instead of id in the anchor because I have various links that will trigger this event. However as you can see, this should not be an issue since I am always referring to the individual object:
var anchor = $(this);

You cannot open a new tab without popups enabled or the user's click for that event.
You cannot delay it with promises or invoke a trusted click event.
If you want to verify a user can click your link, then do the API request on page load and store the result.
Or make your link into a button with a two click process for checking and then opening.

There is a simple answer : you can't trigger a click if it doesn't come from a trusted event (change, click, dblclick, mouseup, reset, submit).
Here you are trying to trigger a click after an AJAX (asynchronous) request, which is not allowed.
More info here.
As suggested you could replace it by window.open(href, '_blank'); but beware it could also be blocked by the browser parameters.

Unfortunately, as others mentioned, href cannot be delayed. I did find a work-around to suit the particular scenario. I created an intermediary page when user clicks on the href. This page then performs the ajax request (server side), if it is validated it goes on and display the resource. Otherwise it displays an error and stays on the intermediary page.

Anytime you want to override a browsers default action, you need to call .preventDefault() at the top of the event listener.
After that, since you're server side validating the link every time it's clicked, there's really no reason to store it's state client side. Instead of trying to re-click the link, you could just call window.open(), which is what achors do by default.
$('.lnkCustomer').on('click', function(e) {
e.preventDefault(); //makes anchor click do nothing
let href = this.href;
//pretend this is the call back from your ajax call
//$.ajax(
// success: function(result) {
if (result.success) {
window.open(href, '_blank'); //what an anchor click does when not prevented
} else {
alert('Not authorized');
}
});

Try triggering click like this: anchor[0].click(); and see if that works.
For readability, you can save a reference to DOM element of anchor, not just the jQuery object:
var anchor = $(this);
var anchorEl = $(this)[0];
and trigger click using the DOM element:
anchorEl.click();

I think we cannot overwrite the default behavior of the anchor tag but we can work around it. In this solution, I have replaced href with data-link. And mimic the anchor mechanism with window.open.
Code :
<a class="lnkCustomer" data-link="http://localhost/viewcustomer1" data-customerno="111" data-auth>View</a>
<a class="lnkCustomer" data-link="http://localhost/viewcustomer2" data-customerno="237" data-auth>View</a>
<a class="lnkCustomer" data-link="http://localhost/viewcustomer3" data-customerno="237" data-auth>View</a>
<script type="text/javascript">
$(".lnkCustomer").click(function (e) {
var customerNo = $(this).data('customerno');
var linkToGo = $(this).data('link');
var anchor = $(this);
// Check for authorized
if (anchor.data("authorized")) {
var win = window.open(linkToGo, '_blank');
}else{
$.ajax(
{
url: './checkcustomer.php',
type: 'POST',
data: { customerNo: customerNo },
cache: false,
success: function (result) {
if (result == 'authorized') {
anchor.data("authorized", true);
//new code
anchor.attr("href", linkToGo);
anchor.click();
// Dont us this due to popup blocker
//var win = window.open(linkToGo, '_blank');
}
else {
// Show a message in a alert or div
alert('Not authorized');
}
}
});
}
});
</script>
Please note :
New note for security: As you can see we are using quite a visible data-link and anyone with enough effort can visit the link whether it is authorized or not. If the above answer gets you through the popup blocker, the next few things you can do is maybe only fetch accessible links from the start
OR add a "show links" button and then fetch only accessible links to the user. You can do it via ajax. and also you will not need this JS/Jquery code.
OR assign a random number to data-link and then fetch in your PHP code see if it is authorized if it is then only return accessible HTTP link. many ways to improve.
You can use CSS to style the anchor tags, which I have not in the solution
One method I tried was with use of preventDeault, but it do not work

AFAICT you are 90% of the way there, you're just missing a few key details.
Working JSFiddle.
e.preventDefault(): As already mentioned in other answers/comments, you need to prevent the default action which the event triggers, otherwise the browser will just begin the process of navigating to the link while your JS is still running.
anchor.click() will trigger a click on your link, which will ... start the whole process again! You'll get stuck in a recursive loop. The click is done, you now want to navigate. To open a new window in Javascript, use window.open(href, '_blank');
If your link is already authorised, you need to do the same as if the AJAX authorises it the first time around. Instead of return true;, you need to do the same window.open() again.
Also a suggestion - the convention for using GET or POST is:
use POST when changing data, eg creating a user, or making a purchase, logging in - something which should not happen 2x if you hit reload;
use GET when viewing data, no state changes, no harm in reloading;
AFAICT you are simply querying some customer details, so this should be a GET request.
I've modified you code to work with JSONPlaceholder - a dummy REST API which provides JSON data for this kind of situation (where we need to test an AJAX call with a working response), so we can simulate your AJAX call. It only accepts GET requests, so I've changed your POST to GET, and I've updated the test of the response based on the dummy data it sends back. You can see the output we're working with for User ID 1, and User ID 2.
Since you need to do the "go to the link" chunk of code in more than one place, I extracted that to a function you can call, so we don't need to duplicate that code in several places.
I also added a few extra alerts so you can be sure of what is happening.
See it all in action on JSFiddle.
Javascript:
// A function to actually open the new page, since we need to do this in
// more than one place.
function goToLink(anchor) {
let href=anchor.attr('href');
window.open(href, '_blank');
}
$(".lnkCustomer").click(function(e) {
// Prevent the default action this event would normally trigger from
// happening - in this case, navigating to the target href.
e.preventDefault();
var customerNo = $(this).data('customerno');
var anchor = $(this);
// Check for authorized, and open the link if so
if (anchor.data("authorized")) {
alert("Already authorized, let's go!");
goToLink(anchor);
}
// https://jsonplaceholder.typicode.com/ is a dummy REST JSON generator.
// Let's use it to simulate your AJAX call. User ID 1's username is Bret,
// user ID 2's username is Antonette. Let's use customerNo in the URL to
// retrieve user ID 1 or 2, and simply allow the click if the username is
// Antonette.
// First build the URL:
let url = 'https://jsonplaceholder.typicode.com/users/' + customerNo
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: {
customerNo: customerNo
},
cache: false,
success: function(result) {
if (result.username === 'Antonette') {
// Authorize and go
alert("Authorization success, let's go!");
anchor.data("authorized", true);
goToLink(anchor);
} else {
// Show a message in a alert or div
alert('Not authorized');
}
}
});
// Default to false (Do not process anchor)
return false;
});
HTML:
<ul>
<li><a class="lnkCustomer" href="https://google.com/" target="_blank" data-customerno="1">Google (no go)</a></li>
<li><a class="lnkCustomer" href="https://stackoverflow.com/" target="_blank" data-customerno="2">Stackoverflow (allowed)</a></li>
</ul>

Href to Onclick redirect

I have research this topic through the community, although I cannot find an answer. I am using Bronto's direct add feature (attempting to use it), The documentation isn't that great.
In summary, the href link subscribes the user on the email list. The only problem is that this link opens a new page. When I want the user to stay on the same page. I though about doing a redirect, when clicking the link, though I am not sure if that would work.
I have tried this:
//Html
<a id="subscription" href="http://example.com">Subscribe</a>
// Jquery
$("#emailsubscribe").click(function(e){
e.preventDefault();//this will prevent the link trying to navigate to another page
//do the update
var href = "http://example.com";
//when update has finished, navigate to the other page
window.location = "href";
});
The goal is that I am trying to make it where the user clicks on the link, it subscribes them to the email list, but immediately redirects them back, without opening another window.

You're looking for AJAX. This allows you to make requests without actually navigating to a page. Since you're using jQuery
$("#emailSubscribe").click(function (e) {
e.preventDefault();
$.get("http://www.myurl.com", function (data) {
//All done!
});
});

You have 3 options:
Do an AJAX request to subscribe the user
$('#emailsubscribe').on('click', function () {
$.get('/email-subscribe/' + USER_ID, function () {
// redirect goes here
window.location = 'REDIRECT_URL';
});
});
Use an iframe and when the iframe has loaded close the iframe (ugly, hacky, not recommended)
Have the subscribe page redirect the user back. Aka do the common messages of "You have been subscribed. Redirecting back in 5seconds...". You would need to pass the redirect link to the subscribe page, aka
window.location = '/subscribe/USER_ID?redirect_to=/my-redirect-page'

You need to refer the var, instead of typing another string to redirect.
//Html
<a id="subscription" href="http://example.com">Subscribe</a>
// Jquery
$("#emailsubscribe").click(function(e){
e.preventDefault();//this will prevent the link trying to navigate to another page
//do the update
var href = "http://example.com";
//when update has finished, navigate to the other page
window.location = href; //<<<< change this.
});

Making ajax call on navigating away from page

I am working on a site that has multiple links to other sites. What I want is to send an ajax call to report that the user is going away when someone clicks and navigates away from the page. I put an alert on click of the links, which works but for some reason the controller never gets the ping.
Any assistance will be appreciated on how to achieve it.

Can't be done.
When you go to navigate away, there is only one event that can catch that, the onbeforeunload event, and that is quite limited in what it can do.
Not to mention there are other ways of leaving the page without navigating away:
Losing network connection
Closing the browser.
Losing power.
The only thing you can do is to set up a heartbeat kind of thing that pings the server every so many milliseconds and says 'I'm Alive.'
Depending on what you are trying to do, there is usually a better option, however.

You can try to simply set click event handler which will check the href attribute of every link before navigating. If it goes to another website, the handler sends AJAX request and then (after server responding) redirects to the page.
var redirect = '';
$('a').click(function() {
if (this.href.host != document.location.host) {
if (redirect) return false; // means redirect is about to start, clicking other links has no effect
redirect = this.href;
$.ajax({
url: '/away',
success: function(){document.location.href = redirect;}
});
return false;
});
However it can't work properly, if user has opened your page in multiple tabs.

The only reliable way to do this these days is by hooking (i.e. add event listener) your code in so called sendBeacon method from Beacon API on beforeunload event (i.e. when user tries to navigate away from page).
The navigator.sendBeacon() method asynchronously sends a small amount of data over HTTP to a web server. It’s intended to be used for sending analytics data to a web server, and avoids some of the problems with legacy techniques for sending analytics, such as the use of XMLHttpRequest:
<script>
var URL = 'https://your.domain/your-page.php';
// on 'beforeunload'
window.addEventListener('beforeunload', function (event) {
navigator.sendBeacon(URL);
// more safely is to wait a bit
var wait_until = new Date().getTime() + 500;
while (new Date().getTime() <= wait_until);
});
</script>

You can try:
$(window).on('beforeunload', function(){
return "This should create a pop-up";
});

You can achieve it by capturing clicks on all the links on the page (or all the relevant links) and then call ev.preventDefault() on it to prevent the browser from navigating directly to that page.
Instead, you can make an AJAX call to your server and when that call returns, you can set window.location to the URL the user was trying to navigate to.

Here is a workaround you could try.
At the loading of the page, use jquery to move all href attributes to tempHref attribute. Then, attach a method to catch the click event.
This way, clicking on the links will not automatically move to the intended destination.
When the click occurs, simply perform the ajax call, and then using javascript, move to the other page.
$('a').each(function () {
var link = $(this);
link.attr('tempHref', link.attr('href'));
link.removeAttr('href');
});
$(document).on('click', 'a', function ()
{
//perform ajax call;
location.href = $(location).attr('tempHref');
});

Check for page refresh or close with jQuery/javascript

I am looking to check if a page has been refreshed or closed with jQuery or javascript.
What I have currently is I have some database values that I want to delete if the user either navigates away or refreshes the page.
I am using AJAX calls to delete the values.
Right now, I have the following code:
The handler:
window.beforeunload = cleanUp;
The cleanUp() method:
function cleanUp() {
// Check to see if it's an actual page change.
if(myActualLeave) {
$.ajax({
type: "POST",
url: "/api/cleanup",
data: { id: myLocalId },
success: function (data) {
console.log(myLocalId + " got removed from the database.");
}
});
}
// Reset the flag, so it can be checked again.
myActualLeave = true;
}
Where myActualLeave is a flag that I set to false when AJAX calls are made, so they don't trigger the beforeunload handler.
The problem I am running into is that when I click a link on my page, so for instance a link to Google, the window.beforeunload doesn't trigger. I may have a misunderstanding of this, but I have tried using jQuery's $(window).unload(...); and the onbeforeunload trigger as well.
What should I use to call javascript when:
the user refreshes the page,
when the user navigates away from the page, or
when the user closes the page?
Edit: It came up in a comment that I could use a click() jQuery handler to detect navigating away. I should have made it more specific that I don't mean when the user clicks a link only then I want it to proc. I want it to trigger when they change pages in any way. So if the address bar gets typed in, for instance.

You should try "onbeforeunload" :
window.onbeforeunload
But i think you can't put "active" (ajax call) code in this callback function. All you can do is defining a confirm modal window that will be displayed to the user before leaving like :
Are you sure you want to leave because...
So you should do as #Leeish said : put a code in the .on('click') of the link so it can launch the ajax call before sending to another page.
But for the "refresh" or "close" scenario, you can consider marking your database row as "draft" (or whatever) and if not saved when on the next page, delete the draft line.

How to implement a isDirty flag onLeave for a single page application?

I have a single page application written in MVC4 that uses pjax() to push html into various s in my page. I have one sub-form that allows the user to edit the data and it if the user changes the data an isDirty flag gets set in javascript to trigger an alert at the bottom of the page that there are un-saved updates. I would also like to implement an additional warning when the user tries to leave the page without saving. If I use a traditional onbeforeunload function like this
window.onbeforeunload = function() {
if (isDirty) {
return 'You have unsaved changes!';
}
return null;
};
it calls the alert if I try to close the page or navigate away from the site entirely but if the user clicks on one of my links that re-populates the with some different information it does not trigger because you are not actually leaving the page. How can I architect it so that one of these pjax() links causes an alert similar to if I close the page?

You could subscribe to a global event that fires before a pjax request:
$(document).on('pjax:beforeSend', function() {
if (isDirty) {
return confirm('You have unsaved changes! Are you sure you want to continue?');
}
return true;
});

You could add a delegated event handler onto the links in the page. You just have to make sure the handler is bound to links that may load a "new page".