Event.on bound to element only

[kstubs]

Api reads:  

callback (Function) – The event handler function. Should expect two arguments: the event object and the element that received the event. (If selector was given, this element will be the one that satisfies the criteria described just above; if not, it will be the one specified in the element argument). This function is always bound to element.

So this means there is no way to bind to a class, to *this* class?  Most of the time it makes sense that the event listener is bound to the class and not the element.  Are there any possibilities of allowing you to pass context to the on function?

Karl..

[Guillaume Lepicard]

Hi Karl

You should have a look to Element.observe
With this method you can bind the listener to the object you want

The main difference is that you don't have the selector. Nevertheless, thanks to $$ and invoke, you should get what you want

Guillaume

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/DawaWjvEe6gJ.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[kstubs]

Yes, familiar with Element.observe but was really looking for the use or feature that I described with .on method.

Thanks,

Karl..

[Marty Amberg]

Hi all,

I created a prototype object for a popup to display some data and a few buttons to allow update, inserts ,etc. I have been trying to make the events be created during the period of instantiation of the object.  All of the popup is created by making new elements to build a form.  
Outside of the object I can get the evens code  to work but not inside the object.   The perintent code is in red at the end.   This was the past attempt to get it to work.     It has to work in IE7 sadly.  

The code is listed below.

Thanks in advance.

-----------------------------------------------------------------------------------------------------------------------
this.grpList = new Array();    
//console.log(this. grpList.toString());
//console.log(this.returnListAsText());
},
reX:function(){
    return "me";
},
reX1:function(){

},
addArray:function(addThis){
if ( this.grpList)
{
  this.grpList.push(addThis);    
}
},

 dataGetDBfunction: function (divisionName){
     
    
    new Ajax.Request(
      "tableMaintenance.php",{
      // runs classes\class_image_division_groups -- makeSelectOneGroup
      parameters: {'what_object':'division_groups','classFunctionToRun':'makeSelectOneGroup','name_division_groups':divisionName},    
      onSuccess: function(xhrResponse) {
     
          var JSONreturn = xhrResponse.responseText.evalJSON();
          if (parseInt(JSONreturn.passcode) != 0)
          {  
           
          }
          this. grpList =  JSONreturn.message;
          // build table
          var a = new Element('div', {'class': 'subScreenPopup','id':'subPopup'});
          var b = new Element('div', {'class': 'subTable','id':'subTableLeft'});
          var b1= new Element('input',{'name': "Button1", 'type':"button" , 'class':"popupButtonClass" ,'id':"popUpButton1", 'value':"Insert"})
          var b2= new Element('input',{'name': "Button2", 'type':"button" , 'class':"popupButtonClass" ,'id':"popUpButton2", 'value':"Update"})
          var b3= new Element('input',{'name': "Button3", 'type':"button" , 'class':"popupButtonClass" ,'id':"popUpButton3", 'value':"Cancel"})
          var b4= new Element('input',{'name': "Button4", 'type':"button" , 'class':"popupButtonClass" ,'id':"popUpButton4", 'value':"Return"})
          
          // table
          var t1 = new Element('table',{'class':'viewTable','id':'setTable'});
          var th1 = new Element('thead',{'class':'viewTable'});
          var tr = new Element('tr',{'class':'viewTable'});
          var th = new Element('th',{'class':'viewTable'}).update(divisionName);
            $(th1).insert(tr);    // tr
          $(tr).insert(th);    // td
             $(t1).insert(th1);    // thead  
          $('content').insert(t1);   // inserts the table and header into the program
          
          var tb1 = new Element('tbody',{'class':'viewTable','id':'viewBody'});  // tbody
           $(t1).insert(tb1);
           
          for (var i = 0; i <  this.grpList.length; i++) {           
            var tr1 = new Element('tr');
               var td1 = new Element('td');
            var f1 = new Element('input',{'name': "textData" + i, 'type':"text" , 'id':"textData" + i, 'value': grpList[i]});
            
            $(td1).insert(f1);
            $(tr1).insert(td1);
               
            $(tb1).insert(tr1);
            $(t1).insert(tb1);
          }
          
        
          $('content').insert(b1);  // these are buttons and appear at the end of the screen.     
            $('content').insert(b2);
          $('content').insert(b3);
          $('content').insert(b4);
           Event.observe('popUpButton1', 'click', P.checkButton);     // tried different methods
      }
   })
 },          
 checkButton:function(e) {
  alert( "pressed");
     
 },
            
 endEvents:function() {
     
     
     
 }
              

});

-- 
Marty Amberg

[Marty Amberg]

Fixed it.

Thanks

--

You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

-- 
Marty Amberg
EdenStreet Consulting
w:978-741-7518
c:978-821-1309

[Victor]

Don't worry - use Function#bind():

Event.on($("id"), "click", function (event, element) {
  // this === element === $("id")
});

var object = {};
Event.on($("id"), "click", function (event, element) {
  // this === object
  // element === $("id")
}.bind(object));