Custom javascript, why is it not running?

[eeeee]

Following on from the question on widgets, I was trying the suggestion to put certain code in the customJS area (so it isnt affected by benchpress parsing.)
None of it was working.
So I tried just a very simple alert, nothing!

Incidentally I also tried the prompt command which is similar to alert. I note the alert keyword is colored (recognised as a command), while the prompt command isnt.

Anyway why did I not get an alert, or prompt. I expected one on every page.
I rebuilt & restarted forum, not sure you even have to do that for customJS to take effect?

[baris]

There is no need to restart the forum for custom javascript changes, the code you put there gets inserted into the footer of the forum dynamically, You an inspect the page and see it at the bottom.

Check if it's enabled in the ACP, see below picture:

And check if there are any javascript errors in your browser console. A previous js error can prevent the execution of other code on the page.

[eeeee]

Thanks, yes I had forgot to enable it!
However now I get an alert once when first going to forum page, but not when changing categories or navigating pages.
So problem is it wont detect when Im in certain category, as customJS only runs once per site load?
Can see it here with an alert command, only firing once
Aignite.nodebb.com

[phenomlab]

@eeeee This on it's own isn't enough. That will only fire once when the site loads.

alert('test2');

Try the below. This will fire on every ajax call

$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        alert('test2');
    });
});

[eeeee]

@phenomlab Thanks.
I dont know much JQuery so:
I get why its needed to add an eventListener to the ajax call, but what does the (document).ready command do there?

[phenomlab]

@eeeee said in Custom javascript, why is it not running?:

what does the (document).ready command do there?

It waits for all elements in the DOM to be fully loaded before it'll execute.

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

[eeeee]

Seems to work just with the eventListener... I left the ready out!
Is that ok to do?
I read customJS doesnt run till the page is built, so DoM should be ready?

[phenomlab]

@eeeee said in Custom javascript, why is it not running?:

Edit, seems to work just with the eventListener... I left the ready out!

Yes, it will, but if you have other js functions that also run on site load, your script above might execute before the DOM is ready, meaning it won't fire. This in general is "best practice".

[phenomlab]

@eeeee said in Custom javascript, why is it not running?:

I read customJS doesnt run till the page is built, so DoM should be ready?

You are correct, but I add it as a matter of course - mostly because it's a force of habit (and not a bad one either)

[julian]

@phenomlab Doesn't hurt.

If you execute .ready() and the page is already ready, then it will just fire the callback immediately.