Search code examples
javascriptjquerytwitter-bootstrappolymerplatform

Platform.js (Polymer), jQuery 2.x.x and Bootstrap - error

I have a strange error after I've included Platform.js (v0.3.4) (Polymer), jQuery (v2.x.x) and Bootstrap.js (v3.2.0) on an empty page.

With Safari and Firefox, on some events, such as click or keyup, on the (empty) page, it throws an error :

TypeError: 'undefined' is not a function (evaluating 'elem.getAttribute( name )')

There is no problem with jQuery v1.11.1, and I didn't try other versions of Platform. Neither with Chrome or Opera.

If I replace all the 'click' by 'dblclick' in Bootstrap, there is no more error on click (it occurs on dblclick of course).

Well, it's no big deal but it is surprising.

Here is the code to test:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PJB</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
    </head>
    <body>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    </body>
</html>

If anyone have any idea of how to avoid this error without breaking Bootstrap, jQuery of Platform, I'ld be glad to know.

Thanks.

Solution

  • I believe the problem is related to this issue: https://github.com/Polymer/platform/issues/69

    The fix seems to be to wrap document and/or document.body. ex:

    (function(document) {
  // add your jquery handlers here...
  $(document).on('click', ...);
})(wrap(document));

    More explanation here: http://www.polymer-project.org/platform/shadow-dom.html#wrappers