Skip to main content
deleted 5 characters in body
Source Link
Eric Huiza
  • 9.4k
  • 15
  • 28

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 withwhen you have more 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.

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 with you have more 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.

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.

Source Link
Eric Huiza
  • 9.4k
  • 15
  • 28

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 with you have more 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.