jQuery not available when customizing the UI

Tagged: , ,

This topic has 1 reply, 1 voice, and was last updated 3 months ago by aortiz.

  • Author
    Posts
  • #28096
     aortiz
    Participant

    Hi All!
    In AM 5.5 i used jQuery code when customizing the UI following the guidelines to do so, it worked out pretty neat at the moment.

    Now we are currently using AM 6.5 and we did some customization following the documentation, specifically this https://backstage.forgerock.com/docs/am/6/ui-customization-guide/#chap-customize-customization and still using jQuery code as we did in the previous version, but now we are experiencing this well known error:

    Uncaught (in promise) ReferenceError: $ is not defined
    at eval (eval at globalEval (jquery.js?1157:9190), <anonymous>:1:1)

    We assume that at the moment that the page is rendered, jQuery library is not available and that’s why we are getting this error. Afterwards, when page is fully loaded we check at the Developer Tool’s console and we see that jQuery is loaded so we don’t fully understand why it is not available at the moment of rendering.

    To give a more precise example, we are customizing the _Password.html file and we tried this 2 ways of waiting for the DOM to be fully loaded before using the custom code

    $(document).ready(function () {
    console.log(“v1: jQuery is ready…”)
    })

    And this one:

    (function( $ ) {
    console.log(“v3: jQuery is ready…”)
    console.log($)
    console.log(window.jQuery)
    console.log(window.$)
    })( window.jQuery );

    And still getting the undefined error.
    Has anyone experienced a problem like this?

    #28099
     aortiz
    Participant

    Wanted to add some more information about my original question.

    We found that XUI build process with yarn in AM 6 has changed from AM 5.
    For jQuery libraries, Webpack(webpack.config.js) is using this statement to inject jQuery dependencies:

    “new ProvidePlugin({
    $: “jquery”,
    jQuery: “jquery”,
    “window.jQuery”: “jquery”
    }),”

    But in our case we are using jQuery in the html template (for example: /theme/dark/partials/login/_Password.html) to achieve custom logic form validation, but this is not working as we get that jQuery is undefined.
    We have no intention of migrating all of our custom logic to JS without jQuery as this would be a titanic work, does anyone know how if its possible to use jQuery directly in HTML?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

©2020 ForgeRock - we provide an identity and access platform to secure every online relationship for the enterprise market, educational sector and even entire countries. Click to view our privacy policy and terms of use.

Log in with your credentials

Forgot your details?