Magento – jQuery event listeners working most of the time but not sometimes

magento2

Update:

The problem occurred again and gave me a chance to check a few more things.
The script is loaded and the contents can be viewed in Chrome's developer tools under the "Sources" panel.

This means that it is being loaded, but it is not being executed.

jQuery is available on that page publicly and I was trying to pass it through as a dependency into the call back as jQuery

Since the function is anonymous – there should be no conflict here – no?

My proof is that this works and logs the response from the ajax query. Is requireJs refusing to use it with that name since the global variable already exists for that parameter?
jQuery.ajax('/', function(jQuery) { console.log(jQuery); });

Original Post:

It is very important that I understand why this is happening and how to get around it.

I am avoiding the use of the $ sign for jQuery everywhere in my scripts and loading all of them through requirejs.

There are many buttons that have event listeners attached to them that work nearly all of the time – however sometimes when the page loads the events do not fire or may never be binded to the elements.

I don't know if it's a requirejs problem or jquery conflict. Has anyone else dealt with this yet?

Config:

var config = {
    map: {
        '*': {
            footerContact: 'Module_Contact/js/contact',
        }
    }
};

Script (contact.js)

define([
    "jquery",
], function(jquery){
    "use strict";

    jquery('.element').on('click', function(event) {
    });
});

phtml include:

<script type="text/javascript">
  require(['footerContact']);
</script>

Edit:

I am not convinced it is a requirejs shim issue, reading the documentation it states the criteria for using shim config:

Ideally the scripts you load will be modules that are defined by calling define(). However, you may need to use some traditional/legacy "browser globals" scripts that do not express their dependencies via define(). For those, you can use the shim config. To properly express their dependencies.

Yet my script uses define to include its dependencies…

Best Answer

You have to set jQuery dependency for your custom script. You have occurance of problem because of dependency issue.

For Module/Extension Level

You can set at module/extension level dependency like below,

app/code/Packagename/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider"
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        }
    }
};

Add slider.js inside path, app/code/Packagename/Modulename/view/frontend/web/js/slider.js

You can use in any template file like this,

<script>
    require(["jquery","slider"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

Theme Level

If you want to apply require js changes at theme level, Go to theme module,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/requirejs-config.js

Set your theme required js file in requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider",
            'customjsfile': "Packagename_Modulename/js/customjsfile",
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        },
        'customjsfile':{
            deps: ['jquery']
        }
    }
};

Add your js file inside web folder of theme,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/slider.js
app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/customjsfile.js

In your template file,

<script>
    require(["jquery","slider","customjsfile"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

For your case,

Keep below config in requirejs-config.js file,

var config = {
    paths: {            
            'footerContact': 'Module_Contact/js/contact'
        },   
    shim: {
        'footerContact': {
            deps: ['jquery']
        }
    }
};

Inside phtml file,

<script>
  require(["jquery","footerContact"],function($)(){
    jquery('.element').on('click', function(event) {
        console.log('logging');
    });
  });
</script>

1. Create Your Component

Assuming the path to your component is Briteskies_ProductConfigurator/js/configurator.js, use the contents below. Notice the return function gets a config and element parameter.

The config parameter will contain options that you define when initializing the component from your template.

The element parameter will be a reference to the DOM object you target when initializing the component from your template:

define([
    'jquery',
    'slick'
], function ($) {
    return function(config, element) {
        var speed = config.autoplaySpeed;

        // When document is ready
        $(function () {
            $(element).slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                dots: false,
                autoplay: true,
                autoplaySpeed: speed
            })
        });
    };
});

2. Map Your Component (Make it available to requirejs)

In your module's requirejs-config.js file, define a configurator component and point to its path. I've omitted your other code to see only the changes to be added:

var config = {
    map: {
        "*": {
            configurator: 'Briteskies_ProductConfigurator/js/configurator'
        }
    }
};

3. Initialize Component From Your Template

In the template that will hold the content needing the slick slider, you can target an element and specify which component to use.

The DOM object(s) that the ".main-gallery" key below matches gets passed as the element parameter mentioned in Step 1.

The json object defined after the "configurator" key below gets passed as the config parameter mentioned in Step 1.

Bonus: If you are using your own Block for the template, you could fetch system configuration values and make them available to your component (say for toggling autoplay speed, whether to use arrows, slides to show, etc...):

<script type="text/x-magento-init">
{
     ".main-gallery" : {
        "configurator" : {
            "autoplaySpeed": 5000
        }
     }
}
</script>

Magento – Add jQuery Datatables in magento 2

I think that you have another problem in your script. you have defined both jquery and datatable as dependencies. But you only pass jquery to the function. The function part of the requirejs script should have the dependency scripts object passed to the function part. try:

<script type="application/javascript">
requirejs(['jquery','dataTable'],function($, dataTable){
    $(document).ready(function(){
        $('#list-table').DataTable();
    });
});

As for the shim part, I think that if you have defined it something like :

var config = {
    map: {
        '*': {
            dataTable: 'Ktpl_Slider/js/datatables.min'
        }
    },
    "shim" {
        "dataTable" : ["jquery"]
    }
};

then it's fine. Looks like it works for me, however, the extra quotes around "shim" are only present in Magento 2 documentation, and not in requirejs documentation. so not sure which one is right.

Best Answer

Related Solutions

Magento 2 – Adding 3rd Party jQuery Files to Module

1. Create Your Component

2. Map Your Component (Make it available to requirejs)

3. Initialize Component From Your Template

Magento – Add jQuery Datatables in magento 2

Related Topic