jQuery .load with variable as url

Question

I'm trying to load an external php file/widget into another php file via a jQuery-constructed mobile menu bar. The menu bar is <div class="slicknav_menu"> called in the code below. On the front-end I can see the variable loading the blog url okay, but pluginDir doesn't seem to load it in the $ function.

I'm still getting a hang on proper syntax. What am I doing wrong? Does .load accept variables?

var pluginDir = "<?php bloginfo('url'); ?>";

if (document.documentElement.clientWidth < 1030) {
    $(".slicknav_menu").load(pluginDir + '/wp-content/plugins/woocommerce-cart-dropdown/cart-dropdown.php');
}

$(".slicknav_menu").load(pluginDir + '/wp-content/plugins/woocommerce-cart-dropdown/cart-dropdown.php');. In javascript + is the concatenation operator for string — Arun P Johny
– Arun P Johny, Commented Mar 31, 2015 at 0:48
I actually tried + as well, but it doesn't seem to be working either. I'll update it above to show my syntax. — dmoz
– dmoz, Commented Mar 31, 2015 at 0:51
what does bloginfo do anyway? returns a string? you might need some echo there — Kevin
– Kevin, Commented Mar 31, 2015 at 0:52
bloginfo grabs the url of my site, which i'm concatenating to the exact php file path. I realize it's an odd way of going about it, but it's an existing jQuery mobile menu that I need to load my php plugin into only when the viewport is below 1030px. — dmoz
– dmoz, Commented Mar 31, 2015 at 0:59

thebreiflabb · Accepted Answer · 2015-03-31 22:04:50Z

1

The issue is that there is no element with class slicknav_menu at the time of load being called. And jQuery ran noConflict() setting $ back to undefined, making it not even try to load at all.

By moving $(".slicknav_menu").load(pluginDir + '/wp-content/plugins/woocommerce-cart-dropdown/cart-dropdown.php'); after the element is added to the DOM, and using jQuery in place of $, it will load properly.

Taking only relevant parts of the original source code, gives the solution:

var pluginDir = "<?php bloginfo('url'); ?>";

jQuery('#menu-main-menu').slicknav();
if(document.documentElement.clientWidth < 1030) {
    jQuery(".slicknav_menu").load(pluginDir + '/wp-content/plugins/woocommerce-cart-dropdown/cart-dropdown.php');
}

answered Mar 31, 2015 at 22:04

thebreiflabb

1,54410 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dmoz · Accepted Answer · 2015-03-31 03:17:59Z

0

Although it brought to light some additional issues, @thebreiflabb helped tremendously with, and basically answered, the original question. So I'll consider it closed via the comments.

answered Mar 31, 2015 at 3:17

dmoz

1,2951 gold badge16 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery .load with variable as url

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related