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="javascrip t: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(ur l, sender)
{
sender.style = "background-color:#000;"; // doesn't work
event.srcElemen t.style = "background-color:#000;"; // doesn't work
....
}

the event.srcElemen t 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.ba ckgroundColor = "#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="javas cript" src="../AsyncWeb.js"></script>

and here is a sample A tag from my code:
<a
href='javascrip t: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]

"Tim_Mac" <ti*@mackey.i e> wrote

<a

href='javascrip t: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?

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);">Dire ct 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.as mx?ID=1234&' onclick='return
SendAsync(this. href,this)'>Wha tever</a>

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

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

if (window.XMLHttp Request)
{
xmlhttp=new XMLHttpRequest( )
xmlhttp.onready statechange=xml httpChange
xmlhttp.open("G ET",url,true)
xmlhttp.send(nu ll)
}
// code for IE
else if (window.ActiveX Object)
{
xmlhttp=new ActiveXObject(" Microsoft.XMLHT TP")
if (xmlhttp)
{
xmlhttp.onready statechange=xml httpChange
xmlhttp.open("G ET",url,true)
xmlhttp.send()
}
}
return false;
}

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