polymer and jquery

[Sean Lee]

I was using polymer with jquery, but it seems that the $ is causing some problem. 

I keep getting 

TypeError: Object #<Object> has no method 'getAttribute'

when I click anywhere in the page.

Anyone have experience using these two together? 

[Daniel Freedman]

We have some basic tests for jquery + polymer, but nothing too involved.

Can you share a bit more detail about what your setup? Is polymer being loaded before jquery? The opposite order could cause a whole host of issues, as the Shadow Dom polyfill has to modify some DOM APIs like queryselector to work properly.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Sean Lee]

I was loading polymer after jquery, but I found that I problem is actully from bootstrap.js.

Now I'm loading polyer first, using requirejs to load other js library, now my order is

    <script src="/static/js/lib/polymer.min.js"></script>

    <script src="/static/js/lib/require.js"></script>

    <script src="/static/js/mod/common.js"></script>

    <script src="/static/js/app/main.js"></script>

In the main.js I'm simply looking if the bootstap is load correctly.

require(['jquery', 'bootstrp'], function ($, _bootstrap) {

  console.log($.fn.affix);

});

If I only load jquery, nothing is wrong. if I load bootstrap, and the console keep poping up the error

TypeError {stack: "TypeError: Object #<Object> has no method 'getAttr…0.0.0:8888/static/js/lib/polymer.min.js:32:21430)"}

"TypeError: Object #<Object> has no method 'getAttribute' at Function.ot.attr (http://0.0.0.0:8888/static/js/lib/jquery.min.js:4:14427) at Array.<anonymous> (http://0.0.0.0:8888/static/js/lib/jquery.min.js:4:16241) at http://0.0.0.0:8888/static/js/lib/jquery.min.js:4:21015 at Tt.a (http://0.0.0.0:8888/static/js/lib/jquery.min.js:4:22596) at kt (http://0.0.0.0:8888/static/js/lib/jquery.min.js:4:23640) at Function.ot (http://0.0.0.0:8888/static/js/lib/jquery.min.js:4:9477) at HTMLDocument.x.event.handlers (http://0.0.0.0:8888/static/js/lib/jquery.min.js:5:10458) at HTMLDocument.x.event.dispatch (http://0.0.0.0:8888/static/js/lib/jquery.min.js:5:9715) at Object.y.handle (http://0.0.0.0:8888/static/js/lib/jquery.min.js:5:6789) at v (http://0.0.0.0:8888/static/js/lib/polymer.min.js:32:21430)"

--

Best regards,

Sean Lee

[Erik Arvidsson]

This sounds like there is a bug in the shadow dom polyfill. However, I need more information.

A few things that might help.

1. Make sure you have a recent version of jQuery. DOM removed getAttribute from non Element objects and it is possible that old jQuery tries to get an attribute of a non element.

2. Break on all errors in your debugger and check what object getAttribute is being called on. If it is not an element, did you expect it to be an element?

3. Post a repro case online for me to debug.

Thanks

erik

[jher...@gmail.com]

Hi, I'm experiencing a similar issue with jquery + polymer. The stack trace I get is the following:

TypeError {stack: "TypeError: Object #<Object> has no method 'aMethod…rgeh/rhythmGeometry/libs/polymer.min.js:32:25185)"}

"TypeError: Object #<Object> has no method 'aMethod' at HTMLDocument.<anonymous> (http://localhost/~jorgeh/rhythmGeometry/webCompTest.html:23:18) at fire (http://localhost/~jorgeh/rhythmGeometry/libs/jquery-1.9.1.js:1037:30) at Object.self.fireWith [as resolveWith] (http://localhost/~jorgeh/rhythmGeometry/libs/jquery-1.9.1.js:1148:7) at Function.jQuery.extend.ready (http://localhost/~jorgeh/rhythmGeometry/libs/jquery-1.9.1.js:433:13) at Object.completed (http://localhost/~jorgeh/rhythmGeometry/libs/jquery-1.9.1.js:103:11) at v (http://localhost/~jorgeh/rhythmGeometry/libs/polymer.min.js:32:26221) at t (http://localhost/~jorgeh/rhythmGeometry/libs/polymer.min.js:32:25576) at r (http://localhost/~jorgeh/rhythmGeometry/libs/polymer.min.js:32:25321) at q (http://localhost/~jorgeh/rhythmGeometry/libs/polymer.min.js:32:25185)"

And here you can see the code that generates the error. Any help is appreciated.

Thanks!

[jher...@gmail.com]

I should add that I tested without jquery (clicking a button to call the aMethod in the custom element) and it works ok, so there's something breaking when using jquery.

