Hot answers tagged

73 votes
Accepted

How to use jquery library in Magento 2?

If you are adding your custom js library other than jQuery then you need to include the js code inside require function like: require(['jquery', 'jquery/ui'], function($){ //your js code here ...
user avatar
  • 2,255
43 votes

how to implement Loader widget in magento2

It's impressively simple when used inside a JS file loaded via Require JS (All/most your scripts should be so I won't go into detail about that): $('body').trigger('processStart'); And to remove it ...
user avatar
  • 15.2k
22 votes
Accepted

How to add bootstrap.js in magento2

Create Module Folder Structure: app / code / [Vendor] / [ModuleName] app / code / [Vendor] / [ModuleName] / etc app / code / [Vendor] / [ModuleName] / view / frontend / layout Create Module Files: ...
user avatar
  • 2,119
21 votes
Accepted

magento2: how validation work in magento2

Try this: require(["jquery"], function ($) { $(document).ready(function () { $('#my-button-name').click(function () { // The button type should be "button" and not submit if (...
user avatar
  • 1,857
20 votes

how to implement Loader widget in magento2

Magento2 has loader widget. Simples way to use it with ajax request. $.ajax({ ...// ajax setting, showLoader: true, // enable loader context: jqueryElementorSelector // element that will ...
user avatar
  • 20.2k
20 votes
Accepted

Adding a jQuery Library to Magento 2

Create requirejs-config.js Companyname\Modulename\view\frontend\requirejs-config.js add var config = { map: { '*': { bannerslider: 'Companyname_Modulename/js/flexslider', ...
user avatar
  • 3,685
18 votes

Magento 2 add custom product attribute validation from install script

One of the solution is to add a backend model to your attribute which is used to format / validate your attribute value before save and/or after load. Add a backend class : [ 'type' => '...
user avatar
17 votes
Accepted

How to create a Magento 2 Modal popup that cannot be closed?

I couldn't get an override of the modal.closeModal() function to work via mixins and also I think doing it via a mixin makes it override through the whole website on all modals, which I do not want. I ...
user avatar
  • 7,352
17 votes

Magento2 : ReferenceError: jQuery is not defined

Magento2 use requirejs concept (lazy load) so load jquery first then write your jquery code. e.g) require(['jquery'],function($){ $(document).ready(function(){ alert('ok'); }); })...
user avatar
  • 9,509
17 votes

How to disable JQMigrate Logging

One should mute jquery.migrate before it gets initialised. js/mute-migrate.js requirejs(['jquery'], function ($) { $.migrateMute = true; $.migrateTrace = false; }); requirejs-config.js var ...
user avatar
  • 760
17 votes

Magento 2 console notice - Fallback to JQueryUI Compat activated

I am facing the same issue currently and working on it, but it is highly specific per site and the issue might be connected with your theme, extensions and custom code. The issue is caused by certain ...
user avatar
  • 2,727
15 votes
Accepted

What is data-post, data-action in magento 2? Can anyone explain wishlist functionality?

As you can see in widget lib/web/mage/dataPost.js $.each(this.options.postTrigger, function (index, value) { events['click ' + value] = '_postDataAction'; }); On click to elements which satisfy ...
user avatar
  • 3,854
14 votes

Magento 2: How to defaultly open "content 2" tab?

Magento 2 docs - Accordion Set active to the tab you'd like to be open by default instead of true. For example: $("#element").accordion({ active: "0 1"}); $("#element").accordion({ active: [0,1]}); ...
user avatar
  • 15.2k
14 votes
Accepted

What does $$ in javascript of Magento 2 mean?

There is still some prototype.js left over from Magento 1, now mixed with jQuery (in noConflict mode) That means: $ is the prototype selector that returns one element by its id $$ is the prototype ...
user avatar
14 votes
Accepted

Magento 2 & JQuery.UI.Autocomplete

jQuery ui menu extended in magento core library lib/web/mage/menu.js as mage.menu. jQuery generate widgetName for any component name = name.split( "." )[ 1 ]; fullName = namespace + "-" + name; ...
user avatar
  • 3,854
12 votes

Magento 2 Simple jQuery Example

Using jQuery simple example: <script type="text/javascript"> require([ 'jquery', 'jquery/ui'], function($){ $(document).ready(function($) { alert("test"); }); });</script> for ...
user avatar
12 votes
Accepted

Magento 2 add custom product attribute validation from install script

With the help of Matthéo Geoffray, this is what I did to apply frontend validation for custom attributes. [ 'type' => 'int', 'backend' => '', 'frontend' => '', 'label' => '...
user avatar
  • 1,655
11 votes

jquery not defined error in magento 2

Try this require([ 'jquery', 'jquery/ui'], function($){ $(document).ready(function($) { console.log('running'); // your script });});
user avatar
  • 1,705
11 votes
Accepted

Magento 2 Modal Widget

Try following way. <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { ...
user avatar
  • 34.3k
11 votes
Accepted

How to add a jQuery plugin in theme?

copy js file jquery.touchSwipe.min.js into your custom theme web/js folder. app/design/frontend/Vendor/themename/web/js/jquery.touchSwipe.min.js Now you have to use inside your template file, just ...
user avatar
11 votes
Accepted

$(...).swMegamenu is not a function

Uncaught TypeError: $(...).swMegamenu is not a function Uncaught TypeError: $(...).stellar is not a function Uncaught TypeError: $(...).owlCarousel is not a function Uncaught TypeError: $.widget is ...
user avatar
10 votes
Accepted

What are the advantages to magento using Prototype

Aside from jQuery being lightly adopted during the development of Magento we must consider another aspect: Magento was developed around 2007 at a time when TC39 was proposing EcmaScript 5 and it was ...
user avatar
  • 35.6k
10 votes
Accepted

Issue with jQuery usage in Magento 2

add js like that require([ 'jquery', 'jquery/ui'], function($){ $(document).ready(function($) { $(window).load(function() { { Do stuff with various HTML elements; } }); }); });
user avatar
10 votes

window.on 'load', function not useable with require JS loaded file

Your window is already loaded so that event is not triggered again. If you want to be sure that your require JS code gets executed when the DOM is ready, use domReady!: define([ 'jquery', '...
user avatar
  • 11.7k
9 votes
Accepted

My js file is not loaded in Magento 2

The Way you are including custom js in requirejs-config-js is correct , but you must need to load this js in your template(.phtml) file. Add below code in your .phtml template file : <script ...
user avatar
  • 9,590
9 votes
Accepted

How to add js libraries that require Jquery to magento 2 using requireJs

I can think of two solutions that should help resolve the issue: domReady! Require JS ships with a dom ready plugin, this will ensure your carousel is only loaded when the dom has loaded. To do this ...
user avatar
  • 15.2k
9 votes
Accepted

Magento 2 How to set value to UI component hidden field using Jquery or Javascript

You need to use change() function after val() called. When you used val() of jquery in knockout context at that time you need to use below syntax, $('input[name="image_data"]').val(Data).change();
user avatar
8 votes

Uncaught TypeError: undefined is not a function when using a jQuery plugin in Magento

you may need to use a closure ;(function($){ // your code })(jQuery); Move your code inside the closure and use $ instead of jQuery
user avatar
8 votes

jquery not defined error in magento 2

I have the same issue and i have fix it by following solution. please try it. Step 1: Please open owl.carousel.js file and add below code at the top of actual jquery(owl.carousel.js) script define([ ...
user avatar
8 votes
Accepted

Fixed Headers in Magento

Add code in your header.phtml or footer.phtml <script> jQuery.noConflict(); jQuery(window).scroll(function() { var height = jQuery(window).scrollTop(); if(height > 150) { ...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible