JavaScript “ is not a function” error when passing function as argument

Question

I have this piece of code in html header:

<script src="../scripts/scripts.js"></script> 
<script>

$(document).ready(function() {
   window.LastConnection=null;
   AjaXUpdateDetails(SetDetailsToHtmlPage);
});

</script>

in scripts.js I have:

var SetDetailsToHtmlPage=function (details_array){
   window.LastConnection;
   if (window.LastConnection!==null) {
      if (window.LastConnection!==details_array.last_connection) {
         $("#EStatus").val(details_array.status);
      }
   }
};  

and

function AjaXUpdateDetails(interfaceUpdateFunc){
   var ajaxRequest;  
   if ( (ajaxRequest=getAjaxObject())===false ) return; 

   ajaxRequest.onreadystatechange = function() {
      if(ajaxRequest.readyState == 4) {       
         var data_array =jQuery.parseJSON(ajaxRequest.responseText); 
         interfaceUpdateFunc(data_array);            
      }
   };

   var queryString = "?id=1";
   ajaxRequest.open("GET", "../scripts/AjaXgetDetails.php" + queryString, true);
   ajaxRequest.send(null); 
}

I read a lot about passing functions as arguments and thought I understood the idea but I keep getting error:

TypeError: interfaceUpdateFunc is not a function
interfaceUpdateFunc(data_array);

Where do I make a mistake?

thanks and regards

Tom

Answer 1

Try checking it before you pass it to AjaXUpdateDetails:

$(document).ready(function() {
   window.LastConnection=null;
   // verify it is defined here
   console.log(SetDetailsToHtmlPage, typeof SetDetailsToHtmlPage)
   AjaXUpdateDetails(SetDetailsToHtmlPage);
});

I suspect that will tell you the function is undefined at this point (scope issue). You can probably fix it by changing:

var SetDetailsToHtmlPage=function (details_array) {

to

function SetDetailsToHtmlPage(details_array) {

Answer 2

interfaceUpdateFunc is a param. You could not call by that way.

if (typeof(interfaceUpdateFunc) == "function") {
    interfaceUpdateFunc.apply(this, [data_array]);
}

You can check object is a function by this way:

function isFunction(func) {
  return Object.prototype.toString.call(func) == '[object Function]';
}

And

if (isFunction(interfaceUpdateFunc)) {
    interfaceUpdateFunc.apply(this, [data_array]);
}

Answer 3

Here are couple of investigative changes that you can try:

1) The Function expression var SetDetailsToHtmlPage=function (details_array) is not in a function so it has global scope. Because it is an expression then the variable will be "hoisted" which means it is declared before it is assigned to the function. So try declaring it as a function: function SetDetailsToHtmlPage(details_array) . This will cause the function declaration including the function to get "hoisted" in the same scope as the document ready event.

2) If that has no effect then try using jQuery document event .load() as opposed to .ready() to see if that has an effect.

$(document).load(function() {
   window.LastConnection=null;
   AjaXUpdateDetails(SetDetailsToHtmlPage);
});