Okay
  Public Ticket #2204837
Added JS File Not loading on Mobile
Closed

Comments

  • AustinLovelace started the conversation

    I added a JavaScript file to this theme's functions.php file via FTP, and it's not loading specifically on mobile devices.

    I wanted to make sure it wasn't the script itself, so I copied it into the page in a script tag and tested on both desktop and mobile. The code worked just fine - so something must be blocking the file itself. The js file ("custom.js" is what I called it) is uploaded to the js folder in the man theme - not the child theme. The file is being called with this line of PHP in the main themes functions.php file:

    add_action( 'wp_enqueue_scripts', 'salient_enqueue_scripts');
    function salient_enqueue_scripts() {
            $nectar_theme_version = nectar_get_theme_version();
            wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/custom.js');
    }

  •  3,023
    Andrew replied

    Hi AustinLovelace,

    Could you try and add you custom JS in salient \ general settings - css script related - custom js code.

    Cheers.

  •  8,992


    ThemeNectar Support Team 

  • AustinLovelace replied

    Hey Tahir, 

    This is not a cache issue; because the script is loading, it's just not loading on all screen sizes,  It has something to do do with how the theme loads by screen size - but I don't think window size. As resizing the browser window doesn't prevent the script from working. Oddly enough, the script does not load within the inspect tool no matter what size the view window is. 

    As for adding the code to the general settings, there's oddly not a place for script - only custom CSS. It's also been recommended I use this functions.php method as a way of increasing site speed. 

  • AustinLovelace replied

    Below is the javascript that's not loading. Note that when placed in the head within a script tag, it works in all cases. The script is just not delivering in all cases when applied in the functions.php file as illustrated in the first comment. So it's not the script that's the issue, it's the delivering of the .js file. 

    function loadDeferredIframe() {
     var tryLoadIFrame = function (ID, URL) {
            var iFrame = document.getElementById(ID);
            if (iFrame) {
                iFrame.src = URL;
            }
        }
        tryLoadIFrame("greYoutube", "https://www.youtube.com/embed/h7_w43jJ0Ts")
        tryLoadIFrame("greMapTempe", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3330.0372197439724!2d-111.96932568528953!3d33.422273980782116!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDI1JzIwLjIiTiAxMTHCsDU4JzAxLjciVw!5e0!3m2!1sen!2sus!4v1486774192595")
        tryLoadIFrame("greMapCincinnati", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3086.8059851441258!2d-84.4652936843564!3d39.31532112980541!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88404fb4ec94a687%3A0x915a9a0db6e53917!2sGreat+Room+Escape+Cincinnati!5e0!3m2!1sen!2sus!4v1541446663243")
        tryLoadIFrame("greMapCleveland", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.564362618732!2d-81.627932484311!3d41.405266202849035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830e442a6185089%3A0x90787a2298a6c3c2!2sGreat+Room+Escape+Cleveland!5e0!3m2!1sen!2sus!4v1541446505618")
        tryLoadIFrame("greMapColumbus", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12214.714268930691!2d-82.9792519!3d40.0602736!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd1a0ee0aa5fb171a!2sGreat+Room+Escape+Columbus!5e0!3m2!1sen!2sus!4v1541446346773")
        tryLoadIFrame("greMapAustin", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3443.8281848309443!2d-97.71271668471364!3d30.32740461210432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644ca3ced1c17f7%3A0x7bd80180add156d1!2sMind+Spark!5e0!3m2!1sen!2sus!4v1472767173729")
        tryLoadIFrame("greMapDallas", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13390.834398025358!2d-96.7070997!3d32.9587021!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x897c1a032f856003!2sGreat+Room+Escape+Dallas!5e0!3m2!1sen!2sus!4v1541446025561")
        tryLoadIFrame("greSanAntonio", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13900.967422077894!2d-98.4774668!3d29.4217269!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xfee289ea3851e800!2sGreat+Room+Escape+San+Antonio!5e0!3m2!1sen!2sus!4v1541445639522")
    };
    window.onload = loadDeferredIframe;
    (function() {
     var co=document.createElement("script");
     co.type="text/javascript";
     co.defer=true; co.src="https://xola.com/checkout.js";
     var s=document.getElementsByTagName("script")[0];
     s.parentNode.insertBefore(co, s);
    })();
  •  8,992
    Tahir replied

    Escalating it to the developer so he may add in a response. 

    Best 


    ThemeNectar Support Team 

  •  1,089
    ThemeNectar replied

    Hey Austin,

    Please deactivate your Autoptimize plugin so that I can test on a mobile device to see that isolated script.

    Thanks in advance 

  • AustinLovelace replied

    Theme, 

    I have deactivated the plugin

  •  1,089
    ThemeNectar replied

    Hey,

    Weirdly enough, I'm still seeing all the CSS/JS files loading the minified version (see attached)

  • AustinLovelace replied

    Theme, 

    I have Asynch JavaScript, Autoptimize, and W3 Total Cache installed as well. I went ahead and deactivated them for now. That's probably what was causing the minified files.

  • AustinLovelace replied

    Theme, 

    well... That at least told me what the problem was. It's W3 total cache. I deactivated it and the script delivered. Then I activated it, but also left Asynch JavaScript and Autoptimize deactivated - then it stopped working. If this is the case, is this now beyond the realm of something you can help with? Or is there a way you can recommend adding the file that will work with W3, or a setting I can change in W3 to make sure it loads?