Custom Javascript

Mikael Jenkler

Custom Javascript only runs once. when clicking around on the page the output goes away!

example:

console.log('Hello');

This only loads once when page is reloaded. Fick i click on the menus I expect it to run again and is it possible to make i run only on certain pages when adding it i Custom Javascript.

Before this i had the script in a widget but that does not work anymore because it cant find jquery and other scripts.

PitaJ

@jenkler assuming you have a function onLoad that does the stuff you want done on page load, the following should handle when the page first loads and when switching between pages

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

Mikael Jenkler

@pitaj said in Custom Javascript:

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

Uncaught ReferenceError: onLoad is not defined

I am trying to use /admin/appearance/customise#custom-js to add Javascript on my page.

How do I get "console.log('Hello');" run everytime i click on the link or reload the page.
How do I get this to run only on specific pages. I tried widgets before but that does not work now.

PitaJ

I said

assuming you have a function onLoad that does the stuff you want done on page load

Which means that you should define the function like this:

function onLoad() {
  console.log('yeah it works');
}

Mikael Jenkler

@jenkler said in Custom Javascript:

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

So, someting like this?

function onLoad() {
console.log('yeah it works');
}

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

PitaJ

@jenkler yes it should work. Have you tried it?

Mikael Jenkler

Yes, it seams to work. Could i do this in a widget

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

So i only load it from that page! I guess that would be the right way to go!

Mikael Jenkler

I get onLoad is not defined if I put that in a widget. Thats because custom javascript render last.

PitaJ

You should just put the onLoad function in the widget code with the other two things.

PitaJ

Also, you might get an error if you access the page with the widget on cold load. If that does happen, then you'll need to add a window onload event handler with addEventListener and put that stuff inside it.

Mikael Jenkler

function onLoad() {
alert('yeah it works');
}

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);
</script>

Tried to add this into a widget. Cold load does not work and i get double alerts and it follows on other pages.

PitaJ

I realise that things are difficult but please try to tinker around with things. I try to help everybody but I'm not gonna do everything for you. If I do, you'll never learn anything.

Mikael Jenkler

ok, thanks. I will see if I can get it to work.

Mikael Jenkler

I got it to work with

$(window).on('action:ajaxify.end', onLoad);

for the global stuff and made a script that would wait for jquery to be loaded