Javascript function error (function not defined)

Question

I wrote a javascript function (already tested it and it works) on a file in a development server and it works just fine, I uploaded the file to the production server and when I test it I get the following error:

Opera Dragonfly says:

Uncaught exception: TypeError: Cannot convert 'App.system.ManageProductLines' to object

Firebug says:

App.system.ManageProductLines is undefined

The files are exactly the same (I checked with WinMerge and found no differences), the only difference is the server on which they're on.

My development server is the latest version of Xampp on windows and the production server is the latest version of Xampp on OpenSuse.

Does anyone have any idea what's going on??

Edit:

Suggested by dtryon, here's some example code:

In main.js

App.system.ManageProductLines = function()
{
     var init_row = function(row)
     {
          //function to add table row behavior
     }

     var reindex_odd_even_rows = function(table)
     {
           //function to reoder table when row is deleted
     }

 }

In index.tpl (Smarty template):

{if $product_lines_url}
    <script type="text/javascript">
        App.system.ManageProductLines.init('manage_product_lines');
    </script>
{/if}

The if in the smarty template is indeed executing, since the final HTML has the script tage in it, however in dev server the function is found, but in production server it isn't

Edit 2:

Thanks to Paul Butcher I think I'm getting closer to the answer, I tried the following:

<script type="text/javascript">
$(document).ready(function()
{
    App.system.ManageProductLines.init('manage_product_lines');
});
</script>

However it still wouldn't load, then I tried this:

<script type="text/javascript">
$(document).ready(function()
{
         alert("Start document.ready");

         if(App.system.ManageProductLines.init)
         {
            alert("Method found");
            App.system.ManageProductLines.init('manage_product_lines');
         }
         else
         {
             alert("Method not found");
         }

         alert("End document.ready");
});

According to what I wrote I should get the following alerts:

"Start document.ready", "Method found" || "Method not found", "End document.ready"

The weird thing is I only get "Start document.ready", after that it seems that it just stops executing, both Opera Dragonfly and Firebug show the same error as before.

Answer 1

At the time this line is reached:

App.system.ManageProductLines.init('manage_product_lines');

There is no certainty that main.js has been loaded or executed. You need to bind that call to an event that will only occur after all scripts have been loaded.

If you are using one, most javascript libraries offer such an event (e.g. ready in jQuery). If you are not using one, then binding to onload should work.

One possible reason for the difference between the two environments may be network latency or load. This is particularly likely if the development server is localhost.

Answer 2

I found the issue, the problem is that the server application (activecollab 2), already had a file with the exact same name, which for some reason always held a higher priority that my file, after contacting AC support the only option was to overwrite their file with mine.