I have an issue with inline vs included Javascript

Question

I am relatively new to JavaScript and am trying to understand how to use it correctly.

If I wrap JavaScript code in an anonymous function to avoid making variables public the functions within the JavaScript are not available from within the html that includes the JavaScript.

On initially loading the page the JavaScript loads and is executed but on subsequent reloads of the page the JavaScript code does not go through the execution process again. Specifically there is an ajax call using httprequest to get that from a PHP file and passes the returned data to a callback function that in onsuccess processes the data, if I could call the function that does the httprequest from within the html in a

<script type="text/javascript" ></script>

block on each page load I'd be all set - as it is I have to inject the entire JavaScript code into that block to get it to work on page load, hoping someone can educate me.

Answer 1

If you aren't using a javascript framework, I strongly suggest it. I use MooTools, but there are many others that are very solid (Prototype, YUI, jQuery, etc). These include methods for attaching functionality to the DomReady event. The problem with:

window.onload = function(){...};

is that you can only ever have one function attached to that event (subsequent assignments will overwrite this one).

Frameworks provide more appropriate methods for doing this. For example, in MooTools:

window.addEvent('domready', function(){...});

Finally, there are other ways to avoid polluting the global namespace. Just namespacing your own code (mySite.foo = function...) will help you avoid any potential conflicts.

One more thing. I'm not 100% sure from your comment that the problem you have is specific to the page load event. Are you saying that the code needs to be executed when the ajax returns as well? Please edit your question if this is the case.

Answer 2

I'd suggest just doing window.onload:

<script type="text/javascript">
(function() {
    var private = "private var";
    window.onload = function() {
        console.log(private);
    }
})();
</script>

Answer 3

On initially loading the page the js loads and is executed but on subsequent reloads of the page the js code does not go through the execution process again

I'm not sure I understand your problem exactly, since the JS should execute every time, no matter if it's an include, or inline script. But I'm wondering if your problem somehow relates to browser caching. There may be two separate points of caching issues:

1. Your javascript include is being cached, and you are attempting to serve dynamically generated or recently edited javascript from this include.

2. Your ajax request is being cached.

You should be able to avoid caching by setting response headers on the server.
Also, this page describes another way to get around caching issues from ajax requests.

Answer 4

It might be best not to wrap everything in an anonymous function and just hope that it is executed. You could name the function, and put its name in the body tag's onload handler. This should ensure that it's run each time the page is loaded.

Answer 5

Depends what you want to do, but to avoid polluting the global namespace, you could attach your code to the element you care about.

eg

<div id="special">Hello World!</div>
<script>
  (function(){
    var foo = document.getElementById('special');
    foo.mySpecialMethod = function(otherID, newData){
      var bar = document.getElementById(otherID);
      bar.innerHTML = newData;
    };
    //do some ajax... set callback to call "special" method above...
    doAJAX(url, 'get', foo.mySpecialMethod);
  })();
</script>

I'm not sure if this would solve your issue or not, but its one way to handle it.