Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how to change style of a clicked-on hyperlink

Reply
Thread Tools

how to change style of a clicked-on hyperlink

 
 
Tim_Mac
Guest
Posts: n/a
 
      05-20-2005
hi,
i have a list of hyperlinks (server-side generated), that have a href
value as follows:
href="javascript:AsyncRequest('someurl.asmx?..',th is)"

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

 
Reply With Quote
 
 
 
 
Ivo
Guest
Posts: n/a
 
      05-20-2005
"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


 
Reply With Quote
 
 
 
 
Tim_Mac
Guest
Posts: n/a
 
      05-21-2005
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

 
Reply With Quote
 
Ivo
Guest
Posts: n/a
 
      05-21-2005
"Tim_Mac" <(E-Mail Removed)> wrote
> <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?


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




 
Reply With Quote
 
Tim_Mac
Guest
Posts: n/a
 
      05-21-2005
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")
}
}
}

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
How to add a hyperlink column to asp.net datagrid - where only one value is a hyperlink davetichenor ASP .Net 1 10-30-2006 02:57 PM
Change Hyperlink style dynamically Imran Aziz ASP .Net 2 09-02-2005 10:58 AM
Need help with Style conversion from Style object to Style key/value collection. Ken Varn ASP .Net Building Controls 0 04-26-2004 07:06 PM
Dynamically Hyperlink and Event Handler for the Hyperlink ? Ken ASP .Net Datagrid Control 1 08-15-2003 11:38 PM



Advertisments