45 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 ...
Ben Crook's user avatar
  • 15.7k
23 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: ...
Joshua34's user avatar
  • 2,307
22 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 ...
Quisse's user avatar
  • 860
21 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 ...
Lez's user avatar
  • 2,907
20 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' => '...
Matthéo Geoffray's user avatar
19 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 ...
7ochem's user avatar
  • 7,532
18 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'); }); })...
Bilal Usean's user avatar
  • 9,977
18 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 ...
Max's user avatar
  • 4,054
15 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]}); ...
Ben Crook's user avatar
  • 15.7k
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 ...
Fabian Schmengler's 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; ...
Max's user avatar
  • 4,054
13 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' => '...
Amit Singh's user avatar
  • 1,765
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 ...
Qaisar Satti's user avatar
  • 32.5k
11 votes

jquery not defined error in magento 2

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

Magento 2 Modal Widget

Try following way. <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { ...
Sohel Rana's user avatar
  • 35.8k
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 ...
Rakesh Jesadiya's 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 ...
Kishan Patadia's user avatar
11 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();
Rakesh Jesadiya's user avatar
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; } }); }); });
Qaisar Satti's user avatar
  • 32.5k
10 votes
Accepted

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

On page Load Dynamically require to open some particulate tab please use below code instade of data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": [1,4], "...
Bhavik's user avatar
  • 1,240
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', '...
Giel Berkers's user avatar
  • 12.2k
10 votes
Accepted

Uncaught TypeError: url.indexOf is not a function

Cause: Here's jquery 3 release note: https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ Removed deprecated event aliases (https://github.com/jquery/jquery/issues/2286) .load, .unload, and ...
Mukesh Chapagain's user avatar
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 ...
Manthan Dave's user avatar
  • 9,816
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 ...
Ben Crook's user avatar
  • 15.7k
9 votes

Cannot call methods on modal prior to initialization; attempted to call method 'openModal'

Issue Fixes <script type="text/javascript"> require(['jquery','Magento_Ui/js/modal/modal'],function($,modal) { var options = { type: 'popup', ...
Janagiram Ramakrishnan's user avatar
9 votes

How to disable JQMigrate Logging

In order not to overwrite any magento core files I just created a javascript file with this code require( ['jquery'], function ($) { $.migrateMute = true; $.migrateTrace = ...
Popa Felician's 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([ ...
mapaladiya's 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) { ...
Prashant Valanda's user avatar
8 votes
Accepted

Magento 2 - jQuery validation remote method

add remote property for 'data-validate' attribute. example: <input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="" class="input-text" type="email" ...
Sohel Rana's user avatar
  • 35.8k
8 votes
Accepted

Block with jQuery autocomplete in checkout page

Checkout one page application use knockout for rendering and binding. If you need to work with DOM elements (like via jquery ui library) you should use afterRender knockout binding. Example: my-...
Max's user avatar
  • 4,054

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