1

Accompanying jsFiddle with reproduction of problem: http://jsfiddle.net/ComradeF/M9e94/

I am using Foundation and Knockout together on a project. One of the challenges I faced was that when new tabs needed to be rendered, Knockout would comply, but clicking the tabs wouldn't do anything. The solution to that was a call to $(document).foundation('reflow') in a custom binding. Unfortunately, that solution may be either insufficient or just plain wrong, as it is now associated with an error I am receiving.

I tried to add tooltips to the tabs and some of their content via the data-tooltip attribute in my markup, only to get errors on line 1422 of jQuery 2.1.0. That line is elem.getAttribute( name ), and the error is undefined is not a function. In this situation, elem is a comment, and thus has no getAttribute() function.

The error can be eliminated either by removing the comment (<!-- this is a comment -->) in the markup, or by removing the data-tooltip attribute in the tab's link.

I realize the quick fix is for me to remove the HTML comments from my markup, but I feel like this may be a symptom of something worse lurking... so I'd prefer to investigate and solve rather than take the easy way out.

DJ Grossman
  • 600
  • 6
  • 17

2 Answers2

1

I have come across the same problem (except I am working on an Angular js project).

I have not been able to find a solution yet but I have found a work around. If anyone knows a good solution please let me know.

My work around was to reduce the scope of the $(document).foundation('reflow'); to avoid any html comments elements (which are unfortunately necessary and common in Angular js apps).

e.g. $(element.find("nav")).foundation('tooltip', 'reflow'); This at least stops the errors happening in my specific use case.

sacummins
  • 11
  • 3
0

I tried fixing this using sacumminis's solution - that removed the exception but it also made my tooltips stop working.

However this thread had a solution by Ayush Gupta which worked perfectly. I'm using this with Angular rather than Knockout so I simply put it early in my app.js file. What you need to do is add this chunk of code somewhere early in your app code:

Object.getPrototypeOf(document.createComment('')).getAttribute = function() {}

The error is now gone and tooltips work well. Hope it helps someone.

Community
  • 1
  • 1
tkit
  • 8,082
  • 6
  • 40
  • 71
  • This isn't really a solution IMHO. It's just a hack that stops the error from showing up. The real problem is, that some code calls `getAttribute` on a comment node. And that seems to be related to `data-tooltip` and the `reflow` function. – britter Oct 26 '15 at 12:58
  • @britter I fully agree. But in my case I really wasn't sure which part of which framework was calling it and didn't have enough time to investigate further to report/fix/patch the bug. – tkit Oct 27 '15 at 13:25