[Scott Miles]

Did you make sure to load polymer before jquery?

[Scott Miles]

Yes you did, sorry I didn't see the code link at first.

[Scott Miles]

Document-ready time is likely too early to access API on custom elements. You should listen for the `WebComponentsReady` event.

addEventListener('WebComponentsReady', function() {

  var test = document.querySelector("gr-test");
  console.log(test);

  test.aMethod();

});

[Jorge Herrera]

That did the trick. Thanks!

[dmitry....@gmail.com]

Yes it works, looks like WebComponentsReady is raised after templates applied.

Also you can try modify template content. Make it sense?

$(document).ready(function() {

var host = document.querySelector('template');

$(host.content.querySelector('div#myID')).html('donatello is the best ninja turtle');

});

[alx....@gmail.com]

I have same issue when i load bootstrap.js (like Sean Lee). Including boostrap.js after WebComponentsReady not work

вторник, 22 октября 2013 г., 14:38:23 UTC+4 пользователь Sean Lee написал:

[asi...@gmail.com]

Hi, does anyone have a solution?

[Scott Miles]

Try inserting this shim right after JQuery but before Bootstrap.

<script>

  if (window.ShadowDOMPolyfill) {

    // blunt hack for ShadowDOM Polyfill inability to wrap `document` and `document.body`

    jQuery.fn._init = jQuery.fn.init;

    jQuery.fn.init = function(selector, context) {

      if (selector && selector.nodeType) {

        selector = ShadowDOMPolyfill.wrapIfNeeded(selector);

      }

      return jQuery.fn._init(selector, context);

    }

  }

</script>

On Mon, Apr 7, 2014 at 4:59 AM, <asi...@gmail.com> wrote:

Hi, does anyone have a solution?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/73bf8d3c-5a8b-4b73-81c2-afbc308f0c22%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Scott Miles]

Fwiw, I only tried that shim with jquery 2.1.

[ferl...@gmail.com]

Sorry to jump in, I'm trying to find a solution as well.

I've tried Scott solution, but:

TypeError: context is null
fragment = context.createDocumentFragment(),
jquery... (line 5015)

[asi...@gmail.com]

It's work for me with that dependencies order : 

        <!-- bootstrap must be import before platform to avoid TypeError: Object #<Object> has no method 'getAttribute' -->        

        <script src="bower_components/jquery/dist/jquery.min.js"></script>

        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

        <!-- Polymer platform -->

        <script src="bower_components/platform/platform.js"></script>

 

[Erik Arvidsson]

Always put platform.js first.

Could you provide a stacktrace (use platform-dev instead of platform)?

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2889ca2c-0480-4dc3-ab18-69d9818d4dda%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
erik

[eddie....@gmail.com]

Has there been any resolution to this issue? I'm running into a similar issue when using Polymer with jQuery and Foundation 5.

Once I include platform.js above all scripts in <head> all my Foundation components stop working. I also get the following error in Safari (Version 6.1.4 (8537.76.4)) when I click anywhere on the page:

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

I have this issue logged on the Platform Github issues page with more info on the issue but haven't heard any response back yet.

[kielni...@gmail.com]

I'm having this same problem with jQuery expecting a .getAttribute on a node.  It's failing when it's checking for other click handlers (before it gets to mine).  Here's the stack trace from clicking a div inside a polymer-element with an on-click handler:

Sizzle.attr(elem=Document { impl=document, treeScope_={...}, documentElement=GeneratedWrapper, more...}) jquery.js (line 1707)
Sizzle.selectors.filter.ATTR/<(elem=Document { impl=document, treeScope_={...}, documentElement=GeneratedWrapper, more...}, context=Document 1261204759648, xml=false) jquery.js (line 1900)
elementMatcher/<(seed=[Document { impl=document, treeScope_={...}, documentElement=GeneratedWrapper, more...}], context=Document 1261204759648, xml=false, results=[], expandContext=false) jquery.js (line 2395)
matcherFromGroupMatchers/superMatcher() jquery.js (line 2602)
select() jquery.js (line 2769)
Sizzle() jquery.js (line 1154)
jQuery.event.handlers() jquery.js (line 4721)
jQuery.event.dispatch() jquery.js (line 4658)
jQuery.event.add/elemData.handle() jquery.js (line 4360)
invoke() events.js (line 404)
dispatchBubbling() events.js (line 323)
dispatchEvent() events.js (line 287)
dispatchOriginalEvent()

I have included platform.js first, then jQuery 2.0.3, then Bootstrap 3.0.3.  I put an issue with more details at https://github.com/Polymer/polymer/issues/625

Kimberly