SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Australia
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Behaviour, Mootools and Variable Scope

    I've been playing with the interesting Behaviour JS script, which lets you use ID attributes to trigger events rather onclick events all through a page.

    http://www.bennolan.com/behaviour/ for more info. But I have run into a problem with variable scope. In Behaviour, onload events go into an addLoadEvent function.

    However the variables I am declaring on load aren't making it into the Behaviour action. The reason I need to get the function initialised in the onload is to hide a mootools slider.

    Does anyone have any experience with behaviour/mootools and variable scope?

    Code!

    Code:
    var myrules = {
    
       // Action occurs when button ID "test" is clicked
       '#test' : function(element){
    	element.onclick = function(){
     	   
              // Basic moo AJAX
               var myform = $('myform');
    	   var data  = myform.toQueryString();
               var myXHR =  new XHR({
    		 
                   // Successful Ajax, display results
                    onSuccess:function(returnValue){		 			 
    		   
                       // PROBLEM!
                       // It can't see the variables I initialised in onload!
                       resultsDiv.setHTML(returnValue); // Not found
    		   formeffect.toggle('vertical'); // Not found
    					 
    	      }
    	  }).send('ajax_action.php', data);
          }
       }
    };
    
    // Register the events
    Behaviour.register(myrules);
    
    // Add onload events here.
    Behaviour.addLoadEvent(function() {						
    
       // Setup mootools slider effect and hide the div	
       // This is where I do the initialising of the variables
       var resultsDiv = $('results');  
       var formeffect = new Fx.Slide(resultsDiv, { wait: false }); 
       formeffect.hide();
    
    }

  2. #2
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Australia
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the info of anyone who googles this problem. The Var declaration was placing the functions in local scope only!? (yes javascript scope confuses the hell outta me.)

    Working:

    Code:
    var myrules = {
    
       // Action occurs when button ID "test" is clicked
       '#test' : function(element){
    	element.onclick = function(){
     	   
              // Basic moo AJAX
               var myform = $('myform');
    	   var data  = myform.toQueryString();
               var myXHR =  new XHR({
    		 
                   // Successful Ajax, display results
                    onSuccess:function(returnValue){		 			 
    		   
                       // Fixed!
                       resultsDiv.setHTML(returnValue); // Found!
    		   formeffect.toggle('vertical'); // Found!
    					 
    	      }
    	  }).send('ajax_action.php', data);
          }
       }
    };
    
    // Register the events
    Behaviour.register(myrules);
    
    // Add onload events here.
    Behaviour.addLoadEvent(function() {						
    
       // Setup mootools slider effect and hide the div	
       // Works without the var declaration!
       resultsDiv = $('results');  
       formeffect = new Fx.Slide(resultsDiv, { wait: false }); 
       formeffect.hide();
    
    }

  3. #3
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var bar = 21; // variable 1
    foo = function() {
      var bar = 42; // variable 2
      alert(bar); // will output variable 2
    }
    alert(bar); // will output variable 1
    foo();
    alert(bar); // will still output variable 1
    When you use the var keyword, a variable is declared local for the scope (The function). If you don't use var, and there is a non-local variable, then this is used instead. That's how most languages work.

    The special thing about javascript is, that on top of this, it has lexical scope. Lexical scope is a lot less confusing, once you get used to it. Basically, the placement of the variables, in the code, determines scope:
    Code:
    var bar = 21; // variable 1
    foo = function() {
      var bar = 42; // variable 2
      cux = function() {
        alert(bar); // Since there is no local variable 'bar', the first non-local is used instead. In this base, that's variable 2
      }
      cux();
    }
    foo();


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
  •