title: Javascript error: $(...).observe is not a function
body: <p>I'm trying to use <a href="http://tapestry-stitch.uklance.cloudbees.net/oneventdemo" rel="nofollow noreferrer">Stitch onEvent mixin</a> in Tapestry 5.3.7.</p>
  <p>Here's the <code>OnEvent</code> Javascript from there:</p>
  <pre><code>T5.extendInitializers({
     onEvent: function (spec) {
        var element = $(spec.id).observe(spec.event, function () {
           var params = {};
           if (spec.fieldIds) {
              for (var i = 0; i &lt; spec.fieldIds.length; ++i) {
                 var fieldId = spec.fieldIds[i];
                 var paramName = &quot;onEvent.&quot; + fieldId;
                 var paramValue = $(fieldId).getValue();
                 params[paramName] = paramValue;
              }
           }
           var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
           zoneManager.updateFromURL(spec.url, params);
        });
     }
  });
  </code></pre>
  <p>I use it in my TML like this:</p>
  <pre><code>&lt;t:form t:id=&quot;filterTextForm&quot;&gt;
      &lt;div style=&quot;float:right&quot;&gt;
          &lt;input id=&quot;filterText&quot; t:id=&quot;filterText&quot; t:type=&quot;textfield&quot; 
              t:value=&quot;filter&quot; zone=&quot;configZone&quot; t:autofocus=&quot;literal:true&quot; onClick=&quot;this.select()&quot; t:mixins=&quot;onEvent&quot; event=&quot;keyup&quot;/&gt;
      &lt;/div&gt;
  &lt;/t:form&gt;
  </code></pre>
  <p>and my event method like this:</p>
  <pre><code>void onKeyupFromFilterText(String filter) {
      this.filter = filter;
      
      if (request.isXHR()) {
          ajaxResponseRenderer.addRender(configZone).addRender(descZone);
      }
  }
  </code></pre>
  <p>When I have <code>t:mixins=&quot;onEvent&quot; event=&quot;keyup&quot;</code>, none of the zones are updating on the page, no AJAX requests are generated.</p>
  <p>When I remove it, everything works fine, except the part I'm trying to do, described in my question.</p>
  <p>I'm using Tapestry 5.3.7.</p>