Using JavaScript Resources & resource groups

[cpp-dev]

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

I have read through the docs page about JS Resources -- https://docs.miva.com/how-to-guides/...set-management

I have an inline script that uses jQuery

$(document).ready(function () {
  $('button.search-jump').click(function () {
    window.location.hash = 'top';
    $('input[name=Search]').focus();
    return false;
  });
});

This is wrapped up in a resource listing -- https://cloudup.com/iQO0MPCiKCf

Assigned to a page -- https://cloudup.com/iAzg4GNigSN

Assigned to a resource group -- https://cloudup.com/i4FCVzJ5gN9

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: https://cloudup.com/iRP2HIQKtz3

But when I load the page, the button doesn't respond. -- https://cloudup.com/ipgHPwU2lMh

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.

[cpp-dev]

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.

[cpp-dev]

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>
  </a>