Shape tracing broken when using Foundation responsive framework

Topics: Troubleshooting
Apr 9, 2013 at 3:46 AM
Using Orchard 1.6 with jQuery 1.8.2 and Foundation responsive framework 3.

If I include foundation.min.js and app.js from foundation javascript folder, shape tracing doesn't work properly. When clicking on a highlighted item to try to view info in shape tracing window, I get the following javascript error:

Uncaught TypeError: Object [object Object] has no method 'tmpl'

The error occurs in orchard-designertools-shapetracing.js at line 347:
// render the template
if (currentShape && shapeTracingMetadataHost[currentShape]) {
    $("#shape-tracing-tabs-shape-template").tmpl(shapeTracingMetadataHost[currentShape]).appendTo(shapeTracingMetaContent);
}
However, if I copy the selector into the debug console and evaluate: $("#shape-tracing-tabs-shape-template").tmpl

It does point to a function.

Does anyone know what might be happening here?

Thanks
Coordinator
Apr 11, 2013 at 5:33 AM
Any frames or iframes involved in this?
Apr 11, 2013 at 6:08 AM
I do have an iframe in the page but it's completely unrelated... it's just a Vimeo iframe.
Coordinator
Apr 11, 2013 at 6:24 AM
I'm asking because JavaScript can be confusing this way when you test for an object but in reality the one that you care about is in a different document. So you're saying that when you break into the debugger at the place where the error occurs, and evaluate this same expression in the console, you do get a result, whereas the browser complains that there isn't one?
Apr 11, 2013 at 6:33 AM
Ok, removed the iframe, no change.

That's right - in console it doesn't have any problem running, but in that context it does. Interestingly, if I replace $() with jQuery() in the above code temporarily, it doesn't cause the same error.
Coordinator
Apr 11, 2013 at 6:51 AM
Aha! Does that Foundation framework redefine $?
Apr 11, 2013 at 11:49 PM
Ahh well done Bertrand. I had checked that foundation wasn't including jQuery again and overwriting it... and it wasn't including jQuery.js, BUT... it actually encapsulates jQuery inside it's own file foundation.min.js. How evil! So yes, $ was being redefined. Thanks for pointing me in the right direction!