0

$.widget is not a function when loading a homepage after add custom jQuery on custom theme.

I have define my custom jQuery javascript library on my theme header under

Magento_Theme/layout/default_head_blocks.xml

The js error message

$.wedget is not a function

which occur when loading homepage sometime ....[not 100% occur].

Is about js definition location problem? please help.

For example one of my jQuery source code:

jQuery(window).scroll(function(){
  var sticky = jQuery('.page-header'),
      scroll = jQuery(window).scrollTop(); 
  if (scroll >= 30) sticky.addClass('fixed'), jQuery('.panel.header').hide(),jQuery('.page-header').css('border-bottom','1px solid #efefef');
  else sticky.removeClass('fixed'),jQuery('.panel.header').show(),jQuery('.page-header').css('border-bottom','none');
});
1

First of all check jQuery is working or not using following code:

<script type="text/javascript">
require(['jquery'],function($){
    $(window).load(function() {
        alert('jquery working');
        // your code goes here.
    });

});
</script>

If it's work then put your code inside this code section.Also load your js file after jQuery library.

  • Related tip. You should add domReady! as a dependency if you need your code to fire on page load. Otherwise other plugins are not aware of the dom ready dependency. See this question for more info - magento.stackexchange.com/questions/166126/… – Ben Crook Sep 28 '17 at 14:19
0
  • Include Jquery library before calling this script.
  • Or, try use your script at footer after all Jquery and JS libraries loaded. (Just for testing)
  • Wrap your function inside jQuery( document ).ready(function() { //your script });
  • I believe your script is being executed before other jQuery libraries have been loaded properly.
  • Hi, Thanks your response. My custom code is working fine. it is call after jQuery definition. but original Magento javascript prompt error when loading homepage '$.widget'. I guesses is about conflict with my custom js on my theme design. – Kllee Jun 6 '16 at 10:35
  • I find a example is define requirejs-config.js on my theme to define own jQuery execute point......but I studied on it.... – Kllee Jun 6 '16 at 10:40
  • Please use jQuery library that comes with the theme. Remove any other jQuery libraries calling from page.xml. This might be the issue of jQuery conflict – Ahsan Horani Jun 6 '16 at 10:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.