undefined error when calling function from another js sourcefile

Question

I have a question that concerns calling a function within another js sourcefile.

I declared the sourcefile before the file with the function that calls that particular function. I thought this would work, but it gives an undefined error.

I also have a function in a file that calls a function in a later declared sourcefile. That would concern the same files but the other way around.

The functions are declared between document ready statements(functions).

Is there a way to avoid the undefined error??

this is how I set it up:

<script type="text/javascript" src="includes/livetabs.js"></script>
<script type="text/javascript" src="includes/chat.js"></script>


//this is in the chat.js file
$(document).ready(function(){

function chatWith(chatuser) {
    check=iscookieUsername();
    if (!check){
            chatusersuspended=chatuser;
            showchatinlogform();
    }
    createChatBox(chatuser);
    $("#chatbox_"+chatuser+" .chatboxtextarea").focus();
}


});

//this is in the livetabs.js file
$(document).ready(function(){

function iscookieUsername(){
        if (!tbusername){

            return false;
        }
        if (issessionusername){//flag if session has already been set

            return true;
        }
        $.ajax({
            url: "includes/livetabs.php", 
            data: ({username: tbusername, action: "setsessionusername"}),
            cache: false,
            type: "POST",
            dataType: "json",
            success: function(data) {
            //store username in php session
            //some personal user preferences returned 
            usernamecookie=data.cookie;
            trackuser=data.track;
            issessionusername=1;
        }});

        return true;
    }

});

Thanks, Richard

Answer 1

If you have defined your function inside the $(document).ready method call, they won't be visible from outside. Try to define them outside of the ready method call.

$(document).ready(
    function()
    {
        var test = function() { alert('test'); };

        test(); //It will work here.

        anotherTest(); //This will also work.

    }

);

function anotherTest() { alert('anotherTest'); };

test(); //You can't call test function here because test is defined inside the anonymous function passed to the 'ready' method.

anotherTest(); // Alerts 'anotherTest'. 

If this is not how your code is laid out, please post your source code so that the problem can be identified.

Answer 2

It's likely that your first source file, the one that contains the function you want to call, has a syntax error that prevents the function from being available.

Also, it doesn't matter which order your files are loaded, the function will be available anyways. Example:

function foo() { alert('foo!'); }
foo();
bar();
function bar() { alert('bar!'); }

Edit: looks like SolutionYogi predicted the right answer. But for reference, I'll leave mine up.

Answer 3

Use google chrome and press F12 to see Developer Tools before you browse that particular page. In Network you can see which files are loaded search for your script containing your function. . (You can filter on Scripts also) it should be on top and your calling script should be loaded later. If it is not loaded then include that file in your page earlier. Hope that will solve the problem.