如何在单击锚点后更改锚点的href？

Question

I have a page that pulls in data via AJAX. As well as this I have a link to download said data as a CSV file.

The problem I have is that upon I need to pass some parameters along with the click event so that the server can return the correct CSV file.

Without any processing the link looks like this:

<a href="/manager/TargetResults.csv" class="black">Download Target Reports</a>

This then fires off an ASP.NET MVC Controller action that returns the CSV. What I want to do though is pass two parameters along in the query string. Initially I thought that I could intercept the click event and add data to the query string like so:

var holder = $('.hidden-information').first();                                   
var newOutlets = $('input[name="newoutlets"]', holder).val();                                   
var queryDate = $('input[name="enddate"]', holder).val();                                    
var anchor = $(this);                                    
var link = anchor.attr('href');                                   
link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
anchor.attr('href', link);

It would seem that changing the href at this stage will not update the link in time and the URL will be as it was when it hits the server?

Is it possible to change a URL after it has been clicked or do I need to look at another method?

Thanks

Answer 1

You could redirect the window yourself, like this:

var holder = $('.hidden-information').first();                                   
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
window.location.href = this.href + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
return false; //prevent default going-to-href behavior

Or, whatever is updating those hidden fields, update the link then instead of when it's clicked, for example:

$("#someField").change(function() {
  var holder = $('.hidden-information').first();                                   
  var newOutlets = $('input[name="newoutlets"]', holder).val();
  var queryDate = $('input[name="enddate"]', holder).val();                              
  $("a.black").attr("href", function() {
    return "/manager/TargetResults.csv" + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
  });
});

The main difference is this still allows normal click behavior to work, ctrl+click, etc.

Answer 2

Just rounding out your options, you could put a span inside the link:

<a href="/manager/TargetResults.csv" class="black"><span>Download Target Reports</span></a>

...and then hook the click event on the span , which will happen before the click on the link.

Answer 3

you can make javascript redirect here:-

    var holder = $('.hidden-information').first();                                   
    var newOutlets = $('input[name="newoutlets"]', holder).val();                                   
    var queryDate = $('input[name="enddate"]', holder).val();                                    
    var anchor = $(this);                                    
    var link = anchor.attr('href');                                   
    link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
    anchor.attr('href', link);
   location.href=link;

ya someone can disable js but your code is completely based on js. Thanks

Answer 4

Without having a href, the click will reload the current page, so you need something like this:

<a href="#" onclick="f1()">jhhghj</a>

Or prevent the scroll like this:

<a href="#" onclick="f1(); return false;">jhhghj</a>

Or return false in your f1 function and:

<a href="#" onclick="return f1();">jhhghj</a>

....or, the unobtrusive way:

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
  document.getElementById("myLink").onclick = function() {
    document.getElementById("abc").href="xyz.php"; `enter code here`
    return false;
  };
</script>