3

I am trying to add some javascript codes in one CMS page of a Magento 2.1 site. Here are what I did and the issues I am facing now:

1)at the "Layout Update XML" of the page, add the following jquery codes which will be used further:

The relevant Javacript codes come in the form like (in html file):

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/a.js" type="text/javascript"></script>
    <script src="js/b.js" type="text/javascript"></script>
    <script src="js/c.js" type="text/javascript"></script>
    <script src="js/d.js" type="text/javascript"></script> 
</head>

2) At the body of the content, add the following codes:

<p>some content</p>
<script type="text/javascript">
    require(['jquery'], function ($) {
     $(...).xxxxx
     //do stuff here
    });
</script>

The error shows now: $(...).xxxxx is not a function


The codes without requireJS work well:

<script type="text/javascript">
    $(function () {
     $(...).xxxxx
     // do stuff here
    });
</script>

What am I missing here?

Thanks!

3
  • without requireJs its works, then what is the issue now, you can use without require js Commented Sep 22, 2016 at 7:05
  • sorry, without requirejs, means it works as a pure html + javascript page. means the javascript function works now. But it is not working on Magento page Commented Sep 22, 2016 at 9:28
  • Please check this magento.stackexchange.com/questions/190821/… Commented Apr 30, 2018 at 9:13

2 Answers 2

0

All javascript should use the require-js. In your case you should try something like:

    <script type="text/javascript">
        require(['jquery'],function($){   
           //$.doStuff
        });
    </script>

Im not sure if this will solve the external library. If not, then i guess you will have to add the external library to requirejs-config. There is plenty of information here:

Here

2
  • thanks for the advice. Yes, the information you provided is very informative. Tried to add the JS codes with RequireJS, but now it shows "the xxx function is undefined", or "xxxx is not a function" error, on all browsers. Still trying to figure out the reason. Hopefully I can update it when I have it. Any helps will be appreciated, to benefit everybody. Thanks! Commented Sep 20, 2016 at 7:13
  • Could you please update the question with your requirejs-config.js and the actual javascript in the body?
    – Langley
    Commented Sep 20, 2016 at 11:14
0

Require isn't working for you as you're loading your javascript via XML, JS files should be loaded via x-magento-init or data-mage-init. For example:

<div data-mage-init='{"Magento_Theme/js/a": "{}"}'></div>

Also, I wouldn't recommend adding another version of jQuery, this could result in conflicts with the built-in version of jQuery. Also, why are you adding Javascript and code via the CMS?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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