jQuery storing values outside function not working

Question

I am building this jQuery function to get data from my backend when a button is clicked. I have been reading this answer How do I return the response from an asynchronous call? to a similar question and applied the jQuery deferred objects solution as following.

var results; 
function ajax() {
    var keyword = prompt("Enter keyword you wish to search for");
    return  $.ajax({
                type: "GET",
                url: "http://localhost:8080/getGeojson"+keyword,
                data: {},
                dataType: 'json',              
                success: function (data) {
                    return(data);
                    console.log(data);
                }
            });
}


$('#keywordSearch').click(function() {
    ajax().done(function(result) {
        results = result;
        console.log("something went right");
    }).fail(function() {
        console.log("something went wrong");
    });
});

However this code is still not working. It gets the results and I see them in my console log, but the results are still not stored in the global variable results. It remains undefined.

Any help would be appreciated.

Thanks!

score 0 · Answer 1 · answered Jun 01 '16 at 13:44

0

In your function i dont see you actually assigning the results variable. You may need to add a results = data; to your ajax function.

function ajax() {
    var keyword = prompt("Enter keyword you wish to search for");
    return  $.ajax({
                type: "GET",
                url: "http://localhost:8080/getGeojson"+keyword,
                data: {},
                dataType: 'json',              
                success: function (data) {
                    results = data;
                    return(data);
                    console.log(data);
                }
            });
}

If you have any other questions please leave a comment.

answered Jun 01 '16 at 13:44

Kyle Pastor

489
4
8

I am saving the variable when the keywordSearch button is clicked (results = result) only when the request was successful. To my understanding it should do the same thing as your addition is doing but making use of JS promises – RaimoGIS Jun 01 '16 at 14:04
Adding the line you suggested did not work. I am guessing it has something to with the async? – RaimoGIS Jun 01 '16 at 14:08
If you add a console log in the click instance does the result return something or is it also undefined? – Kyle Pastor Jun 01 '16 at 14:56
That is strange indeed. Would it be possible for you to use codepen.io to make a small example of the above. Perhaps instead of using the actual ajax call try just using a basic function. – Kyle Pastor Jun 02 '16 at 16:54
Here is the link to example codepen. When I do it like this it works. http://codepen.io/RaimoGIS/pen/aZONjj?editors=1111 . The problem must be somewhere in the ajax call – RaimoGIS Jun 03 '16 at 07:04
Ya it looks like the ajax itself may be returning incorrect results. You may want to add the error function to your ajax request and check to see if it is returning something wrong. success: function (data) { return(data); console.log(data); },error:function(data){} }); – Kyle Pastor Jun 06 '16 at 00:30

jQuery storing values outside function not working

1 Answers1