how to change style of a clicked-on hyperlink

Discussion in 'Javascript' started by Tim_Mac, May 20, 2005.

  1. Tim_Mac

    Tim_Mac Guest

    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
     
    Tim_Mac, May 20, 2005
    #1
    1. Advertising

  2. Tim_Mac

    Ivo Guest

    "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
     
    Ivo, May 20, 2005
    #2
    1. Advertising

  3. Tim_Mac

    Tim_Mac Guest

    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
     
    Tim_Mac, May 21, 2005
    #3
  4. Tim_Mac

    Ivo Guest

    "Tim_Mac" <> 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
     
    Ivo, May 21, 2005
    #4
  5. Tim_Mac

    Tim_Mac Guest

    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")
    }
    }
    }
     
    Tim_Mac, May 21, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    493
    Andy Fish
    Mar 15, 2005
  2. Replies:
    0
    Views:
    398
  3. =?Utf-8?B?YmJkb2J1ZGR5?=

    knowing which hyperlink was clicked

    =?Utf-8?B?YmJkb2J1ZGR5?=, Jul 21, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    468
    Curt_C [MVP]
    Jul 21, 2005
  4. Imran Aziz

    Change Hyperlink style dynamically

    Imran Aziz, Sep 2, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    4,545
    Imran Aziz
    Sep 2, 2005
  5. Paul D. Fox

    How do I get the Clicked Event on Hyperlink to execute a Command?

    Paul D. Fox, Jun 9, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    146
    Paul D. Fox
    Jun 9, 2005
Loading...

Share This Page