Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    addevent OnClick!

    I have the followed javascript which should of work but for some reason it drives me nuts!

    PHP Code:
    <script type="text/javascript" language="Javascript">
    <!--
    function 
    AjaxLinks(strClass){
        var 
    linkList document.getElementsByTagName('a');
        for (var 
    0linkList.lengthi++){
            var 
    elem=linkList[i];
            if (
    elem.className==strClass) {
                var 
    hrf elem.href;
                
    elem.href "#";
                
    fn=function(){ alert(hrf); }
                if (
    elem.addEventListener)    { elem.addEventListener('click'fntrue); }
                else if(
    elem.attachEvent)    { elem.attachEvent('onClick'fn); }
                else { 
    elem['onClick']=fn; };
                }
            }
        }

    function 
    ShowUrl(sUrl) {
        
    alert(sUrl);
        }

    window.onLoad AjaxLinks('ajax');
    -->
    </script> 
    Hope I could find a help or a better way to do make easier!

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like you had a few minor problems that if I recall all had to do with the case of letters. For example, you needed to use:

    window.onload instead of window.onLoad

    Check out this sample that worked for me in FF2 and IE7.

    Code:
    <html>
      <head>
        <title>Add Event Test</title>
        <script type="text/javascript">
          function AjaxLinks(strClass){ 
            var linkList = document.getElementsByTagName('a'); 
            for (var i = 0; i < linkList.length; i++){ 
                var elem=linkList[i]; 
                if (elem.className==strClass) { 
                    var hrf = elem.href; 
                    elem.href = "#"; 
                    fn=function(){ alert(hrf); } 
                    if (elem.addEventListener)    { elem.addEventListener('click', fn, true); } 
                    else if(elem.attachEvent)    { elem.attachEvent('onclick', fn); } 
                    else { elem['onclick']=fn; }; 
                    } 
                } 
            } 
    
          function ShowUrl(sUrl) { 
            alert(sUrl); 
          } 
    
          window.onload = function () {
            AjaxLinks('ajax'); 
          }
        </script>
      </head>
      <body>
        <button onclick="AjaxLinks('ajax');">Do it</button>
        <a class="ajax" href="http://www.google.com">Link</a>
        <div id="adiv"> </div>
      </body>
    </html>
    david_kw

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    If you need only to create an onclick event (not to add a new handler to an already existent event), there is no need to use addEventListener and attachEvent methods. The simple DOM 0 cross-browser syntax will do the job. And use a closure (self reference this) to return the element's attributes.
    Code:
    <script type="text/javascript">
    function AjaxLinks(strClass){ 
    var linkList = document.getElementsByTagName('a'), i=0, elem 
    while(elem=linkList[i++]){
    if (elem.className==strClass) {
    elem.onclick=function(){alert(this.href)} 
    }
    }
    }
    onload=function(){AjaxLinks('ajax')}
    </script>
    Last edited by Kor; 12-13-2006 at 07:23 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dang! I never thought the letter's case would be the trouble!

    Thanks david_kw, it works fine!

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Kor, that's awesome but I just put [ShowUrl] just as an example while the url shall be sent to Ajax class so to load the url in a specific element(s)!
    So, I made it this way
    PHP Code:
    function ShowUrl(sUrl) {
        
    alert(sUrl.href);
        return 
    false;
        }
    function 
    AjaxLinks(strClass){ 
        var 
    linkList document.getElementsByTagName('a'), i=0elem 
        
    while(elem=linkList[i++]){
            if (
    elem.className==strClass) {
                
    elem.onclick=function(){ ShowUrl(this); } 
                }
            }
        } 
    but this way the requested url will be loaded once more after the ajax.class done loading it!
    So, the url will be loaded twice! any clue?

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try:
    Code:
    elem.onclick=function(){ return ShowUrl(this); }
    or:
    Code:
    function ShowUrl(sUrl) {
        alert(sUrl.href);
         }
    function AjaxLinks(strClass){ 
        var linkList = document.getElementsByTagName('a'), i=0, elem 
        while(elem=linkList[i++]){
            if (elem.className==strClass) {
                elem.onclick=function(){ ShowUrl(this);return false } 
                }
            }
        }
    The idea is to achieve, after the function is triggered, a return false onclick, to prevent the HTML action of the href.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again Kor for your help, and yes it works fine now, and better than my old coding.


  •  

    Posting Permissions

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