Catch "content loaded" event via JS


(Maestro Magnifico) #1

I code jQuery, but usually I don’t have to deal with real-time softwares or dynamic content loading. Usually when I have to do something after content loaded, I just do this.

$(document).ready(function() {
    // do stuff
});

And if I need to catch some user’s action, I do this.

$(document).on('click', '.element', function(event) {
    // do stuff
});

With Discourse it’s a bit tricky to catch “document ready” event, because document changes dynamicly. I’m thinking about starting a timer when user clicks on any a button. Timer will wait for loading wheel to disapear and then “do stuff” with loaded page. But maybe there’s simplier build-in callbacks for this?


How to select a lot of topics fast?
(Allen - Watchman Monitoring) #2

We’re using our Custom Field Replacement plugin and it’s suffering a similar fate. By loading too soon, it can’t do its job right, but refreshing a page works fine.


(Maestro Magnifico) #3

Sinse devs didn’t provide any help on this, I decided to do this dumb way.

function rebake_stuff(Selector) {
    switch (Selector) {
        case 'table.categories':
            // rebake stuff here
            console.log('table.categories rebaked!');
        break;
        case 'input.bulk-select':
            // rebake other stuff here
            console.log('input.bulk-select rebaked!');
        break;
    }
}

function init_rebake_stuff(Selector) {
    if (($(Selector).length) && (!$(Selector).hasClass('rebaked'))) {
        $(Selector).addClass('rebaked');
        rebake_stuff(Selector);
    }
}

var timer = setInterval(function() {
    init_rebake_stuff('table.categories');
    init_rebake_stuff('input.bulk-select');
    // add more stuff here to rebake
}, 200);

Redid this. This time it works better, every time and with any object. And you can use bigger intervals now.


How can I add a custom class to every 2nd message?
(Allen - Watchman Monitoring) #4

We’ve updated our plugin, and it’s doing the replacement clean every time. Here’s how we solved the issue, allowing us to trigger an event once it was ready. It fires after each Ember view load.


(Maestro Magnifico) #5

This can shoot many times. I fixed it like this:

Discourse.View.reopen({
    didInsertElement : function(){
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },
    afterRenderEvent : function(){
        // выполняем всего раз
        if ($('#main-outlet .contents').hasClass('stuff-rebaked')) {
            return false;
        }
        
        $('#main-outlet .contents').addClass('stuff-rebaked');
        rebake_stuff();
        console.log('page rebaked');
    }
});

// This is instead of document.ready
function rebake_stuff() {

};

Btw, what replace(); string in your example do? Do I need it?


Javascript getElement methods doesn't work
(Allen - Watchman Monitoring) #6

Replace(); could do whatever you needed… or you could put your own script in the place of “replace”

In our case, replace(); was defined later in the script (here) with the purpose of allowing us to display custom URLs based off a subdomain we stored as a custom field on each user.

(For those playing the home game, our custom fields are not yet ones which are controlled by the Discourse admin, as we don’t have the needed level of control over those).


(Bart) #7

That was super helpful, thanks!


(SMHassanAlavi) #8

can you explain more??
How should I use this code in my plugin below:

export default {
name: ‘dynamic-table’,
initialize() {
$(document).ready(function() {
var elements = document.querySelectorAll(".topic-list .main-link a.title");
var elements2 = document.querySelectorAll(".badge-wrapper.box span.badge-category");
var i = 0;
var a1 = -1, a2 = -1, a3 = -1;
for(i = 0 ;i < elements2.length ; i++) //Finding the position of wanted topics
{
if (elements2[i].innerHTML == “ورزشی”)
{ if(a1 == -1)
a1 = i;
else if (a2 == -1)
a2 = i;
else if(a3 == -1)
a3 = i;
}
}
document.getElementById(‘dyn1’).innerHTML = elements[a1].innerHTML;
document.getElementById(‘dyn1’).href = elements[a1].href;
document.getElementById(‘dyn2’).innerHTML = elements[a2].innerHTML;
document.getElementById(‘dyn2’).href = elements[a2].href;
document.getElementById(‘dyn3’).innerHTML = elements[a3].innerHTML;
document.getElementById(‘dyn3’).href = elements[a3].href;
});

}
};