1

If I add this to a CMS page then it pull in the javascript to the page correctly:

<script type="text/javascript">
    requirejs(['jquery', 'bootstrap'], function (jQuery, jQueryBootstrap) {

    });
</script>

But if I try it with data attribute like so:

<div data-mage-init='{"bootstrap": {}}'>

</div>

Then the javascript is not pulled into the page.

Do data attributes only work in phtml files? Docs seem to say I can use either.

1

The lack of quotation marks around the configuration part of the init config may be causing a JSON parse error (visible in developer tools javascript console).

<div data-mage-init='{"bootstrap": "{}"}'>
</div>
| improve this answer | |
  • 1
    This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review – Fabian Schmengler Jun 29 '17 at 15:48
  • This solves the problem often for me. I regard the lack of quotation marks as a syntax error and I believe Magento does too. – LM_Fielding Jun 30 '17 at 11:04
  • 1
    Then I was mislead by your wording. The answer sounded like a question. It would help if you add the information from the comment to the answer. – Fabian Schmengler Jun 30 '17 at 11:14
  • In the JSON syntax this two statements ({} and "{}") are different, and both are valid. – Anton Guz Nov 28 '18 at 11:03
  • this did fix an "tag gets eaten up and chewed up broken on save" issue – iphigenie May 4 at 19:36
0

There is a huge difference between both code pieces.

First one: an inline script with RequireJS call

<script type="text/javascript">
    requirejs(['jquery', 'bootstrap'], function (jQuery, jQueryBootstrap) {

    });
</script>
  • RequireJs will load files jquery.js, bootstrap.js in an async way
  • When both are loaded (no matter will page loaded or no) and both are executed, then the callback will be executed. In the arguments, it will receive something that jquery.js and bootstrap.jsmodules return.
  • If bootstrap.js depends on jQuery but doesn't contain an explicit dependency on 'jquery' module it randomly fails.

Second one: mage-init initializing

<div data-mage-init='{"bootstrap": {}}'>

</div>
  • Magento's JS app will wait for page onload event
  • After page onload, Magento's JS app will collect data-mage-init attributes
  • Magento's JS app with RequireJS will load bootstrap.js and executes it
  • If bootstrap.js depends on jQuery but doesn't contain explicit dependency on 'jquery' module it fails. Actually no. Magento's JS app depends on jQuery itself. So jQuery will be load anyway before bootstrap.js executes. So it is a type of lucky.
  • Magento's JS app will try to execute something, that bootstrap.js returns. This callback will receive parsed object from mage-init JSON as config, and reference on DOM node <div data-mage-init..> as element.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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