Javascript to specific template page

1

Wld like to know how to init javscript to specific pages.
So the registering of javascript I managed within ths scripts.php adding this to my “client-page.php”.
How can I now start these javascripts within the _main.js but the outside of the “common” declaration?

somthing like

client_page: {
init: function() {
// function
}
},

client-page: {
init: function() {
// function
}
},
does not work.
Thanks a million for a hint!

2

If you read at the top of the _main.js file, it says that the routing is based on body class. Definitely recommend that you read Paul Irish’s post on how it works, also linked up in _main.js.

Using a page template adds a body class that looks like this page-template-templatefilename-php, so just inspect your body element for the page and grab the class that makes sense to use.

1 Like
3

Wohoo. Perfect! Thanks a million.

4

I’m sure I am missing something simple here but, for example:

common: {
init: function() {
// JavaScript to be fired on all pages
alert(‘test’);
}

This alert does not work at all, on any page in my site, nevermind getting template specific js to fire. I would appreciate any insight as to what I am overlooking?

5

Have you checked your console for errors?

6

Yeah, I’m not getting any errors.

FWIW I am using the roots-sass-master (Roots 6.5.1)

7

Do you have a staging site up?

8

Currently just localdev/mamp setup. May be able to push to staging later today if that will help.

9

It was just so I could have a look and rule out some simple things like a 404 on the scripts.min.js or grunt not being run after changes to _main.js.

10

grunt seems to be working correctly.

everything gets compiled into the scripts.min.js correct?
its like _main.js is being completely ignored.

11

Yeah. Grunt concatenates and minifies _main.js alongside the Bootstrap scripts into scripts.min.js. The very end of scripts.min.js should be the contents of _main.js (assuming you have no other _files.js). If it’s not, or it doesn’t contain your alert, then that’s where the issue lies.

12

Thats what I understood, so that seems to be the issue, the _main.js stuff is not being appended to scripts.min.js for some reason…

13

What happens when you run Grunt? Does it warn about errors? Also check your Gruntfile.js hasn’t been edited by accident.

The master branch is definitely working my end.

14

Argh. So…it turns out that the scripts.min.js is not covered in grunt watch (not compiling on change like the Sass etc does). I wasn’t aware of that. If I break out of watch and just run grunt then it all works.

15

You shouldn’t be changing scripts.min.js directly and it isn’t watched because it’s the end result i.e. you’re watching the source, not the build.

However _main.js is watched, unless you’ve ignored it the jshint section of your Gruntfile, which I wouldn’t recommend.

16

I wasn’t modifying scripts.min.js directly, I just didn’t realize it wasn’t what was being watched and compiled when _main.js (or any additional files such as _custom.js) changed.

Nothing .js related compiles for me during “grunt watch”. I specifically have to run “grunt” to get the fully compiled scripts.min.js for any code, such as the alert example in my original post, to trigger.

Anyway, thanks for the help.

17

That’s weird. Post your gruntfile.js or dump it in a JSFiddle?

18

I have everything working in my assets/scriptys/main.js file to fire some JS on a page I am targeting. When I look at the the dist/scripts/main.js it all gets compiled correctly and I can see it in the code only nothing actually gets fired. Here is my code block:

'post-type-archive-post_type_feature': {
  init: function() {
    // JavaScript to be fired on the feature page
      alert('test');
  },
  finalize: function() {
    // JavaScript to be fired on the feature page, after the init JS
  }
}

Any clue why it shows up in the dist file but never actually does anything??? The body class is a cut and paste job so it is correctly targeted.

1 Like
19

It’s pretty hard to say since I think you’ve changed the post type name for some reason, but you can’t “cut and paste” the actual CSS class, all dashes need to be underscores, as mentioned here

20

Kalenjohnson, I figured it out. As you point out the class name needs to be constructed with underscores. I added a class to the extras.php file to target it and it works now. Thanks for you time:)