Skip to main content
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
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
22 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,917
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,562
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
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
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,775
12 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
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,883
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

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.3k
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,856
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
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.9k
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
8 votes
Accepted

How to close modal popup by clicking outside the modal-content in Magento 2

We fixed this issue in a custom theme using a RequireJS mixin by adding the following files: app/design/frontend/VENDOR/THEME/Magento_Ui/web/js/model/modal-mixin.js define([ 'jquery', 'mage/...
Khoa TruongDinh's user avatar
8 votes

How to close modal popup by clicking outside the modal-content in Magento 2

Hi just place the below code in the footer file or any file which is common on all pages and it will do your job. I was also going to the same issue and came out with this and it works perfectly. <...
Rohit Goel's user avatar
8 votes
Accepted

Magento2 : ReferenceError: jQuery is not defined

The issue was that there is no sequence tag defined in the module.xml. I have added Magento_Theme module in the sequence tag in my module.xml as follows <sequence> <module name="...
Anshu Mishra's user avatar
  • 8,990
7 votes

I need to add masonry js to my theme in Magento 2

Do not include JavaScript files in Magento 2 layout XML! I'm using masonry on my M2 project, and want to share it with you. To use masonry.js in Magento 2 add this piece of code to your template ...
lemk0's user avatar
  • 608
7 votes

How to add bootstrap.js in magento2

To add bootstrap JS file, I followed the following steps on Magento 2.2.4. Step 1: Place the JS file in the following location. app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/web/js/...
Milan Chandro's user avatar
7 votes

Magento 2 Simple jQuery Example

You can also use domready!± in the require statement. That will mean your code won't execute until the dom is ready, same as using document ready. require([ 'jquery', 'domReady!'// wait for ...
Simon's user avatar
  • 131
7 votes
Accepted

How to wait until text/x-magento-init has loaded the options

I think the problem with what your trying to do is that a property defined dynamically within component.js will not be accessible from third.js. As an alternative solution, you can pass whatever ...
Aaron Allen's user avatar
  • 9,009
7 votes
Accepted

MIME type ('text/html') is not executable and strict MIME type checking is enabled

Yes I solved it: I just put the below line to my htaccess file than it works good in chrome as well as other browser <IfModule mod_headers.c> Header always set X-Content-Type-Options nosniff ...
Rajan Soni's user avatar
  • 1,019
7 votes

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

I reckon using mixins in that case would be relevant. You can try the following: First in your module, create the following view/base/requirejs-config.js : var config = { 'config':{ '...
Raphael at Digital Pianism's user avatar

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