Search code examples
javascriptjquerydomprototypejsdom-events

Is it possible to fix this conflct with prototype.js and jquery.js without no conflict?


For a phone validation I am using in prototype.js a ...

<body onload="Xaprb.InputMask.setupElementMasks()">

That is actually an older version (1.4) and an upgrade to (1.7) would not work. Here is the code placed into the page...

<script type="text/javascript" language="javascript">
//<![CDATA[
if ( typeof(Xaprb) == 'undefined' ) {
   Xaprb = new Object();
}

Xaprb.InputMask = {
masks: {
phone: {
         format: '(   )   -    ',
        regex:  /\d/
      }
      },
      setupElementMasks: function() {
      if ( document.getElementsByClassName ) { // Requires the Prototype library
         document.getElementsByClassName('input_mask').each(function(item) {
            Event.observe(item, 'keypress',
               Xaprb.InputMask.applyMask.bindAsEventListener(item), true);
         });
      }
   },
   applyMask: function(event) {
      var match = /mask_(\w+)/.exec(this.className);
      if ( match.length == 2 && Xaprb.InputMask.masks[match[1]] ) {
          var mask = Xaprb.InputMask.masks[match[1]];
     var key  = Xaprb.InputMask.getKey(event);

         if ( Xaprb.InputMask.isPrintable(key) ) {
            var ch      = String.fromCharCode(key);
            var str     = this.value + ch;
            var pos     = str.length;
        if ( mask.regex.test(ch) && pos <= mask.format.length ) {
           if ( mask.format.charAt(pos - 1) != ' ' ) {
              str = this.value + mask.format.charAt(pos - 1) + ch;
           }
           this.value = str;
        }
        Event.stop(event);
     }
  }
  },
   isPrintable: function(key) {
      return ( key >= 32 && key < 127 );
   },
   getKey: function(e) {
      return window.event ? window.event.keyCode
           : e            ? e.which
           :                0;
   }
};
//]]>
</script>

Forgive me but I am fairly new to this subject if missing something simple. It basically validates the phone number as the customer types it in. This is located a http://www.comparediabetictestingsupplies.com and actually forces the sliders through jreviews not function (this is a Joomla! CMS). I also want to add, I changed all 75 '$' to '_' in prototype.js.


Solution

  • I ended up finding prototype.maskedinput.js that works with the prototype.js 1.6.1. This ended up changing the code around, but solved not only a conflict with jquery, but also mootools. You can find the source at https://github.com/bjartekv/MaskedInput/blob/master/prototype.maskedinput.js