How to solve jQuery conflict between Prototype and DataPicker or Tooltip?

Question

I have a problem with my backend aplication. I have data field in my form, for which I am using plugin jQuery DataPicker. At first it works fine - when I click on the field calendar box pops up. The problem is that when I actually select any date, the calendar and the date field disappear.

I checked this input in Developer Tools (or Firebug) and I noticed that style 'display: none' was added to my input.

My code looks like this:

HTML

<head>
    // prototype version 1.7
    <script type="text/javascript" src="js/prototype.js"></script>
    <script src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script src="js/bootstrap-datepicker.js"></script>
</head>
..
<div class="form-group" id="data_1">
    <label>Creation date</label> 
    <div class="input-group date">
        <input type="text" class="form-control valid" name="CreationDate" 
            id="CreationDate" value="29.09.2015" aria-invalid="false">
    </div>
</div>

Later:

...
<div class="input-group date" style="display: none;">
...

Code jQuery looks like this:

jQuery

jQuery(document).ready(function ($) {
  ..                     
    $('#data_1 .input-group.date').datepicker({
      todayBtn: "linked",
      keyboardNavigation: false,
      forceParse: false,
      calendarWeeks: true,
      autoclose: true,
      format: "dd.mm.yyyy"
    });
  ..
});

When I disable Prototype then my input works great! Then I'm enabling Prototype and here we go again.

I tried to remove this method from Prototype

Element.Methods = {

   hide: function(element) {
      element = $(element);
      element.style.display = 'none';
      return element;
   }
}

my DataPicker worked. I can't remove this method because another function on my page won't work.

There is similar problem with ToolTip. When I hover over the hint icon ToolTip box appears and I can see the message properly. But when I move the cursor away then both - the tooltip and related object (again 'display: none' style set).

I have jQuery.noConflict on my page and it doesn`t solve this problem. How can I solve this problem? Please, help me :)

Answer 1

In the datpicker javascript file at line 510

this._trigger('hide');

Inside this method it is attempting to fire a jQuery event, because of the way that jQuery handles events and custom events it will look at the methods defined on the DOM object, and then go to native events and then custom events (I think) so it is finding the Element#hide() method that sets the style to display:none

so 2 solutions

comment that line out
if you are using the hide event, rename the event to a different name. I like namespacing the event, eg datepicker:hide

How to solve jQuery conflict between Prototype and DataPicker or Tooltip?

Question

1 answers

solution1
0 2015-10-22 20:27:36

How to solve jQuery conflict between Prototype and DataPicker or Tooltip?

Question

1 answers

solution1 0 2015-10-22 20:27:36

solution1
0 2015-10-22 20:27:36