0

I try to include jQuery 3 to my project so I can use it on some CMS sites.

Attempt:

THEME = app\design\frontend\company\fresh\

THEME\web\js\jQuery\jquery-3.6.0.js

Copy pasted the code from here to the file:

/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.e ...

THEME\requirejs-config.js

var config = {
    map: {
        '*': {
            jquery3: 'js/jQuery/jquery-3.6.0',
        }
    }
};

CMS Site:

Now I inserted this to my CMS Site...

<script>
require([
    'jquery3'
], function ($) {
    $("body").css("color", "black");
});
</script>

...but I get Uncaught TypeError: $ is not a function

What am I doing wrong?

I flushed the cache of course.

3
  • Are you trying to use jquery3 for your Magento instance or just your module?
    – Jimmy
    Mar 31, 2021 at 1:42
  • I try to add it to magento 2 so I can use it only in certain situations. I don't try to replace the global jquery 1
    – Black
    Mar 31, 2021 at 7:31
  • If it's just for your project, I can say that it's the same as any modules. You can open paypal, see how they load the paypal's lib/sdk from url or just change your syntax to the correct one - Vendor_Module/js/jquery
    – Jimmy
    Mar 31, 2021 at 7:44

4 Answers 4

0

Magento out of the box does not contain jQuery UI styles. Also, it is not recommended to download them as is, because it can break the default Magento design. To use certain jQuery UI styles, you need to add them manually in your custom stylesheets in the {your_theme_dir}/web/css or {your_module_dir}/view/{area}/web/css directory.

1
  • I don't want to use jQuery UI?
    – Black
    Mar 31, 2021 at 7:31
0

This may help you

Please replace your $ sign everywhere with jQuery it may be conflicting.

    <script>
    require([
        'jquery3'
    ], function ($) {
    alert("hello");//try alert then actual code (uncomment the below line).. 
    //jQuery("body").css("color", "black");
    });
    </script>

Or this code

    require(['jquery', 'jquery/ui'], function($){
      $(document).ready( function() {
        alert("Hello World");
      });
    });

This can also work

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Inbuilt Jquery is working fine");
  });
});
0

To add your custom Js Externally Globally, please follow these steps (you need to download the jquery file also )
Step 1: Place requirejs-config.js in the view/frontend folder of your module. Requirejs-config.js looks like:

     var config = {
    map: {
        '*': {
            mycustomjs_jquery3: 'Vendor_Module/js/mycustomjs_jquery3',
        }
    }};

Step 2: Add this code in your phtml file

      require(['jquery', 'mycustomjs_jquery3'], function($,mycustomjs_jquery3){
          $(function(){
             // Custom code here
             alert("hello world good");
        });
     });
0

I figured it out. First I made a test to see if my jQuery 3 is even getting loaded. So I executed this script in the browser console:

require([
    'jquery',
], function ($) {
    alert("A: " + jQuery().jquery);
    jQuery("body").css("background", "red");

    setTimeout(function() {
        alert("B: " + $.jquery);
        $("body").css("background", "blue");
    }, 1000);
});

Output:

A: 1.12.4      (BG changed to red)
B: undefined   (BG changed to blue)
require([
    'jquery3',
], function ($) {
    alert("C: " + jQuery().jquery);
    jQuery("body").css("background", "green");

    setTimeout(function() {
        alert("D: " + $.jquery);
        $("body").css("background", "yellow");
    }, 1000);
});

Output:

C: 3.6.0 (BG changed to green)
D: Uncaught TypeError: Cannot read property 'jquery' of undefined (fail: BG still stays green)

Solution:

Omit the $ in the function

require([
    'jquery3',
], function () {

    alert("C: " + jQuery().jquery);
    jQuery("body").css("background", "green");

    setTimeout(function() {
        alert("D: " + $.jquery);
        $("body").css("background", "yellow");
    }, 1000);
});

Output:

C: 3.6.0 (BG changed to green)
D: undefined (BG changed to yellow green)

Alternative solution:

Fix it by assigning $ = jQuery;

require([
    'jquery3',
], function ($) {

    $ = jQuery;

    alert("C: " + jQuery().jquery);
    jQuery("body").css("background", "green");

    setTimeout(function() {
        alert("D: " + $.jquery);
        $("body").css("background", "yellow");
    }, 1000);
});

Output:

C: 3.6.0 (BG changed to green)
D: undefined (BG changed to yellow green)

Your Answer

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

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