Magento2.3: Javascript is not loading in server but working in localhost

Question

I'm facing a strange issue. I have main.js file in my theme (that is extended luma theme), there I have included javascript and jquery of megamenu, add to compare, etc. Now, the issue I'm facing is that the megamenu in mobile view is working fine on local machine but when I deploy the same code(main.js) in server, its not working and it saying the below error when i click the mega menu:

(index):1 Uncaught ReferenceError: show is not defined
    at HTMLAnchorElement.onclick ((index):1)

Below is my main.js file:

define([
    "jquery",
    "lgsign",
    "slick"

],
        function ($, lgsign, slick) {



           // Use the conventional $ prefix for variables that hold jQuery objects.
var $slider2;

// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration2() {
  // When possible, you should cache calls to jQuery functions to improve performance.
  var windowWidth = $(window).width();
  var numberOfVisibleSlides;

  if (windowWidth < 420) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 768) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 1200) {
    numberOfVisibleSlides = 3;
  }
  else {
    numberOfVisibleSlides = 3;
  }

  return {
    pager: true,
    controls: false,
    auto: true,
    slideWidth: 5000,
    startSlide: 0,
    nextText: ' ',
    prevText: ' ',
    adaptiveHeight: true,
    moveSlides: 1,
    slideMargin: 20,
    minSlides: numberOfVisibleSlides,
    maxSlides: numberOfVisibleSlides
  };
}

// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider2() {
  var config = buildSliderConfiguration2();

  if ($slider2 && $slider2.reloadSlider) {
    // If the slider has already been initialized, reload it.
    $slider2.reloadSlider(config);
  }
  else {
    // Otherwise, initialize the slider.
    $slider2 = $('.explore-slider').bxSlider(config);
  }
}

$('.slider-prev').click(function () {
  var current = $slider2.getCurrentSlide();
  $slider2.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
  var current = $slider2.getCurrentSlide();
  $slider2.goToNextSlide(current) + 1;
});

// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider2);
// Configure the slider once on page load.
configureSlider2();



// Use the conventional $ prefix for variables that hold jQuery objects.
var $slider1;

// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration1() {
  // When possible, you should cache calls to jQuery functions to improve performance.
  var windowWidth = $(window).width();
  var numberOfVisibleSlides;

  if (windowWidth < 420) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 768) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 1200) {
    numberOfVisibleSlides = 1;
  }
  else {
    numberOfVisibleSlides = 1;
  }

  return {
    pager: true,
    controls: false,
    auto: true,
    slideWidth: 5000,
    startSlide: 0,
    nextText: ' ',
    prevText: ' ',
    adaptiveHeight: true,
    moveSlides: 1,
    slideMargin: 20,
    minSlides: numberOfVisibleSlides,
    maxSlides: numberOfVisibleSlides
  };
}

// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider1() {
  var config = buildSliderConfiguration1();

  if ($slider1 && $slider1.reloadSlider) {
    // If the slider has already been initialized, reload it.
    $slider1.reloadSlider(config);
  }
  else {
    // Otherwise, initialize the slider.
    $slider1 = $('.washing-slider').bxSlider(config);
  }
}

$('.slider-prev').click(function () {
  var current = $slider1.getCurrentSlide();
  $slider1.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
  var current = $slider1.getCurrentSlide();
  $slider1.goToNextSlide(current) + 1;
});

// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider1);
// Configure the slider once on page load.
configureSlider1();



/** menu tab footer script**/

jQuery(document).ready(function(){
  jQuery(".menu").click(function(){
    jQuery(".navbar").toggle();
  });

  jQuery(".footer-arrow").click(function(){
    jQuery(".footer-bottom-innr").toggle();
  });

  jQuery(".tab-cl").click(function(){
    var clid=jQuery(this).attr("id");
  var id=clid.split("-");
  jQuery(".offer-tab-con").hide();
  jQuery(".tab-cl").removeClass("active");
  jQuery("#tabcon-"+id[1]).show();
  jQuery("#cl-"+id[1]).addClass("active");

  });

});


/*** toggle nav **/


/***** Home page tab  ****/

jQuery('#tabs li a').click(function(){
  var t = jQuery(this).attr('id');

  if(jQuery(this).hasClass('inactive')){ //this is the start of our condition 
    jQuery('#tabs li a').addClass('inactive');
    jQuery(this).removeClass('inactive');

    jQuery('.container').hide();
    jQuery('#'+ t + 'C').fadeIn('slow');
 }
});


/*** Acton Calculator ****/

jQuery(".arrow").click(function(){
     jQuery(".action-calculator-body").toggleClass("calculator-full");
     jQuery(".arrow-close").css({'z-index':'99','display':'block'});
     jQuery(".arrow").hide();
  });

  jQuery(".arrow-close").click(function(){
    jQuery(".action-calculator-body").toggleClass("calculator-full");
    jQuery(".arrow").show();
    jQuery(".arrow-close").hide();
  });




/**** Compare product ****/
jQuery(document).ready(function(){
  jQuery(".collaps-all").click(function(){
    jQuery(".sub-catagory-outer").toggle();
  });
  jQuery(".catagory-main-title").click(function(){
    jQuery(".sub-catagory-outer").toggle();
  jQuery(this).toggleClass("arrow-open");
  });
});

jQuery('body').on('click','.sub-catagory-title',function(){
  jQuery(this).closest('table').toggleClass('hidden-area');
});

jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();
     //>=, not <=
    if (scroll >= 300) {
        //clearHeader, not clearheader - caps H
        jQuery(".compare-pro-list").addClass("com-fixed");
    jQuery(".fixed-com-print").addClass("com-fixed");
    jQuery(".compare-item-info").addClass("com-fixed");
    }else if(scroll < 300) {
        //clearHeader, not clearheader - caps H
        jQuery(".compare-pro-list").removeClass("com-fixed");
    jQuery(".fixed-com-print").removeClass("com-fixed");
    jQuery(".compare-item-info").removeClass("com-fixed");
    }
}); //missing );


