No announcement yet.

Using JavaScript Resources & resource groups

  • Filter
  • Time
  • Show
Clear All
new posts

    Using JavaScript Resources & resource groups

    I feel like I must be missing something fundamental in this.

    I have read through the docs page about JS Resources --

    I have an inline script that uses jQuery
    $(document).ready(function () {
      $('').click(function () {
        window.location.hash = 'top';
        return false;
    This is wrapped up in a resource listing --

    Assigned to a page --

    Assigned to a resource group --

    Added a mvt tag to the footer section of the page
    <mvt:item name="foot_tag" param="search-focus" />
    The HTML to hang the functionality on:

    But when I load the page, the button doesn't respond. --

    I can run the javascript from the browser console, but it doesn't seem to load into the page from any other location, and just putting a script tag in the footer does not work either.

    I can see the request for the jQuery CDN in the network tab, so I can tell it's coming in.

    When I had it as a simple script tag, the error console kept saying that '$' was 'undefined' it did the same when I tried to use jQuery in no conflict mode too.

    20201029-1158 - Something of an update:

    I added the following to the footer of the page:
    <mvt:item name="head" param="js:search-focus" />
    in the page footer, and it showed up in the list of loaded scripts in the browser console. BUT it's give the "undefined" error.
    Last edited by cpp-dev; 10-29-20, 10:58 AM.


      Well some more poking around in "View Page Source" got me the answer to my "Why isn't it functioning the way I expect?" question.

      The reason being, the JS resource was added to the DOM, some 30-40 lines above where the call to the jQuery CDN was. And because source order matters, the little button script had nothing to work with when it was executed.

      In the end I did a less ideal but practical route and put a click handler on the link around the button. Mostly because I didn't want to reposition the jQuery request in our production site.

        <a href="internal link to page#top" onclick="javascript:document.getElementsByName('Search').focus(); return false;">
          <button> blah blah </button>