Running a script for all pages of a thread after page load

[Iztak]

I am making a plugin with javascript I'd like to run ...

1. After page load
2. On all pages of a thread

I can make it run after page load with this:
$(document).ready(function() {

But so far I can only get it to run either on the first page or on subsequent pages.

With this code, it runs only on the later pages...
pb.events.on('afterSearch', function() {

Without that, it runs only on the first page.

EDIT: Put another way, I need the javascript to be applied to every post regardless of what page it's on.

Any help?

[Kami]

I don't write javascript, but I expect the issue you're encountering is the fact that only the current page of a thread loads. So if you're on page one, only page 1 content is populated and any subsequent page content does not exist. When you switch to page 2, only page 2 content is populated and pages 1 and 3+ does not exist.

You'll only be able to run a script after page load for the current page. I don't know what js you'd need to accommodate for that, but you can't write a script that does all pages simultaneously simply because they don't exist as far as the browser is concerned.

[Iztak]

I need the affect to happen on every post regardless what pages it's on.

[Kami]

Jun 9, 2020 12:08:20 GMT -8 Iztak said:

I need the affect to happen on every post regardless what pages it's on.

Like I said, I don't write javascript, I just wanted to chime in with the above information in case you were writing something that was attempting to find multiple pages.

[Iztak]

Yes, of course. Thank you! Maybe someone with javascript experience will be able to advise.

[Todge]

You call the function twice, once for the first page, and again whenever you navigate from page to page within that thread..

$(document).ready(function(){
   alert('hey');
   proboards.on('pageChange', function(){
      alert('hey');
   });
});

[Iztak]

Thank you! That is what I needed!

[Todge]

No worries..

[Brian]

I would personally write this as a function so that you don't have to duplicate code.

(function() {
    function yourFunctionNameHere() {
        console.log('This is the code executed by the actual function');
    }

    $(yourFunctionNameHere);
    pb.events.on('afterSearch', yourFunctionNameHere);
})();

The bits I colored red are the opening and closing of a self-executing function. Writing code within it is the same as writing code anywhere, but since it's within the scope of a function any variables or new functions you declare within it won't exist in the global namespace which should prevent it from being overwritten by anyone else's code.

The line in blue is shorthand for jQuery's $(document).ready which you're using above. Typing a dollar sign followed by a function name between parentheses will make that function execute when the page has finished loading.

[Chris]

It might also be important to point out something regarding the use of IIFE in plugins. From the discussion in the linked thread it appears to be fixed on PB's end on a case by case basis. The alternative and simple workaround is to give your anonymous function a name (so no longer anonymous ) which I've been doing ever since without further issue. I used to give my IIFE functions names back in the days since it also helped with quickly recognizing them during debugging/stack traces but fell off doing so until this issue cropped up again.