/******* Compare Product in list page slider ******/


/******* End Compare list page **********/

/***** compare product list slick slider *****/

jQuery(document).ready(function() {
      "use strict";
      jQuery('.itm > ul > li:has( > ul)').addClass('menu-dropdown-icon');
      jQuery('.itm > ul > li > ul:not(:has(ul))').addClass('normal-sub');
      jQuery(".menus > ul").before("<div class=\"barshw\"><a class=\"iconsclick\" onclick=\"show(this)\"><i class=\"fa fa-bars hideicon\" aria-hidden=\"true\"></i></a></div><div class=\"contentbody\"><div class=\"contentmenu\" onclick=\"stop_propogate(event)\"><div class=\"itm\">"+document.querySelector('.menu-container .menus').innerHTML+"</div>");

      jQuery('.contentmenu  ul li:has( > ul)').each(function(){ 
                          if(jQuery(this).find('a i').length == 0){ 
                                  jQuery(this).find('a')[0].insertAdjacentHTML('beforeend', '<i class="fa fa-angle-down" aria-hidden="true"></i>'); 
                          } 
                  });
      document.querySelectorAll('.contentmenu .u_cat_image').forEach(function(e_im){
        e_im.closest('li').remove();
      });

      jQuery(".menus > ul > li").hover(function(e) {
        if (jQuery(window).width() > 943) {
          var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
          if(el.querySelector('ul li') != undefined){
            jQuery(this).children("ul").stop(true, false).fadeToggle(150);
            setTimeout(function(){
              var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
              var sty = el.querySelector('ul').style.display;
              if(sty == 'block'){
                el.querySelectorAll('.menus > ul > li > ul').forEach(function(se){
                  se.style.display = 'flex';
                });
              }
            }, 160);
            e.preventDefault();
          }
        }
      });
      jQuery("li:has( > ul)").each(function(){
      if(jQuery(this).find('i').length > 0){
        jQuery(this).find('i')[0].addEventListener('click', function(ev){
          if (jQuery(window).width() <= 943) {
              ev.preventDefault();
              ev.stopPropagation();
              jQuery(ev.target).closest('li').children("ul").fadeToggle(150);
           }
        })
       }
     });


      document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 300) + 'px';
    });
    jQuery(window).resize(function() {
      jQuery(".itm > ul > li").children("ul").hide();
      jQuery(".itm > ul").removeClass('show-on-mobile');
    });


// jQuery(function(){
// jQuery(".menus > ul > li > ul").css('height','auto');
// });


  // });





jQuery(document).ready(function($){
  $("#collapse").click(function(){
    $("#overslide").toggle();
  });
});

require(['jquery', 'jquery/ui'], function(jQuery) {
  setTimeout(function(){
    jQuery(document).on('ready scroll', function() {


 jQuery( document ).ready(function() {
   //      setTimeout(function(){
   // if(document.querySelector('.overslide') != undefined){
   //     document.querySelector('.overslide').style.display = 'flex';
     // }
        jQuery('.regular').not('.slick-initialized').slick({
      dots: true,
    infinite: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    arrow:false,
    dots: false,
    collapsible: true,
    mobileFirst: true,
    responsive: [
    {

    breakpoint: 599,
    settings: {
    slidesToShow: 2,
    slidesToScroll: 0,
    prevArrow: null,
    nextArrow: null,
    infinite : false

    },
    breakpoint: 999,
    settings: {
    slidesToShow: 3,


    },
    }
    ]
        });


    });

  });
  }, 1000);

     });



/*** slick end ***/


});

function show(e){
      var att = e.getAttribute('active');
      if(att == undefined || att == "false"){
        e.setAttribute('active', 'true');
        document.querySelector('.contentmenu').style.left = "26px";
        setTimeout(function(){
          document.querySelector('body').addEventListener('click', close_menu);
        }, 100);
      }else{
        e.setAttribute('active', 'false');
        document.querySelector('body').removeEventListener('click', close_menu);
        document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 120) + 'px';
      }
    }
    function close_menu(){
      document.querySelector('.iconsclick').click();
    }
    function stop_propogate(ev){
      ev.stopPropagation();
    }

Any help will be appreciated!

Oscprofessionals · Accepted Answer · 2019-11-01 05:36:51Z

0

Can you please try same after disable JS Minify.

Stores > Configuration > Advanced > Developer > JavaScript Settings

Disable the Option, then Run all following commands:

php bin/magento s:up && php bin/magento s:d:c && php bin/magento s:s:d -f && php bin/magento c:c && php bin/magento c:f

Then this issue does not arise.

Hope this will help you!!

answered Nov 1, 2019 at 5:36

Oscprofessionals

1,7959 silver badges21 bronze badges

Thanks. I will try. But I have query, the js minify is one of the feature in Magento to improve the performance. So, If I disable the option, the performance is not good, right. Please guide me.

MagentoDev
– MagentoDev

2019-11-01 05:59:42 +00:00
Commented Nov 1, 2019 at 5:59
once try this, if problem gets solved, then we need to purify our js code, so that it gets work with minify.

Oscprofessionals
– Oscprofessionals

2019-11-01 06:04:27 +00:00
Commented Nov 1, 2019 at 6:04

Add a comment |

Stack Exchange Network

Magento2.3: Javascript is not loading in server but working in localhost

1 Answer 1

Your Answer

Hot Network Questions

Magento2.3: Javascript is not loading in server but working in localhost

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions