how to change style of a clicked-on hyperlink

[Tim_Mac]

hi,
i have a list of hyperlinks (server-side generated), that have a href
value as follows:
href="javascript:AsyncRequest('someurl.asmx?..',this)"

since the url is loaded asynchronously, i need to change the style of
the link after it gets clicked to let them know which one they clicked
on, e.g. set a background color or something. i have had difficulty
getting access to the style of the sending element.

i tried the following code to no avail.
function AsyncRequest(url, sender)
{
sender.style = "background-color:#000;"; // doesn't work
event.srcElement.style = "background-color:#000;"; // doesn't work
....
}

the event.srcElement approach gives me 'object required' errors in IE6
and firefox. i should mention that it would be difficult to generate a
unique ID for each hyperlink.

thanks for any tips
tim

 

[Ivo]

"Tim_Mac" wrote

sender.style = "background-color:#000;"; // doesn't work

Try this:
sender.style.backgroundColor = "#000";

The style object provides access to the usual style properties, but then
written in camelCase as shown. And color values don't need a semicolon
within the quotes.
hth
Ivo

 

[Tim_Mac]

hi Ivo,
thanks for the reply. when i try that, firefox tells me "style has no
properties" and IE6 tells me "style is null or not an object".

i'm using a referenced source file:
<script language="javascript" src="../AsyncWeb.js"></script>

and here is a sample A tag from my code:
<a
href='javascript:Record("../Select.asmx/EnterPreference?ID=29488&pref=Direct-Conflict",this)'

Direct Conflict</a>

i tried some debugging and when i did an alert(typeof sender), i get
'object window', i would have thought this should be hyperlink or
something?

thanks for any tips
tim

 

[Ivo]

<a
href='javascript:Record("../Select.asmx/EnterPreference?ID=29488&pref=Direct
-Conflict",this)'

i tried some debugging and when i did an alert(typeof sender), i get
'object window', i would have thought this should be hyperlink or
something?

Hm, try putting the function call in a proper onclick event handler rather
than using the javascript: pseudo-protocol. Like so:

<a href=""
onclick="return Record('../Select.asmx?etc.',this);">Direct Conflict</a>

and return false from the function to prevent the href being followed. Even
better, specify an url to a page for those without javascript in that href,
that is the official way. See the FAQ of this newsgroup:
<URL: http://jibbering.com/faq/#FAQ4_24 >

hth
Ivo

 

[Tim_Mac]

Genius!!
ivo that has made my day. thanks a million for your help. it works
perfectly.

for anyone else who is using asynchronous requests, i noticed a useful
trick to allow non-javascript clients to still use the links, without
having to duplicate the actual href in the onclick handler: just use
'this.href' in the javascript function. probably obvious to folks like
Ivo but i thought i'd post it here for future reference.

<a href='Select.asmx?ID=1234&' onclick='return
SendAsync(this.href,this)'>Whatever</a>

*********** javascript source ***********
var xmlhttp;

function SendAsync(url, sender)
{
// change the colour of the link to give some feedback to the user
sender.style.backgroundColor = "#000";
sender.style.color = "#FFF";

if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send()
}
}
return false;
}

function xmlhttpChange()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
// if "OK"
if (xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
else
{
alert("Problem retrieving XML data")
}
}
}