I am trying to bind javascript function calls to specific pages in a plugin I'm developing. All of the javascript functions and calls are located in IIFE's, one for the admin side, and one for the public side.

On the admin side, my Tools page is loaded using an include statement, and I can use either jQuery or document.getElementById() to create the bind. However, when I tried the same approach on the public side page, which I've placed in the database, things don't work.

In the current form, I have the code <body data-bind="PublicInterface"> at the top of the public page (in the database).

In the Javascript:

if ( document.body.getAttribute('data-bind') === 'PublicInterface' ) {
    alert ('Found it!');

The error provided is TypeError: document.body is null

I have also tried approaching this with jQuery using <div id="home-search" data-bind="PublicInterface"> in the document, where the Javascript is:

if ( $('#home-search').length ) {
    alert ('Found it!');

This fails silently.

As I can get both approaches to work with the admin side, I started thinking the problem stems from how WordPress loads pages.

If this is the case, how can I bind javascript to a page loaded from the WordPress database?

  • 1
    Whether a page is loaded from a WordPress database or not would have nothing do with whether or not JavaScript works. This looks like you're just running scripts in the head before the body or any elements have loaded. That's a JavaScript issue, nothing to do with WordPress or databases. – Jacob Peattie Feb 6 '18 at 14:10
  • I've edited the question to reflect that the javascript is in two separate IIFEs, one for the public side, and one for the admin side. I assume from your comment then that you've done bindings like this? If so, what is not correct in my call? – tim.rohrer Feb 6 '18 at 14:36
  • It told you, you appear to be running it before the DOM has loaded. Where are these scripts executing? In <script> tags, or from a file? Where in the DOM are they? – Jacob Peattie Feb 6 '18 at 14:41
  • 1
    Exactly, make sure your JS is being loaded in the footer. If you update your question with the code being used to load the files it might be easier to help, and more on-topic. – Jacob Peattie Feb 6 '18 at 15:06
  • 1
    Got it! I am using the WordPress Plugin Boilerplate and the default behavior for enqueuing the script is to not have it in the footer. I changed that setting to true, and it appears to work. Thank you. – tim.rohrer Feb 6 '18 at 15:35

WordPress uses wp_enqueue_script() to register and enqueue javascript contained in a separate file. The default behavior is for wp_enqueue_script() is to load the script before the </body> tag, and apparently WordPress pages require the script to be loaded in the footer. As pointed out in the comments, the clue to this problem with the loading sequence was in the TypeError that the document.body was null.

Once the wp_enqueue_script() $in_footer option was set to true, the original javascript ran as expected and binding to the page occurred. This change was only required for the public side page, and was not required for the admin side page included into WordPress.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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