#1144 ✓help_request
Robert Hofer

observe does not include dynamically created objects; asking for reinitalisize pending observes

Reported by Robert Hofer | September 23rd, 2010 @ 07:38 AM

<script src=prototype.js></script>
<table border=1>
<tr><td> inhalt</td></tr>
<tr><td> inhalt</td></tr>
<tr><td> inhalt</td></tr>
<tr><td> inhalt</td></tr>
</table>

<script >

function clickhandler(e){
    if (e.target.tagName!="TR") var target=e.target.up("tr"); else var target = e.target
    alert(target.rowIndex)
    var neutr=target.up("table").insertRow(target.rowIndex)
    neutr.innerHTML='<td> newline, will not react to clicks</td>'  //set content of newline
    //observes.reInitialisize()   //my wish:method to  reinitialise all pending observes
}
$$('tr').invoke('observe','click',clickhandler.bindAsEventListener())
</script>@@@

Comments and changes to this ticket

  • Tobie Langel

    Tobie Langel September 23rd, 2010 @ 10:51 AM

    • State changed from “new” to “incomplete”
    • Importance changed from “” to “Low”

    Thanks for your ticket. Unfortunately, you haven't provided enough information for us to be able to do anything about it.

    Please reopen your ticket with a detailed explanation of your issue or, ideally, a failing test case reduction (see the WebKit blog for a good explanation of the latter).

    If you're encountering any difficulty with the above, you can always get help from the mailing list or IRC channel.

    Thank you for your understanding.

  • Robert Hofer

    Robert Hofer September 23rd, 2010 @ 12:14 PM

    I am using prototype observe mechanism to observe events.
    When a eventhandler extends the dom with elements, these elements will not automatically be observed.
    the following reduced test-case should illustrates my wish:

    <doctype>
    <head>
    </head>
    <body>
    <script src=prototype.js></script>
    <table border=1>
    <tr><td> inhalt</td></tr>
    <tr><td> inhalt</td></tr>
    <tr><td> inhalt</td></tr>
    <tr><td> inhalt</td></tr>
    </table>
    </body>
    <script >
    
    function clickhandler(e){
        if (e.target.tagName!="TR") var target=e.target.up("tr"); else var target = e.target
        alert(target.rowIndex)
        var neutr=target.up("table").insertRow(target.rowIndex)
        neutr.innerHTML='<td> newline, will not react to clicks</td>'  //set content of newline
        //observes.reInitialisize()   //my wish:method to  reinitialise all pending observes
    }
    $$('tr').invoke('observe','click',clickhandler.bindAsEventListener())
    </script>
    
  • Robert Hofer

    Robert Hofer September 23rd, 2010 @ 02:19 PM

    Here an updated version of my code-snippet; it is now also running in IE, not only in FF.
    I am using prototype observe mechanism to observe events.
    When a eventhandler extends the dom with elements, these elements will not automatically be observed.
    the following reduced test-case should illustrates my wish:

    <!DOCTYPE html>
    <html>
    <head>
    <script src=../deepbase.js/prototype.js></script>
    </head>
    <body>
    <table border=1>
    <tr><td> inhalt, react to clicks</td></tr>
    <tr><td> inhalt, react to clicks</td></tr>
    <tr><td> inhalt, react to clicks</td></tr>
    <tr><td> inhalt, react to clicks</td></tr>
    </table>
    </body>
    <script >
    function clickhandler(e){

    if (!e) {
        e=event;
        var target =event.srcElement
    }
    else {
        var target = e.target
    }
    if (target.tagName!=&quot;TR&quot;) var target=$(target).up(&quot;tr&quot;)
    var neutr=target.up(&quot;table&quot;).insertRow(target.rowIndex)
    $(neutr).update('&lt;td&gt; newline, will not react to clicks&lt;/td&gt;')  //set content of newline
    //observes.reInitialize()   //here my wish:  a method to  reinitialise all pending observes
    
    
    
    
    } $$('tr').invoke('observe','click',clickhandler.bindAsEventListener()) </script> </html>
  • Tobie Langel

    Tobie Langel September 24th, 2010 @ 09:36 AM

    • State changed from “incomplete” to “help_request”

    You should use event delegation for that.

    If you're not familiar with it, please seek assistance from the mailing list or IRC channel or simply Google for it. There are some excellent resources available on the net.

    Good luck.

  • Robert Hofer
  • Robert Hofer

    Robert Hofer September 27th, 2010 @ 03:21 PM

    now, after studing some posts on event delegation i finally found a solution:
    prototypejs version 1.7x offers the on-method
    here my implementation

    
    <!DOCTYPE html>
    <html>
    <head>
    <script src=../deepbase.js/prototype.js></script>
    </head>
    <body>
    <table border=1>
    <tr><td> inhalt, react to clicks</td></tr>
    <tr><td> inhalt, react to clicks</td></tr>
    <tr><td> inhalt, react to clicks</td></tr>
    <tr><td> inhalt, react to clicks</td></tr>
    </table>
    </body>
    <script >
    function clickhandler(e){
        if (!e) {
            e=event;
            var target =event.srcElement
        }
        else {
            var target = e.target
        }
        if (target.tagName!="TR") var target=$(target).up("tr")
        var neutr=target.up("table").insertRow(target.rowIndex)
        $(neutr).update('<td> newline, will not react to clicks</td>')  //set content of newline
        
    }
    //$$('tr').invoke('observe','click',clickhandler.bindAsEventListener())
    $$('table').invoke('on','click','tr',clickhandler.bindAsEventListener())
    </script>
    </html>
    
  • Arthur Schreiber

    Arthur Schreiber September 27th, 2010 @ 05:45 PM

    You should take some time and actually read the API documentation (it's at api.prototypejs.org):

    • You do not need to call #bindAsEventListener on your callbacks if you use Prototype to observe for Events (e.g. if you use Element#on, Event.on, Element#observe or Event.observe). It will only make your code slower without any gains.

    • The parameter passed to your clickhandler will always be an event when using prototype, no need to check whether it exists or not.

    • To get the event target, you can use Event#element();

    • If you use Element#on, the second argument will be the event target, already filtered based on the selector you passed. See the Event.Handler docs for more info.

    Here is an optimized version of your code, doing what you want it to do:

    
    document.body.on("click", "table tr", function(event, target) {
      var table = target.up("table");
      $(table.insertRow(target.rowIndex)).update('<td>newline, will also react to clicks</td>');
    });
    
  • Robert Hofer

    Robert Hofer September 28th, 2010 @ 02:01 PM

    you bet, reading is one, understanding what you read another pair of shoes ;-)
    Thank you for your snippet; the thing is, that my posting is just a reduced case. In my framework tags are decorated with classes and userdefined tags. So $$observing is still needed,but with your hint in mind i will redesign some of my js-scripts, when there is time.

  • Robert Hofer

    Robert Hofer September 28th, 2010 @ 04:03 PM

    rereading my receent comment: rubbish, forget it!

  • Robert Hofer

    Robert Hofer October 12th, 2010 @ 06:03 PM

    • Assigned user set to “Tobie Langel”

    hi Arthur,
    now, after studing your really compact example , i redesigned some calls in my js-php-framework:
    i run into trouble with the following reduced example: (prototype version 1.7_rc2)

    <SCRIPT type="text/javascript" src="prototype.js"></SCRIPT>
    <body>
    <input type=text><br>
    <input type=text><br>
    </body>
     <script type="text/javascript">
    //$$('input').invoke('observe','blur',function (){alert('blur')})//<--this works       
    document.body.on("blur","input,",function (){alert('blur')})//<--- doesent work, blur not supported, i guess, change, click work fine </script>
  • Tobie Langel

    Tobie Langel October 13th, 2010 @ 12:12 AM

    Folks, please, this is a bug tracker, not a mailing list. Thanks.

  • chenlina1

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages