JavaScript

Callback is not a function error

23-Sep-15 3:51

Wrong forum, please try in http://www.codeproject.com/script/Answers/List.aspx?tab=active[^].

MadDashCoder14-Sep-15 21:36

14-Sep-15 21:36

Hi all, I am trying to call to a web service in a function but I get 2 errors that I cannot figure out the cause.

The first error is "Uncaught ReferenceError: distance is not defined" and the second error is "Uncaught TypeError: callback is not a function".

The following is my code snippet

JavaScript

function GetClosestRestaurant(location, distance, results, callback) {

        _lat = location.lat();
        _lng = location.lng();

        var jdata = { lat: _lat, lng: _lng, distance: distance, results:results };

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState < 4) {

                return;
            }
            if (xhr.status !== 200) {

                return;
            }
        };

        xhr.open('Get', 'http://http://localhost:21311/myService.asmx/GetClosestPlace', true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

        xhr.send(JSON.stringify(jdata));
        callback(xhr.responseText);
    }

    GetClosestRestaurant(location, distance, results, DisplayPlace);

    function GetAddress(addr, callback) {
    var location = "Some Location"; // Value returned from Google Map API
    var distance = "5";
    var results = "10";
    callback(location, distance, results);
    }

    function GetLatLong() {
      var address = "123 SomeStreet, SomeCity, SomeState";
       GetAddress(address, GetClosestRestaurant)
    }

I made sure that the variables location, distance, and results all have values by doing alert on all of them inside of the GetClosestRestaurant() function definition.

when I call GetClosestRestaurant() however, I get the error as stated above. Any help is greatly appreciated, thanks in advance.

modified 15-Sep-15 14:48pm.

Richard Deeming15-Sep-15 2:06

Richard Deeming

15-Sep-15 2:06

MadDashCoder wrote:
when I call GetClosestPlace() however, I get the error as stated above.

Well, there's clearly an error in your GetClosestPlace function. Since you haven't shown that function, we can't tell you what the error is.

The code you have posted has several problems:

xhr.open('Get', 'http://http://...
- double "http://" in the URL.
GetClosestRestaurant(location, distance, results, DisplayPlace);
- location, distance, results and DisplayPlace are not defined at the point where you are calling this function.
GetLatLong calls GetAddress, passing GetClosestRestaurant as the callback parameter. GetAddress then passes three parameters to the callback function, but your GetClosestRestaurant function requires four parameters.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

MadDashCoder15-Sep-15 6:39

15-Sep-15 6:39

Hi, thanks for replying. I have made changes to my code based on your suggestion and decided to use global variables as shown below.

JavaScript

_lat, _lng, _location, distance, results
function GetClosestRestaurant(_location, distance, results, callback) {

        _lat = _location.lat();
        _lng = _location.lng();

        var jdata = { lat: _lat, lng: _lng, distance: distance, results:results };

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState < 4) {

                return;
            }
            if (xhr.status !== 200) {

                return;
            }
        };

        xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

        xhr.send(JSON.stringify(jdata));
        callback(xhr.responseText);
    }

    GetClosestRestaurant(_location, distance, results, DisplayClosestRestaurant);

    function GetAddress(addr, callback) {
     location = "Some Location"; // Value returned from Google Map API
     distance = "5";
     results = "10";
    callback(location, distance, results);
    }

    function GetLatLong() {
      var address = "123 SomeStreet, SomeCity, SomeState";
       GetAddress(address, GetClosestRestaurant)
    }

Now I am getting the error "Uncaught TypeError: Cannot read property 'lat' of undefined" inside of the GetClosestRestaurant() function. I can't figure out why I am getting this error, since I get the value that I'm supposed to get when I do an alert passing in _lat. The other error I'm getting is "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".

I'm not sure if it's related to the first error since I made sure the variable names passed to the web service match the names of the parameters inside the web service function being called.

Thanks again for your help.

modified 15-Sep-15 16:41pm.

Richard MacCutchan15-Sep-15 9:09

15-Sep-15 9:09

Making the variables global is a waste of time if you do not initialise them with values before calling the GetClosestRestaurant method.

MadDashCoder15-Sep-15 10:40

15-Sep-15 10:40

Hi thanks for your reply,
All of the global variables are initialized prior to calling the GetClosestrestaurant function in my project I just forgot to take off the var keywords in the code above. Thanks for pointing that out.

Richard MacCutchan15-Sep-15 10:45

15-Sep-15 10:45

Then you need to show the code that does it. What you have shown is calling a function with some variables that have no values.

MadDashCoder15-Sep-15 14:21

15-Sep-15 14:21

