topic Re: Conflicting jQuery Issue in APIs & Integrations

Conflicting jQuery Issue

apex — Thu, 15 Feb 2018 17:24:03 GMT

I’m trying to run 2 jQuery scripts on 1 page and am not sure how to do it. I have both scripts running in a HubL code module in a global footer. One is for the Mobile Menu, the other is for an accordion. I put the accordion module on this page: http://www-apexhomeloans-com.sandbox.hs-sites.com/lopage

jQuery code in the HubL template is below. Both scripts run individually, but the accordion script doesn’t run if the mobile menu script is there.

Re: Conflicting jQuery Issue

Thu, 15 Feb 2018 20:03:05 GMT

Looks like the error is Uncaught TypeError: $ is not a function
at lopage:893 at the accordion element. Try wrapping the jquery in a self invoking function and moving everything into one script tag.

$(function() { 
 })();

Re: Conflicting jQuery Issue

apex — Thu, 15 Feb 2018 21:21:52 GMT

@fly.space.age

Thanks. I meant to include the actual code, but I think I left html tags around it so it didn’t show up lol. It is exactly what you’re saying, but I’m not sure how to fix it. I’m just using code that I found online for each section and don’t really know jQuery, unfortunately.

MOBILE MENU CODE

var $mobile = jQuery.noConflict();
$mobile(function() {

/** 
 * Mobile Nav
 *
 * Hubspot Standard Toggle Menu
 */
$mobile('.custom-menu-primary').addClass('js-enabled');
$mobile('.custom-menu-primary .hs-menu-flow-horizontal').before('<a class="mobile-trigger"><span></span><i></i></a>');
$mobile('.custom-menu-primary .flyouts .hs-item-has-children > a').after('<a class="child-trigger"><span></span></a>');
$mobile('a.mobile-trigger').click(function() {
    $mobile(this).next('.custom-menu-primary .hs-menu-flow-horizontal').slideToggle(250);
    $mobile('body').toggleClass('mobile-open');
    $mobile('a.child-trigger').removeClass('child-open');
    $mobile('.hs-menu-children-wrapper').slideUp(250);
    return false;
 });

$mobile('a.child-trigger').click(function() {
    $mobile(this).parent().siblings('.hs-item-has-children').find('a.child-trigger').removeClass('child-open');
    $mobile(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
    $mobile(this).next('.hs-menu-children-wrapper').slideToggle(250);
    $mobile(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
    $mobile(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('a.child-trigger').removeClass('child-open');
    $mobile(this).toggleClass('child-open');
    return false;
});

});

ACCORDION CODE

var $accordion = $(’.accordion’);

// Initially hide all accordion content
$accordion.find(’.accordion_content’).hide();
// Initially display the accordion content with .expanded class
$accordion.find(’.accordion_group.expanded .accordion_content’).show();

$accordion.find(’.accordion_header’).click(function(){

// Hide the displayed sibling accordion content so only one appears at a time

$accordion.find(".accordion_header").not(this).parent(".accordion_group.expanded").removeClass(‘expanded’).children(’.accordion_content’).stop(true,true).slideUp();

if(!$(this).parent('.accordion_group').hasClass('expanded')){
    // Display the accordion content if it is not displayed
    $(this).parent(".accordion_group").addClass('expanded').children('.accordion_content').stop(true,true).slideDown();
}
else{
    // Hide the accordion content if it is displayed
    $(this).parent(".accordion_group").removeClass('expanded').children('.accordion_content').stop(true,true).slideUp();
}

});

Re: Conflicting jQuery Issue

Thu, 15 Feb 2018 21:27:30 GMT

$(document).ready(function(){

var $mobile = jQuery.noConflict();
$mobile(function() {
    /** 
     * Mobile Nav
     *
     * Hubspot Standard Toggle Menu
     */
    $mobile('.custom-menu-primary').addClass('js-enabled');
    $mobile('.custom-menu-primary .hs-menu-flow-horizontal').before('<a class="mobile-trigger"><span></span><i></i></a>');
    $mobile('.custom-menu-primary .flyouts .hs-item-has-children > a').after('<a class="child-trigger"><span></span></a>');
    $mobile('a.mobile-trigger').click(function() {
        $mobile(this).next('.custom-menu-primary .hs-menu-flow-horizontal').slideToggle(250);
        $mobile('body').toggleClass('mobile-open');
        $mobile('a.child-trigger').removeClass('child-open');
        $mobile('.hs-menu-children-wrapper').slideUp(250);
        return false;
     });

    $mobile('a.child-trigger').click(function() {
        $mobile(this).parent().siblings('.hs-item-has-children').find('a.child-trigger').removeClass('child-open');
        $mobile(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
        $mobile(this).next('.hs-menu-children-wrapper').slideToggle(250);
        $mobile(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
        $mobile(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('a.child-trigger').removeClass('child-open');
        $mobile(this).toggleClass('child-open');
        return false;
    });
});

/** 
 * jQuery Accordion
 *
 * 
 */
var $accordion = $('.accordion');

// Initially hide all accordion content
$accordion.find('.accordion_content').hide();
// Initially display the accordion content with .expanded class
$accordion.find('.accordion_group.expanded .accordion_content').show();

$accordion.find('.accordion_header').click(function(){

    // Hide the displayed sibling accordion content so only one appears at a time
    $accordion.find(".accordion_header").not(this).parent(".accordion_group.expanded").removeClass('expanded').children('.accordion_content').stop(true,true).slideUp();

    if(!$(this).parent('.accordion_group').hasClass('expanded')){
        // Display the accordion content if it is not displayed
        $(this).parent(".accordion_group").addClass('expanded').children('.accordion_content').stop(true,true).slideDown();
    }
    else{
        // Hide the accordion content if it is displayed
        $(this).parent(".accordion_group")
.removeClass('expanded').children('.accordion_content').stop(true,true).slideUp();
    }
});

})(jQuery);

Re: Conflicting jQuery Issue

apex — Thu, 15 Feb 2018 21:59:40 GMT

@fly.space.age Hmm. Should that work as is? Seems both aren’t working if I put it in that way. Thanks for your help! I at least know the issue, just have to figure out how to combine the two functions into 1 script now.

http://www-apexhomeloans-com.sandbox.hs-sites.com/lopage

Re: Conflicting jQuery Issue

Thu, 15 Feb 2018 22:04:04 GMT

Try adding the self-invoking function around the document.ready. I think the problem is that the browser doesn’t know to look for the jQuery library.

(function ($) {
    $(document).ready(function() {

    });
 })(jQuery);

Re: Conflicting jQuery Issue

apex — Fri, 16 Feb 2018 00:53:42 GMT

Thanks, bud! Works now. I just ended up switching every “$” to “jQuery” like they said in that SO post. Definitely have to start learning javascript and jQuery - I’m more on the marketing end and do PPC campaigns and stuff like that, but I do want to learn more development. Thanks again!