You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by John <jo...@quivinco.com> on 2013/10/31 15:13:04 UTC

prototype and jquery conflicts

I'm having problems getting jquery operational without suppressing prototype.

If I do not supress prototype then jquery components are unresponsive, I thought I could use both libraries at the same time?

If I suppress prototype then components with action links and submits become unresponsive, see below issues:

Uncaught ReferenceError: Class is not defined ZoneUpdater.js:5
(anonymous function) ZoneUpdater.js:5
Uncaught ReferenceError: ZoneUpdater is not defined
(anonymous function)
T5.extendInitializers.evalScript tapestry-jquery.js:210
(anonymous function) tapestry-jquery.js:37
jQuery.extend.each jquery-1.7.2.js:660
(anonymous function) tapestry-jquery.js:31
jQuery.extend.each jquery-1.7.2.js:654
$.extend.init tapestry-jquery.js:21
(anonymous function) tapestry-jquery.js:1073
jQuery.extend.each jquery-1.7.2.js:660
jQuery.fn.jQuery.each jquery-1.7.2.js:271
$.tapestry.utils.executeInits tapestry-jquery.js:1071
(anonymous function) tapestry-jquery.js:1050
script.onload.script.onreadystatechange tapestry-jquery.js:972

--------------------------------------------------------------------------------------------

// A class that updates a zone on any client-side event.
// Based on http://tinybits.blogspot.com/2010/03/new-and-better-zoneupdater.html
// and some help from Inge Solvoll.

ZoneUpdater = Class.create( {

    initialize : function(spec) {
        this.element = $(spec.elementId);
        this.listenerURI = spec.listenerURI;
        $(this.element).getStorage().zoneId = spec.zoneId;
  
        if (spec.clientEvent) {
            this.clientEvent = spec.clientEvent;
            this.element.observe(this.clientEvent, this.updateZone.bindAsEventListener(this));
        }
    },
 
    updateZone : function() {
        var zoneManager = Tapestry.findZoneManager(this.element);
  
        if (!zoneManager) {
            return;
        }

        var listenerURIWithValue = this.listenerURI;
  
        if (this.element.value) {
            var param = this.element.value;
            if (param) {
                listenerURIWithValue = addQueryStringParameter(listenerURIWithValue, 'param', param);
            }
        }
  
        zoneManager.updateFromURL(listenerURIWithValue);
    }
 
} )

function addQueryStringParameter(url, name, value) {
    if (url.indexOf('?') < 0) {
        url += '?'
    } else {
        url += '&';
    }
    value = escape(value);
    url += name + '=' + value;
    return url;
}

Re: prototype and jquery conflicts

Posted by John <jo...@quivinco.com>.
I see I need to replace zoneUpdater with jquery bind, but bind doesn't seem to pass the current value of the associated input field to the event method. I was picking this up using request.getParameter("parm").

Any suggestions on how to achieve this zoneUpdater functioanilty with jquery? The user needs to be able to put in a key field value and have this passed to the server for a lookup to auto complete some form fields.

John



  ----- Original Message ----- 
  From: John 
  To: users@tapestry.apache.org 
  Sent: Thursday, October 31, 2013 2:13 PM
  Subject: prototype and jquery conflicts


  I'm having problems getting jquery operational without suppressing prototype.

  If I do not supress prototype then jquery components are unresponsive, I thought I could use both libraries at the same time?

  If I suppress prototype then components with action links and submits become unresponsive, see below issues:

  Uncaught ReferenceError: Class is not defined ZoneUpdater.js:5
  (anonymous function) ZoneUpdater.js:5
  Uncaught ReferenceError: ZoneUpdater is not defined
  (anonymous function)
  T5.extendInitializers.evalScript tapestry-jquery.js:210
  (anonymous function) tapestry-jquery.js:37
  jQuery.extend.each jquery-1.7.2.js:660
  (anonymous function) tapestry-jquery.js:31
  jQuery.extend.each jquery-1.7.2.js:654
  $.extend.init tapestry-jquery.js:21
  (anonymous function) tapestry-jquery.js:1073
  jQuery.extend.each jquery-1.7.2.js:660
  jQuery.fn.jQuery.each jquery-1.7.2.js:271
  $.tapestry.utils.executeInits tapestry-jquery.js:1071
  (anonymous function) tapestry-jquery.js:1050
  script.onload.script.onreadystatechange tapestry-jquery.js:972

  --------------------------------------------------------------------------------------------

  // A class that updates a zone on any client-side event.
  // Based on http://tinybits.blogspot.com/2010/03/new-and-better-zoneupdater.html
  // and some help from Inge Solvoll.

  ZoneUpdater = Class.create( {

      initialize : function(spec) {
          this.element = $(spec.elementId);
          this.listenerURI = spec.listenerURI;
          $(this.element).getStorage().zoneId = spec.zoneId;
    
          if (spec.clientEvent) {
              this.clientEvent = spec.clientEvent;
              this.element.observe(this.clientEvent, this.updateZone.bindAsEventListener(this));
          }
      },
   
      updateZone : function() {
          var zoneManager = Tapestry.findZoneManager(this.element);
    
          if (!zoneManager) {
              return;
          }

          var listenerURIWithValue = this.listenerURI;
    
          if (this.element.value) {
              var param = this.element.value;
              if (param) {
                  listenerURIWithValue = addQueryStringParameter(listenerURIWithValue, 'param', param);
              }
          }
    
          zoneManager.updateFromURL(listenerURIWithValue);
      }
   
  } )

  function addQueryStringParameter(url, name, value) {
      if (url.indexOf('?') < 0) {
          url += '?'
      } else {
          url += '&';
      }
      value = escape(value);
      url += name + '=' + value;
      return url;
  }