46
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
...
- 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 ...
- 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 ...
- 2,967
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' => '...
- 2,694
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 ...
- 7,582
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');
});
})...
- 10.1k
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 ...
- 4,064
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;
...
- 4,064
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' => '...
- 1,785
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 ...
- 5,493
11
votes
jquery not defined error in magento 2
Try this
require([ 'jquery', 'jquery/ui'], function($){
$(document).ready(function($) {
console.log('running');
// your script
});});
- 1,883
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 ...
- 5,639
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();
- 42.4k
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',
'...
- 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 ...
- 9,906
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 ...
- 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',
...
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 = ...
- 111
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-...
- 4,064
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/...
- 32.3k
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.
<...
- 321
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="...
- 9,010
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 ...
- 1,019
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/...
- 680
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 ...
- 131
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 ...
- 608
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':{
'...
7
votes
Accepted
Magento 2 - Ajax is not calling Controller
Error 500 (internal server error) - something went wrong on the server side.
We need to add use Magento\Framework\App\Action\Context at the first of class. Or, change Context to Magento\Framework\...
- 32.3k
7
votes
Accepted
How to trigger self.openFullScreen() function into my custom jQuery in Product details page
After spending some time, i found the answer as mentioned below, hope this will help for someone.
<script type="text/javascript">
require([
'jquery',
'...
- 8,965
7
votes
Accepted
Magento 2 - 2.3.1. Warning "JQMIGRATE: Migrate is installed with logging active, version 1.4.1"
Edit file lib/web/jquery/jquery-migrate.js
Look for at line 19
// Set to true to prevent console output; migrateWarnings still maintained
jQuery.migrateMute = false;
and change to true
// Set to true ...
- 5,452
Only top scored, non community-wiki answers of a minimum length are eligible