Full Disclosure: Jr Dev ~ Hello All, Recently began working with EE, although I do have some limited JQuery experience. I did my best to avoid the question but several days / weeks looking over the docs and searching has still left me unsure as to how best implement Jquery in EE. I'm having similar issues as others here, scripts breaking when passing EE Variables etc. Other than the official EE docs which are a bit anemic (imho) on jquery, are there any other resources / suggestions to mastering jquery IN EE? It seems like one could avoid multiple issues down the road by proper implementation. Thanks for sharing your thoughts.
1 Answer
I'm sure there are many ways to handle jQuery and EE but in my experience, for frontend work I tend to not use the jQuery provided with EE and just link in the version that I want to use.
I always place the main jQuery link in an included footer or header and when necessary I'll add script tags that are specific to a page at the bottom of the page template or in a separate include file depending on my site requirements.
Because I set my own jQuery version, I make sure to turn off EE's version when using channel forms because there is no reason to load multiple versions on a page.
Sometimes I will use template tags inside script tags to work with variables and sometimes I'll add a script variable inside a channel loop that will pass a variable to a function located elsewhere.
If things are not working for you it's usually a syntax problem or a parse order issue, but without knowing what you are trying to do, it's near impossible to give specific advice.
I apologize if you are wanting info on EE's tags for including jQuery or EE's JavaScript type templates. I have found both things to be troublesome to work with and I decided to go with a more direct route like what would be used on a non EE site. Having said that I've build some pretty good sized web applications with EE and jQuery. Many of my apps rely on using EE to control the data and then using jQuery with a channel form to build new input data or change the displayed data. If I can help I'll be glad to do so.
One more note, if your need to get a better grasp of how jQuery works, I highly recommend the free interactive training at CodeAcademy.