I have a webpage showing a download image with an associated download link. The image is shown with an tag and the download link with an tag. When the user clicks the image to download the file, I first check the status of the logged-in user’s account. Depending on account status, I need to redirect the download request to the proper subdirectory.

To do this, I need to dynamically change part of the download link to direct the request to the proper folder. I implemented this with a request to a PHP page that does all the necessary user account checking. The PHP page returns a small character string representing the name of the subdirectory the request has to be directed to.

My problem is that when the user clicks the download image, the request goes indeed to the proper subdirectory. However, when hovering the download image with the mouse, it still shows the original download link (before the change) in the browser’s status bar.

I have no clue how to solve this and would appreciate it if anyone can offer a solution to showing the updated link in the browser’s status bar when hovering over the image.

front-end HTML code

<article class="post post––single">
  <header class="post__header">...</header>
  <div class="post__content">
    <div class="ck-_content">
    <style>
      .centerImage {
        display: block;
        margin-left: auto;
        margin-right: auto;
    </style>
    <a href="https://example.com/dload/Windows/XnView_MP_win_x64_1.8.8.exe">
      <img src="public/storage//site-graphics/download-button-120x100.png" class="centerImage">
    </a>
    <br><br><br>
    <section class="new-item-shar"></section>
    <br>
  </div>
  <footer class="post__footer">...</footer>
  <br>
</article>

front-end jQuery code

<script type="text/javascript">
$(document).ready(function() {
    $("article.post > div > a").click( function( e ){
        e.preventDefault();
        $link = $(this);

        $.get("https://example.com/data/public/webservicev2.php?do=1", 
            function(response, status)
            {
                $link.attr('href').replace("dload/",response);
            }
         );
    });
});
</script>

fragment of PHP back-end code

...
    $return = "sends/";
...
    echo $return;
?>

$link.attr('href').replace("dload/",response);

will compute the replacement for the href, but will not change it. In order to actually change it, you can do

$link.attr('href', $link.attr('href').replace("dload/",response));

The outer call for attr will get the attribute name, href and the second attribute, the result of the replace will be the new value.

Example:

let anchors = $("a");
anchors.attr('href', anchors.attr('href').replace('cl', 'l'));
console.log(anchors.prop('href'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="click/here/to/continue">Click here to continue</a>

You can polyfill your own replacement into jQuery if you are bored with twice calling attr:

$.prototype.replace = function(attr, what, whatelse) {
    this.attr(attr, this.attr(attr).replace(what, whatelse));
}
let anchors = $("a");
anchors.replace('href', 'cl', 'l');
console.log(anchors.prop('href'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="click/here/to/continue">Click here to continue</a>

Now that you have a replace function for jQuery, you can call it anytime without repeatedly referring to twice calling the attr function.