Question

I have a below anchor as below

<a onclick="return getFile('/log/sample.log');" href="/log/sample.log" target="_blank"> sample.log </a>

Because at my server, the log directory in href may be not correct. So the function “getFile” would change the href to the correct one after asking the server.

The first click always failed since the link was not correct, then after AJAX process in getFile was finished and the correct href was given, the clicks later on was ok.

The problem is how I forcefully let html wait ever at the first click until the href is changed, then do the query on the server.

Thanks in advance.

I guess my current way could be not in the correct direction by using “onclick” to implement the idea.

Answer 1

You want something like this

$(function() {

//assume you tagged all anchors you want to do this for with class=adjustlink
$('a.adjustlink').click(function(e) {
  var thisAnchor = $(this); //save reference for later use

  //this will either be true (see below) or undefined (falsy)
  if(thisAnchor.data('myapp.linkHasBeenTested')) {
    return;  //continue on
  } 

   // Stop the link from being navigated (the default for this event)
   e.preventDefault();

  //I'm assuming this is fetched as text but could just as well be JSON or anything else
  $.get('/LinkAdjustment/', thisAnchor.attr('href')).done(function(result) {
    thisAnchor.attr('href', result); //set the href
    thisAnchor.data('myapp.linkHasBeenTested', true);
    thisAnchor.trigger('click');
  });
});

});

As an interesting side-note. You might be attempting to do something similar to the way REST is intended to be done. You might consider, first fetching a resource that will tell you up-front what the correct links are.