13

I'm trying to answer a question on what versions of JQuery work with SDL Tridion GUI extensions.

I understand that the Anguilla Project uses Sizzle, a sort of subset of JQuery, as a selector engine. This front-end script manipulates Editor markup and sends/gets back-end data from web services. But I am not sure how Tridion GUI extensions relate to JQuery itself.

Is there a dependency on specific JQuery versions? Or in other words, what would GUI extension developers need to do to use their preferred-version-of-JQuery in a Tridion GUI extension?

Improve this question

3 Answers 3

Reset to default
20

JQuery is an independent library, that can co-exist with other libraries like Anguila. Here some steps that enable a developer to use JQuery in a GUI extension.

1) Update your JQuery file to use the noConflict method and pass it to a variable called for instance $j.

2) Reference the updated JQuery file in a group of resources used by your GUI Extension.

<cfg:file type="script">/External/jquery-version.js</cfg:file>

3) Start using JQuery with the $j variable name or jQuery instead of $ which will be used for Anguila.

As a best practice when you have multiple GUI extensions that use JQuery, it does not make any sense to reference JQuery in each GUI Extension, in that case I would recommend to extend a Resources Group.

<cfg:extensiongroup name="JQueryGroup">
    <cfg:extension target="Tridion.Web.UI.Controls.RibbonToolbar">
        <cfg:insertafter>JQuery</cfg:insertafter>
    </cfg:extension>
</cfg:extensiongroup>


<cfg:group name="JQuery">
    <cfg:fileset>
        <cfg:file type="script">/External/jquery-version.js</cfg:file>
    </cfg:fileset>
</cfg:group>

<resourceextensions>
      <resourceextension>JQueryGroup</resourceextension>
</resourceextensions>

Using that approach we will have JQuery always available for all our GUI Extensions.

Improve this answer
2
  • +1 and accepted! Thanks for the clarification and great tip on consolidating the setup across multiple GUI extensions.
    – Alvin Reyes
    Commented Jun 10, 2013 at 20:31
  • 1
    Just learned that "Update your JQuery file to use the noConflict method " means adding window.$j = jQuery.noConflict(true); to the end of the jquery-<version>-[minified].js file.
    – Jan H
    Commented Nov 5, 2013 at 14:36
7

I like Eric's answer and it's certainly the most accurate. I've found it to be a generally good idea to keep the versions of jQuery consistent across all extensions. There are functions and methods which are deprecated between major versions of jQuery.

Based on what I've seen, any version of jQuery will work with Tridion. However, there is a caveat:

  • jQuery 1.x works in IE6+
  • jQuery 2.x is IE9+

It's probably a good idea to choose your version of jQuery to match the browsers that Tridion supports, so I wouldn't use jQuery 2.0 in anything less than Tridion 2013.

Improve this answer
0
5

As you say, the Anguilla project (Tridion's GUI development framework) uses Sizzle, which is the selection engine of JQuery. Since the selection engine was factored out of JQuery, you can use it without a dependency on the rest of JQuery.

What this means is that Anguilla doesn't have a dependency on JQuery; only on Sizzle. Having said that, many GUI extension developers will immediately add a dependency to JQuery, as it's a useful library, but in that case, you need to look at the documentation of the extension rather than that of Tridion itself.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.