undefined error when calling function from another js sourcefile

Question

Hello,

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

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 2

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.