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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Javascript error: $(…).observe is not a function without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.

Answer

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.

We are here to answer your question about Javascript error: $(…).observe is not a function - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji