How can I Jquery run every pages&posts&homepage etc.?

Alshain

How can I Jquery run every pages&posts&homepage etc.?
I create a new extension with jquery. But jquery working just one page. Then not working after change post or page.

How can I do this?

[deleted]

Alshain you can place the code in the custom header (or footer). I do this for a jQuery scroll to top button I wrote and it works fine on every page.

Pollux

Alshain How can I Jquery run every pages&posts&homepage etc.?

I'm not quite sure what you want to do. I assume you want to have jquery being executed with every new page load. If my assumption is correct you can do this by extending or overriding the prototype of a given page.

If you have no idea about writing extensions you may read here more about it:

https://flarum.org/docs/extend/

Now let's assume, your extension helloworld is here:

flarum/packages/helloworld

To work with jQuery, you need to work on the Javascript side of things:

flarum/packages/helloworld/js/src/forum/index.js

This file could look like this to have jQuery code executed with each visited index page (all discussions, tag view):

import app from 'flarum/app';
import {extend} from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';

app.initializers.add('helloworld', function() {
	extend(IndexPage.prototype, 'view', function (view) {
		$('body').addClass('hello-world');
	});
});

The executed jQuery function does only one thing: it adds a class to the body element named hello-world. It's not a fancy extension, but here you have a jQuery code executed only with index pages. You can check this by going to a non-index page, reload the page, inspect the body element and then move to an index page.

Keep in mind, that moving away from the index page doesn't remove the class, this has to be done actively by extending the prototype of another kind of page, e.g.

import app from 'flarum/app';
import {extend} from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';
import UserPage from 'flarum/components/UserPage';

app.initializers.add('helloworld', function() {
	extend(IndexPage.prototype, 'view', function () {
		$('body')
			.addClass('hello-world');
	});
	extend(UserPage.prototype, 'view', function () {
		$('body')
    			.removeClass('hello-world')
			.addClass('hello-user');
	});
});

I have not tested this code, I hope it's not too faulty.

At least you get an idea how to add jQuery code to certain types of pages.

Alshain

[deleted] It works when I first enter the page. But when I click on another page later, it doesn't work.

Is it possible to share your jquery code?

[deleted]

Alshain Sure, here it is

<a id="btt"></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var btn = $('#btt');

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

btn.on('click', function(e) {
  e.preventDefault();
 $('html, body').animate({scrollTop:0}, '300');
});
</script>

Alshain

[deleted] Your code works differently with my code 🙁 I want something much different than that.
I thank you anyway.

luceos

Alshain Flarum is a Single Page Application. It loads the javascript once and then re-uses that on each page loaded through the app.

clarkwinkelmann

Flarum is designed to be extended via its javascript components. If your change can only be applied via jQuery, you should extend the config method of a component and run your code from there.

If you don't want to set up extension pre-compilation, there's a shortcut I present here. It might break in future Flarum upgrades though: https://discuss.flarum.org/d/20939-easier-way-to-manipulate-posts/2

Alshain

clarkwinkelmann I don't know what you're trying to do with this code?

clarkwinkelmann

Alshain it extends a component and runs code everytime it's initialized, running javascript on the children of that element only. In this case it's the CommentPost block that contains the post of a user, but this can be modified to extend the Page for example.

What will your code do ?

clarkwinkelmann

Pollux extending config and adding/removing the class only if isInitialized is false can be used to only change the class when the component loads. When running it inside view it will be run on each redraw, which can be multiple times per second depending on the context. For this simple code this has probably no noticeable effect but for more complex scripts it could matter.

Also inside view the DOM of the component itself is not yet available, so if the code needs to alter the DOM of the component it needs to run inside config.

Pollux

clarkwinkelmann

Thanks for the insight. I came to my solution by trial and error and was happy to finally succeed somehow.

I will try to rework this code as I use a similar one within my own forum.