Change the href of an anchor tag with javascript.

Question

Hey I have a question for javascript. I need to assign an href value to an anchor tag or asp:HyperLink. SOMETHING. that will allow me to link text in a dialog popup to an href that a function specifies. Here is my code.

<'custom:JQueryDialog I made' runat=server ID="dialogPopUp" AutoOpen="false"
   CloseOnEscape="true" Modal="true" Title="Download" width="300px">
    //I will spare you all of the div tags for formatting
    <a runat="server" id="downloadLink" target="_blank" class="'css with an icon'"
       href=""></a>
</'custom:JQueryDialog I made'>

Now I am having to get an fso from the database since that is where the info is stored. This fso is different depending on what the entity reflector class sends to this javascript. I have a function that formats javascript strings similar to C# I found. I then have another function that gets the fso from the entity reflector class. This works. I tested the string by displaying it in an alert and this works fine. The problem I am having is setting the href of the anchor tag with javascript. I am going nuts! Please help!

String Format:

String.format = function() {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i + 1]);
     }
}

My attempt to change the href:

function changeHref(fso) {
    var downloadHref = String.format("Download.ashx?fso={0}", fso);
    $('#<%= this.downloadLink.ClientID %>').href = downloadHref;
    showDialog(<%= this.'custom dialog i made'.ClientID %>);
}

The download link is changed and everything. I just cannot seem to be able to set this! Am I missing the order of the page load? Do I need to do this after the whole page loads since items might not be generated yet? I tried a couple different things. I really could use a direction.

Answer 1

You can't reference href directly like that from a jQuery object. All you are doing is creating a new property. Change it to set the attribute through attr like this...

$('#<%= this.downloadLink.ClientID %>').attr("href", downloadHref);

For completeness, I should mention that you can get to the underlying DOM element by using array syntax, and then you could set the href with regular Javascript...

var domElem = $('#<%= this.downloadLink.ClientID %>')[0]; // DOM element is at 0
domElem.href = downloadHref;

Also, another probable error, I think you need quotes here...

showDialog("<%= this.'custom dialog i made'.ClientID %>");

Answer 2

This line is incorrect, to set the HREF you need to access the attr function of jQuery.

$('#<%= this.downloadLink.ClientID %>').attr("href", downloadHref);

Answer 3

Your javascript needs to run after the page load is complete.

The jQuery way of doing it:

$(document).ready(function() { init() })


function init() {
  $('#<%= this.downloadLink.ClientID %>').attr("href", downloadHref);
  //Josh's code above

}