Uncaught ReferenceError: Main is not defined javascript

Question

I am having a bit of trouble calling a function from one Javascript file from another.

the call my search.js file is using is

Main.UserRoleTeam({
    teamdropdown: $("#Team"),
    teamroledropdown: $("#TeamRole"),
    memoryload: true,
    load: function (options) {
    }
});

The other file is Main.js

function UserRoleTeam(options) {
    ...
}

In dev, this works in test, it does not.

The folder \\ file structure is exactly the same and I have checked all this.

I have also used a diff tool to look at solution \\ folder \\ file differences and there is nothing.

In my aspx page the files are being called like so.

<script src="../Static/Search.js" type="text/javascript"></script>
<script src="../Static/Main.js"type="text/javascript"></script>

I have check the other answers on here, and tried various solutions, most of which state that the order of the calling files should be as above.

================================================

Edit 1

looking at the page source, the values I should be expecting back are in the sourcecode,

<div class="user text-right">
    <b>User:</b><span id="UserName">adrian wright</span><br />
    <b>Team:</b><select name="Team" id="Team">
        <option value="4" data-roles="Agent|AGENT">CPS</option>
        <option value="5" data-roles="Manufacturer|MANUFACTURER">TEJ</option>
        <option value="3" data-roles="Supplier|SUPPLIER">SHA</option>
    </select>
   <br />
   <b>Role:</b><select name="TeamRole" id="TeamRole">
   </select>
</div>

But the selection list isnt populating, with the value.

again, code is exactly the same as in dev as in test but dev working, test is not.

Answer 1

Your function is currently window.UserRoleTeam , not window.Main.UserRoleTeam .

To correct this change your function declaration to:

var Main = Main || {};
Main.UserRoleTeam(options) {
    ...
}

Secondly make sure this is declared before being called. To do this you will need to reorder your javascript references:

<script src="../Static/Main.js"type="text/javascript"></script>
<script src="../Static/Search.js" type="text/javascript"></script>

I'm not sure why it works locally, but it shouldn't be, unless you have other code in dev supporting this.

---

FYI - Adding functions into a file called Main.js doesn't make the function exist under a Main object.