2 Replies Latest reply: Nov 27, 2009 11:20 AM by Phil_W RSS

    evaluate variable when attaching handler to event via element selector

    Phil_W Community Member

      Hi,

       

      I have this piece of code

       

      var myalbums  = Spry.$$("#albums li");
          var rows = dsAlbums.getData();
          var albumid;
         
          for (var i=0;i<myalbums.length;i++)
          {
              albumid = rows[i]["albumid"];
             
                   
              myalbums[i].addEventListener("click", function(){ showAlbum(albumid); },false );
          }

       

      I wished to attach the event handler with the albumid as it's actual value

       

      So let's say albumid = "PhilHere" for row 0 then I would want to attach the listener as below

       

      myalbums[o].addEventListener("click", function(){ showAlbum('PhilHere'); },false );

       

      But my code is purely attaching the handler with albumid as a parameter to be evaluated when I click the partciular element. Which is no good How do I achieve my goal?

       

      The page is here http://www.thehmc.co.uk/photo5.html

       

      Briefly the page takes feeds from our Google Picasa album and shows a list of photo tags and albums. Then the intention is members can click an album or tag to show photos form a particular album etc and view a slideshow ro navigate through the thumbnails.  The above code however only returns the same picasa albumid for all albums clicked so I can't move this forward without a solution for the above.  I could generate the required event handling in the spry region by having an onclick in the markup but I'm trying to keep the html as clean as poss.

       

      Cheers

       

      Phil

        • 1. Re: evaluate variable when attaching handler to event via element selector
          Arnout Kazemier Community Member
          var myalbums  = Spry.$$("#albums li");
              var rows = dsAlbums.getData();
              var albumid;
              
              for (var i=0;i<myalbums.length;i++)
              {
                  albumid = rows[i]["albumid"];
                  
                        
                  myalbums[i].addEventListener("click", function(){ showAlbum(albumid); },false );
              }

          Your eventlistener will use all reference to the same var albumid; not to the looped value.

           

          What you could do is this:

           

          var myalbums = Spry.$$("#albums li", "TabbedPanels1"), //TIP: Always specify the context for your selectors, this will speed up the selector
          var rows = dsAlbums.getData();
          var setListener = function( element, value ){
              Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false ); 
          };
          
          for( var i = 0, length = myalbums.length; i < length; i++ ){ //TIP: always cache the length in a variable when you are looping
               setListener( myalbums[i], rows[i]["albumid"] );
          }
          

           

           

          Hopes this helps

          • 2. Re: evaluate variable when attaching handler to event via element selector
            Phil_W Community Member

            Hi,

             

            Spot on, your suggestion works as I require without modification. So I can keep my HTML nice and clean whilst still having the event listener function I require. Thanks for the tips on performance as well - not really critical here but certainly a good practice to follow.

             

            Cheers for that - it certainly did help

             

            Phil