Hi Richard, The error messages I am now getting are Uncaught TypeError: Cannot read property 'lat' of undefined" and "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".

Below is my code, global variables are declared but not initialized until the functions GetAddress() and GetClosestRestaurant() are called.

JavaScript

var _lat, _lng, _location, _distance, _results;
function GetClosestRestaurant(ilocation, idistance, iresults, callback) { 

        _lat = ilocation.lat();
        _lng = ilocation.lng(); 
        var jdata = { lat: _lat, lng: _lng, distance: idistance, results:iresults }; 
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (xhr.readyState < 4) { 
                return;
            }
            if (xhr.status !== 200) { 
                return;
            }
        };

        xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
        xhr.send(JSON.stringify(jdata));
        callback(xhr.responseText);
    }

    function GetAddress(addr, callback) {
     _location = "Some Location"; // Value returned from Google Map API
     _distance = "5";
     _results = "10";
    callback(_location, _distance, _results, GetClosestRestaurant);
    GetClosestRestaurant(_location, _distance, _results, DisplayClosestRestaurant); 
    }

    function GetLatLong() {
      var address = "123 SomeStreet, SomeCity, SomeState";
       GetAddress(address, GetClosestRestaurant)
    }

The global variables _location, distance, and results are initialized in the function GetAddress(). Then the global variables _lat and _lng are both initialized in the GetClosestRestaurant().

I was able to show that all of them have a value by doing alerts so I am not seeing where I went wrong. Please point what I did incorrectly.

modified 16-Sep-15 15:42pm.

Richard MacCutchan15-Sep-15 21:20

15-Sep-15 21:20

You are calling GetClosestRestaurant before you initialise any of the variables.

MadDashCoder15-Sep-15 23:29

15-Sep-15 23:29

Hi Richard, thanks for replying. I am confused by your statement that I did not initialize the global variables before calling the GetClosestRestaurant() function because they are initialized. The way my app works is, the user enters his input into the textboxes on the page.

Then when he clicks the Submit button on the page, the function GetAddress() is called which takes the data from the textboxes and initializes the global variables with them. However, instead of passing in the values from the textboxes, I decided to hard code the values for the global variables just for testing purposes.

Richard MacCutchan16-Sep-15 0:01

16-Sep-15 0:01

There is obviously something missing somewhere that you have not shown us. I can only suggest adding some further debug statements to trace the actual path through the code, and the values of all the variables as it goes through that path.

MadDashCoder16-Sep-15 9:33

16-Sep-15 9:33

Hi Richard, I think I understand why you said I did not initialize the global varibles before calling the GetClosestRestaurant() function. It is because I called it outside of the GetLatLong() function.

However, the same errors are still present after moving GetClosestRestaurant() inside of GetLatLong() and placing it at the very end to ensure all the global variables are initialized.

The following is all I'm trying to do:

JavaScript

Have the user enter into the textboxes his current address, the desired distance from restaurants, and the number of results to return.

Then pass the address which the user had placed in the textbox on my page to a function that will call Google Map API to get the latitude and longitude of the entered address.

Once lat and lng values from Google API are received, call a web service to get a list of restaurants
(which are within the specified distance entered by user) from my database.

I thought about writing this in JQuery but decided against it because I want to get a better grip of raw Javascript. I have modified the code to make it reflect the changes I've made in my projet file. Please take a look at my code below to see if you can spot where my problems lie now. Thanks for helping.

JavaScript

 var _lat, _lng, _location, _distance, _results;
function GetClosestRestaurant(ilocation, idistance, iresults, callback) { 

        _lat = ilocation.lat();
        _lng = ilocation.lng(); 
        var jdata = { lat: _lat, lng: _lng, distance: idistance, results:iresults }; 
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (xhr.readyState < 4) { 
                return;
            }
            if (xhr.status !== 200) { 
                return;
            }
        };

        xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
        xhr.send(JSON.stringify(jdata));
        callback(xhr.responseText);
    }

    function GetLatLong(addr, callback) {

     _distance = document.getElementById("Distance").value;
     _results = document.getElementById("Results").value;

     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({ 'address': addr }, function (searchResults, searchStatus) {
        _location = searchResults[0].geometry.location;        
        callback(_location, _distance, _results, GetClosestRestaurant);
     });

     GetClosestRestaurant(_location, _distance, _results, DisplayClosestRestaurant); 
    }

    function GetAddress() {
      var address = document.getElementById("Distance").value;
      GetAddress(address, GetClosestRestaurant);
    }

//Inside my page

HTML

<div><input type="button" value="Submit" onclick="GetAddress()"/></div>

modified 16-Sep-15 18:24pm.

Richard MacCutchan16-Sep-15 21:26