2

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!

  • without requireJs its works, then what is the issue now, you can use without require js – Rakesh Jesadiya Sep 22 '16 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 – greentealeaf Sep 22 '16 at 9:28
  • Please check this magento.stackexchange.com/questions/190821/… – Pravin Apr 30 '18 at 9:13
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

  • 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! – greentealeaf Sep 20 '16 at 7:13
  • Could you please update the question with your requirejs-config.js and the actual javascript in the body? – Langley Sep 20 '16 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, privacy policy and cookie policy

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