Javascript in Processwire Admin tab

[David Beesley]

Hi All,

I am developing an admin tab for a site using Ben Byford's tutorial here -> https://webdesign.tutsplus.com/tutorials/extending-the-processwire-admin-using-custom-modules--cms-26863

So far so good, it's working and showing me some content.

The ultimate aim for this is to be an interface with an external API. So I am looking to develop it as a mini Vue.Js single page app.

I can inject the javascript for the app using the following code in my template

$config = wire('config');

$config->scripts->add($config->urls->templates . "scripts/app.js");

The javascript is currently just grabbing a div with the id "app" and inserting "Hello World".

'use strict';

var app = document.getElementById('app');
app.innerHTML = '<p>Hello World</p>';

The problem is, presumably because the JavaScript is injected into the HEAD. I'm not grabbing the element 'app',

app.js:4 Uncaught TypeError: Cannot set property 'innerHTML' of null

Can anyone suggest a better approach for adding JavaScript to the admin area?

[David Beesley]

I have worked around it now, but adding an event listener for DOM ready

document.addEventListener("DOMContentLoaded", function(event) { 
	var app = document.getElementById('app');
	app.innerHTML = '<p>It Works</p>';
});

 

[Martijn Geerts]

DOMContentLoaded has alot of pitfalls, browser compatibility etc etc.

Why not use jQuery ready or call the script manually after the id app is in the dom. 

[David Beesley]

This will only be client facing, and we have outlined that we will not be supporting below IE9.

So based on the can i use stats, we are fine with DOMContentLoaded

http://caniuse.com/#feat=domcontentloaded

[LostKobrakai]

The processwire admin is using jquery all over the place, so why not use it if it's already there.

[benbyf]

you could also simply include your javascript lower in the page without injecting it into the head... but the Jquery option seems solid.