The other day I needed to generate href strings in my WebForms application, pass that href string in a button OnClientClick event to a JavaScript method that in turn would take that href string and dynamically add it to a particular button’s onclick event to set the document.location.href value.  Now I may not have done a good job in describing that, so it may have sounded complicated, but really it isn’t or rather shouldn’t have been.

The server side code was simple:

[code]
Dim hrefLinkParameters As String = PersonId & “?text=” & hfUserName.Value & ” – ” &
             PersonFirstName & ” ” & PersonLastName & “, ” &
             CompanyName & ” (Rep – ” & Rep & “) Pricing – ” & PriceListCode & “?custtype=G”
Dim hrefLink As String = “caracole://” & HttpUtility.UrlEncode(hrefLinkParameters)
If (PriceListCode.Trim = “NP” Or PriceListCode.Trim = “”) Then
     ‘ Pass hrefLink to the showPriceTierModal(), so if Continue button is clicked, they can continue and Work With
     ‘ Also pass the hrefDetailLink to link to the GuestDetail page so they can set the prict tier for the guest
     btnWorkWith.Attributes.Add(“onclick”, “javascript:showPriceTierModal(‘” & hrefLink & “‘, ‘” & hrefDetailLink & “‘); return false;”)
Else
     btnWorkWith.OnClientClick = “document.location.href = ‘” & hrefLink & “‘;return false”
End If

[/code]

Now on the JavaScript side you need to get a reference to the button you want to change or set the onclick of, easy.  Once you have that reference, you can set the .onclick load the href string you just received… like:

[code]
.onclick = “ by .onclick = “document.location.href = ‘” + hrefLink + “‘;return false;”;
[/code]

But that would not work, I tried several variations.  Next I tried the .setAttribute( attribute, value) and this worked.  Why setting the .onclick method does not work, but using the setAttribute of onclick does is beyond me. 

[code]
document.getElementById(‘btn2’).onclick = “javascript:workWith()”;  // Does NOT work
document.getElementById(‘btn2’).setAttribute(“onclick”, “javascript:workWith()”); //  THIS WORKS
[/code]

My resulting javascript code is:

[code]

<script type=”text/javascript”>

    function showPriceTierModal(hrefLink, hrefDetailLink) {
         // Get the modal
         var modal = document.getElementById(‘myModal’);
         modal.style.display = “block”;

        // set ContinueNoPrice button onclick
         document.getElementById(‘btnContinueNoPrice’).setAttribute(“onclick”, “document.location.href = ‘” + hrefLink + “‘;return false;”);
         // set SetPriceTier button onclick
         document.getElementById(‘btnSetPriceTier’).setAttribute(“onclick”, “document.location.href = ‘” + hrefDetailLink + “‘;return false;”);

        // set Continue button onclick
         document.getElementById(‘btnContinueNoPrice’).setAttribute(“onclick”, “document.location.href = ‘” + hrefLink + “‘;return false;”);
         document.getElementById(‘btnSetPriceTier’).setAttribute(“onclick”, “document.location.href = ‘” + hrefDetailLink + “‘;return false;”);

        return false;
     }

    function hidePriceTierModal() {
         // Get the modal
         var modal = document.getElementById(‘myModal’);
         modal.style.display = “none”;
         //alert(“you are here!”)
         return false;
     }

</script>

[/code]