Enqueued Scripts Not Showing

Resolved Adam
(@panhead)

9 years, 7 months ago
My custom theme enqueues JS and CSS in the header. I’m using the live Elementor editor on the front-end of a page. Only on a page that has the Elementor page builder activated will neither of these (script or style sheet) be called on those pages (or so it seems). On a page that does Not have Elementor activated, the JS and CSS are enqueued just fine.

I’ve tried viewing the page source with my browser’s command (Cmd + U in Firefox), and also inspected that page using Firebug. I cannot locate the JS or CSS files that are enqueued. What happens is that the preloader (which works on non-Elemetor pages) doesn’t disappear after a page has finished loading: JS function.

I’ve tried enqueuing the CSS and JS in the footer, then hard-refreshing (Shift + Cmd + R in Firefox) the page. That doesn’t help.

I’ve noticed that when looking at the Elementor live editor page’s source, that Elementor placed that page in an iframe. Does this possibly have something to do with this?

A couple Elementor versions ago, an Elementor page would load and the preloader would disappear as intended. I just tested by reverting to older versions of Elementor. The preloader works in Elementor 0.8.1, and the next version Elementor 0.9.0, the preloader doesn’t work.

Any thoughts on how to fix this?

In case this comes in handy, here’s my enqueue script:
```
function enqueue_plugin_styles_scripts()
{
    //wordpress.org enqueue STYLE example:  wp_enqueue_style( $handle, $src, $deps, $ver, $media );
    wp_enqueue_style( 'theme-style', plugin_dir_url(__FILE__) . 'css/frontend.css', false, '4.0', 'screen' );
    wp_enqueue_style( 'font-awesome', plugin_dir_url(__FILE__) . 'css/font-awesome.min.css', '4.6.3', null );
    
    //wordpress.org enqueue SCRIPT example:  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'theme-script', plugin_dir_url(__FILE__) . 'js/frontend.js', array('jquery'), '4.0', null );
}
add_action( 'wp_enqueue_scripts', 'enqueue_plugin_styles_scripts', 10 );
```
- This topic was modified 9 years, 7 months ago by Adam.

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter Adam
(@panhead)

9 years, 7 months ago
Since I can’t edit my original post after about 5 minutes, here’s an update:

I found that the CSS and JS are both working properly, and exist in the page’s code. Seems like something in Elementor is actually preventing the JS in my theme from working properly.

Upon further testing with my preloader JS function, using jQuery(window).load(function() { /*function here*/ }); is causing some kind of conflict. If I use jQuery(document).ready(function() { /*function here*/ }); the preloader disappears quickly and I can use Elementor to build my page.

The problem is that “document ready” means that the HTML document is loaded. I need for jQuery to execute code when the entire page including all of its content (HTML, scripts, css, images, etc.) is loaded. This is what “window load” does.

Unfortunately, “window load” is part of some sort of conflict with Elementor as of version 0.9.0. Other scripts I have that use “widow load” are also in conflict. The preloader is just the most noticeable script affected.

Any ideas?
- This reply was modified 9 years, 7 months ago by Adam.
- This reply was modified 9 years, 7 months ago by Adam.
Thread Starter Adam
(@panhead)

9 years, 7 months ago
I figured out a workaround. Using jQuery, the code will find out if the URL of a page contains “?elementor”. If it does Not, then the preloader jQuery will be executed.

In other words, if the URL does contain “?elementor”, the preloader jQuery will Not be executed. Therefore, the preloader (my custom preloader) won’t get hung up and keep animating endlessly. The page is then navigable and all elements on the page work as intended. The jQuery I used to find if that element exists in the URL is:
```
if(window.location.href.indexOf('?elementor') < 0) {
    //Your function here
    //Test alert:
    alert('"?elementor" can not be found in the URL.');
}
```
- This reply was modified 9 years, 7 months ago by Adam. Reason: to make code more understandible
Boaz
(@boazpojo)

9 years, 7 months ago

Hi @panhead,
We will look into it, but meanwhile please check our development version.
We are working on it at the moment and we made few changes in the way we call scripts.

You can find it here:
https://github.com/pojome/elementor/tree/develop

Make sure you are testing it only in a DEV environment, because this is still a beta version.
(And in any case it’s better you will backup your site first).

Thread Starter Adam
(@panhead)

9 years, 7 months ago

Thank you, @boazpojo . You guys are wonderful!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Enqueued Scripts Not Showing’ is closed to new replies.

Tags