javascriptajaxjquery-eventstapestryonkeyup

Javascript error: $(...).observe is not a function


I'm trying to use Stitch onEvent mixin in Tapestry 5.3.7.

Here's the OnEvent Javascript from there:

T5.extendInitializers({
   onEvent: function (spec) {
      var element = $(spec.id).observe(spec.event, function () {
         var params = {};
         if (spec.fieldIds) {
            for (var i = 0; i < spec.fieldIds.length; ++i) {
               var fieldId = spec.fieldIds[i];
               var paramName = "onEvent." + fieldId;
               var paramValue = $(fieldId).getValue();
               params[paramName] = paramValue;
            }
         }
         var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
         zoneManager.updateFromURL(spec.url, params);
      });
   }
});

I use it in my TML like this:

<t:form t:id="filterTextForm">
    <div style="float:right">
        <input id="filterText" t:id="filterText" t:type="textfield" 
            t:value="filter" zone="configZone" t:autofocus="literal:true" onClick="this.select()" t:mixins="onEvent" event="keyup"/>
    </div>
</t:form>

and my event method like this:

void onKeyupFromFilterText(String filter) {
    this.filter = filter;
    
    if (request.isXHR()) {
        ajaxResponseRenderer.addRender(configZone).addRender(descZone);
    }
}

When I have t:mixins="onEvent" event="keyup", none of the zones are updating on the page, no AJAX requests are generated.

When I remove it, everything works fine, except the part I'm trying to do, described in my question.

I'm using Tapestry 5.3.7.


Solution

  • observe() is a prototype function. I'm guessing that you're using tapestry-jquery which is a 3rd party library that removes prototype and replaces it with jquery.

    You'll need to adapt the javascript to work with jquery (eg observe() needs to change to on())

    You might find other bits of js broken too (eg I'm not sure if tapestry-jquery's ZoneManager is exactly the same as core tapestry).

    tapestry-jquery comes with a builtin bind mixin which does a similar job to onevent. You might find it sufficient to use this mixin instead.