1

I am using a javascript function that is supposed to invoke on page load complete (like JQuery's function) heres what it looks like:

<script>
var ready = function(fn) {

    // Sanity check
    if (typeof fn !== 'function') return;

    // If document is already loaded, run method
    if (document.readyState === 'complete') {
        return fn();
    }

    // Otherwise, wait until document is loaded
    // The document has finished loading and the document has been parsed but sub-resources such as images, 
    //stylesheets and frames are still loading. The state indicates that the DOMContentLoaded event has been fired.
    document.addEventListener('complete', fn, false);
};

ready(function() {
    alert(lang);
    Load(@Model.Language); //<--this is what I want called

    });
</script>

------->MVC Stuff<-------

 function Load(lang) {


 switch (lang) {
   case 'Other':
        BuildBox("text/text");
    case 'CSharp':
        BuildBox("text/x-csharp");
        break;

}

When I set the breakpoint at the Assignment from the model, we're hitting it. However, nothing else ever happens (including the alert box. I'm not sure why it is not executing the function fully upon load.

rigamonk
  • 1,079
  • 1
  • 14
  • 42
  • You want window.onload = function() {...} – Emmanuel Delay Aug 30 '16 at 16:11
  • @EmmanuelDelay You can only do that for one function. OPs code should in theory allow multiple calls to `ready()` for different blocks of code that need to be executed upon page load. – James Thorpe Aug 30 '16 at 16:12
  • 1
    Try `window.addEventListener('load', () => ...)` instead. – rishat Aug 30 '16 at 16:12
  • Are there any javascript errors in the console? `Load(@Model.Language)` is not valid Javascript. – Andy Ray Aug 30 '16 at 16:14
  • @rigamonk It's not entirely clear what is happening at the moment - you mention _"set the breakpoint at the Assignment from the model"_ - I don't see such an assignment? Could you be clearer on what is/isn't happening, and perhaps include the rendered markup rather than the pre-rendered (I assume) c# razor view? – James Thorpe Aug 30 '16 at 16:15
  • You might also be interested in [this article](http://dfsq.info/site/read/writing-your-own-jquery), specficially sections 1 and 2, which recreate a minimal on-ready function handler. – James Thorpe Aug 30 '16 at 16:17
  • what is lang? maybe it is undefined? – chchrist Aug 30 '16 at 16:17
  • The problem AFAICS is that there's no "complete" event. – Chris G Aug 30 '16 at 16:41

2 Answers2

0

This works:

function ready(fn) {

  // Sanity check
  if (typeof fn !== 'function') return;

  // If document is already loaded, run method
  if (document.readyState === 'complete') {
    fn();
  }

  // Otherwise, wait until document is loaded
  // The document has finished loading and the document has been parsed but sub-resources such as images, 
  //stylesheets and frames are still loading. The state indicates that the DOMContentLoaded event has been fired.
  document.addEventListener('readystatechange', function () {
    if (this.readyState === 'complete') fn();
  }, false);
}

ready(function() {
  alert("loading complete");
});
Chris G
  • 7,957
  • 4
  • 17
  • 29
0

I suggest you to use this.

    (function () {
    var x = "Hello!!";      // I will invoke        myself
})();

The parantheses(); after the anonymous function is calling the function itself. And you can impliment document ready event like this.

    document.addEventListener('DOMContentLoaded', function() {
   // ...
});
TheTom
  • 289
  • 3
  • 15