0

I'm using Emberjs to build a front end to a WordPress site. It has two javascript files 1. vendor.js and 2. myapp.js. On Ember's dev server, the app works correctly but when I add the production builds to the WordPress app, I'm getting errors which suggest that the vendor.js file is not loaded prior to myapp.js. Note, vendor.js has jQuery inside it (along with other vendor code).

This is what I'm doing to add the js files to my WordPress app. In functions.php of my theme I do

function add_my_js(){

     wp_register_script('vendors', get_template_directory_uri() . '/vendor.js', array(), '20151006', true);
     wp_register_script('myapp', get_template_directory_uri() . '/myapp.js', array(), '20151006', true);

     wp_enqueue_script('vendors');
     wp_enqueue_script('myapp');
}
add_action('wp_enqueue_scripts', 'add_my_js');

With that code, I can see (and click on) links to both js files on the front page of my WordPress app (in development server) so I know the files are both included. However, the error message I'm getting from the Ember app suggests that the vendor.js file might not be loaded at the correct time for the myapp.js file.

Question: is there another way to ensure that the first file is loaded prior to running the second file?

4
  • what is the error message? are you aware that WordPress jQuery is in noConflict mode?
    – Milo
    Commented Oct 13, 2015 at 15:28
  • @milo the error message is related to Emberjs, but this noConflictmode might be part of the problem, because the Ember error message might be related to jquery dom not being ready, which I found weird because the vendor.js file I am linking in has jquery included. So does that possibly mean two versions of jquery (one included by WordPress by default?) and the one included in the vendor.js file are getting in the way of each other?
    – Leahcim
    Commented Oct 13, 2015 at 15:36
  • i.e. is there a way to turn off the jQuery library included with WordPress and just use the one included in vendor.js, which Ember needs?
    – Leahcim
    Commented Oct 13, 2015 at 15:37
  • add the error message to your question!
    – Milo
    Commented Oct 13, 2015 at 15:39

2 Answers 2

1

You could add the script that needs to go first as a requirement of the second one. Something like this:

wp_register_script('myapp', get_template_directory_uri() . '/myapp.js', array('vendors'), '20151006', true);
1
  • thanks for the suggestion but it doesn't fix the problem
    – Leahcim
    Commented Oct 13, 2015 at 13:53
1

Jeff's answer should work. Open it up in Chrome, open up the dev tools, and click on the Network panel and then refresh your browser. This will show the order in which all of your assets are loaded. Make sure the names (ie. vendors) are correct.

Just to get it to work you could set the last argument to false in your wp_register_script function. If you have the wp_footer call in your theme it will move the call for the file down to the footer so its called later. May not be ideal for your situation, but could help you at least get it running.

2
  • ok, it seems to be calling the scripts in the right order but the error remains (and it only exists when i'm including the files in the WordPress app i.e. not when I use the Ember development server)
    – Leahcim
    Commented Oct 13, 2015 at 14:35
  • Dont have enough points to comment in the appropriate place, but it sounds like the jQuery issue. Check this out here codex.wordpress.org/Function_Reference/wp_deregister_script and try wp_deregister_script( 'jquery' ); to remove WP version of jQuery
    – esteban
    Commented Oct 13, 2015 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.