Detecting Discourse page change events with jQuery


#1

Hi everyone. I’m trying to customize Discourse a bit.

I’ve modified some elements of Discourse with jQuery when the page inits. But then when the page changes (e.g. a thread is opened, closed or you scroll down and more threads are loaded), my modifications are gone.

Obviously I need to re-hit my code then but I don’t know how I can detect page changes.

I’ve tried this:

App.ApplicationController = Ember.Controller.extend({
  routeChanged: function(){
        // the currentPath has changed;
        console.log('page changed')
  }.observes('currentPath');
});

and this:

Discourse.ApplicationController = Ember.Controller.extend({
  routeChanged: function(){
            // the currentPath has changed;
            console.log('page changed');
  }.observes('currentPath');
});

but I can’t find anything in the console.

FYI there’s better ways to modify Discourse obviously, but I code quick and dirty :slight_smile:


(Robin Ward) #2

Page inits are a different concept when the entire app is built using Javascript and re-rendered as needed.

Instead of thinking in terms of pages, I suggest thinking in terms of the thing you want to change. For example, is it a post you want to decorate? Add it to the post view class!


(Bobby Lie) #3

@pieterhoogenboom, I am having similar issue as yours. Have you found the solution?


#4

Yes! :smiley:

Sorry I didn’t post it. This is definitely a hack, but I’ve been using it in production for months and it works fine on all devices.

It simply counts every 50ms the topic list length, if it changes, it means the page has changed:

oldTopicsCount=$('.topic-list tr').length;
$(function() {
    setInterval(function() {
        if($('.topic-list tr').length!=oldTopicsCount) {
            // page changed
             initCustomization();
             oldTopicsCount=$('.topic-list tr').length;
        } 
    },50);
});

You then add a function called initCustomization(); which runs your code that changes the page. In my case on http://nomadforum.io it adds some announcements between the threads.

You can add this between in your customized Head


(Mittineague) #5

50 ms seems a bit much. Have you found that needs to be that often?


(Jong Eun Lee) #6

Is there any more convinient way?

Is there any way to get didTransition event of Ember Router?