SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collect all links, change differently?

    Hi -

    I am trying to write a very basic Ajax library for a client's webpage.

    I can get the Ajax to function properly, but I am having trouble getting the script that collects all 'a' elements and assigns them an onclick (so non-javascript still works)

    The idea is that the script will find all links with rel="ajax" and create an onclick="callAHAH( <URL IN HREF>, div, loading-image);

    it works, only it changes all links to the last link on the page... so if I had home , about, contact - all three of them end up linking to contact.

    TIA!

    -Ross

    function getAjaxLinks(target)
    {

    var div = target;
    var image = "<img src=images/loading.gif border=0 />";
    var anchors = document.getElementsByTagName('a');

    // loop through all anchor tags
    for (var i=0; i<anchors.length; i++)
    {
    var anchor = anchors[i];

    var relAttribute = String(anchor.getAttribute('rel'));
    var url = String(anchor.getAttribute('href'));

    // use the string.match() method to catch 'lightbox' references in the rel attribute
    if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('ajax'))){


    anchor.onclick = function () { callAHAH(url, div, image); return false; }
    anchor.href = "javascript:void(0)";
    }
    }
    }

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 3PointRoss
    anchor.onclick = function () { callAHAH(url, div, image); return false; }
    anchor.href = "javascript:void(0)";
    }
    Try this; I think the syntax is right:
    Code:
    anchor.onclick = new Function ( "callAHAH(" + url + "," + div +","+image+"); return false;" );
    anchor.href = "#";

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ross,

    It looks like you are trying to hold onto the values of 'target' and 'image' via closure. Here's another way to do it:
    Code:
    window.onload = function()
    {
      xhrInitLinks('testTarget', 'testImage');
    }
    function xhrInitLinks(sTarget, sImage)
    {
      var i, rel, lnks = document.links;
      if (lnks) {
        for (i = 0; i < lnks.length; ++i) {
          rel = lnks[i].getAttribute ? lnks[i].getAttribute('rel') : lnks[i].rel;
          if ((typeof rel == 'string') && (rel.toLowerCase() == 'ajax')) {
            lnks[i].onclick = xhrLinkOnClick;
          }
        }
      }
      function xhrLinkOnClick()
      {
        window.status = 'this.href: ' + this.href + ', sTarget: ' + sTarget + ', sImage: ' + sImage; // for debugging
        return false;
      }
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •