Javascript onload not firing

Hey guys,

This may be a bit of a basic question, I am more of a back-end guy. Currently I am trying to connect some java-script code to a front end element. The issue is that my window.onload (and document.onload, I tried them both) never fires. my javascript is in the plugin init folder ( [plugin]/assets/javascripts/initializers/[plugin].js.es6 )

export default {
  name: "meritmoot",
  initialize() {

    //my initialization function
    function initializeMeritmoot(api) {
      console.log("inside initializeMeritmoot")

      //function on key up
      function repInputKeyUp() {
        inputBox = document.getElementById("rep-input")
        console.log("in rep input key up")
        ajax("/reps/search/" + inputBox.value +".json", {type: 'GET'}).then((result) => {
          console.log(result)
          result = JSON.parse(result)
          repList = document.getElementById("rep-list")
          repList.innerHTML = ""
          result.forEach(op => {
            var x = document.createElement("INPUT");
            x.setAttribute("info-tag-id", op.id)
            x.setAttribute("value", op.mm_reference_str)
            repList.appendChild(x)
          });
          console.log(repList)
        });
      };
      console.log("Past Function Def");
      
      //window load (doesnt happen)
      window.onload = () => {
        console.log("PageLoaded") <-----------------------------------this never prints
        document.getElementById('rep-input').onkeyup = repInputKeyUp;
      };
      console.log('leaving initializeMeritmoot');
    }
    console.log("MeritMoot Javascript In Default")
    withPluginApi("0.8.37", api => initializeMeritmoot(api));
  }
};

Any thoughts on why this may be? Is this javascript setup correctly in relation to discourse? Or is this more of a general javascript thing?

Edit: trying addEventListener…

Edit: substituting onload for:

  window.addEventListener('onload', function() {
    console.log("PageLoaded")
    document.getElementById('rep-input').onkeyup = repInputKeyUp;
  }, false);

did not work either

You are working with EmberJS here, not vanilla JavaScript. It will not behave the same.

Best to follow EmberJS best practice.

I would consider piggybacking your logic onto an existing component or adding one to a plugin outlet and using the didInsertElement hook.

Read the EmberJS Guides

2 Likes

Thanks! I saw ember was a big part of discourse, but didn’t realize it overrode vanilla. Ill take a time and learn it.

edit: I am using the plugin element discovery-list-container-top and connecting to a ruby backend plugin archetecture

edit: Whats the relation between ember-rails and discourse? Ember by itself seems to be a full stack enviroment. Looking at GitHub - emberjs/ember-rails: Ember for Rails 3.1+

ember-rails is a Ruby gem that is actually used in Discourse.

Discourse staffers are far better to comment, but broadly, EmberJS deals with the front-end, and Ruby-on-Rails, the back end. Of course, Discourse has elements of a bespoke architecture and the exact configuration is, like any big application, at least somewhat unique.

A nice description of the way things work is here Creating Routes in Discourse and Showing Data

The API docs are here https://docs.discourse.org

2 Likes