Javascript JQuery On Select Change Get Result and pass to outside

Question

I have the following code which works on the event that a select box is changed. When it changes, the ajax call will pass the results to the variable result. My problem is that I cannot get that data outside this function.

The code:

$('#myselect').on('change', function() {
    $.ajax({
        url: 'myurl'+this.value,
        method: 'GET',
        success: function(result) {
            console.log(result); //Just checking it's there
            external = result;
        }
    });
});

console.log(external); //Returning Undefined

I need external to be available here outside the function above.

How do I do this?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Patrick Roberts, Jul 26 '16 at 13:45

eisbehr · Accepted Answer · 2016-07-26T13:58:12.937

You can create the variable outside of the event and than access it outside. But as ajax is ascychron, the variable would still be undefined:

var external;

$('#myselect').on('change', function() {
    $.ajax({
        url: 'myurl' + this.value,
        method: 'GET',
        success: function(result) {
            external = result;
        }
    });
});

// this would be still undefined
console.log(external);

You can write the console.log inside your success, or create your own callback function. Then you can log or handle the data otherwise after the ajax request.

$('#myselect').on('change', function() {
    $.ajax({
        url: 'myurl' + this.value,
        method: 'GET',
        success: function(result) {
            myCallback(result);
        }
    });
});

function myCallback(external) {
    console.log(external);
}

Even shorter would it be possible in this example, if you directly use your callback function as success callback without wrapper. And because GET is the default request type, we could remove it too:

$('#myselect').on('change', function() {
    $.ajax({
        url: 'myurl' + this.value,
        success: myCallback
    });
});

function myCallback(external) {
    console.log(external);
}

score 0 · Answer 2 · answered Jul 26 '16 at 13:46

I'm sorry if I'm misunderstanding the question:

What it sounds like is that you are trying to get the data from external but the ajax call hasn't called the callback yet, so the data hasn't been set.

If I can recommend how to fix it, call the code that references external from the callback itself so you can guarantee that you have the data when you need it.

score 0 · Answer 3 · edited Jul 26 '16 at 14:01

You are not able to access variable because it comes in picture after ajax completion and you are trying to access it directly, since you don't have any idea how exact time this ajax takes each time so you need to define a function like this

$('#myselect').on('change', function() {
  $.ajax({
      url: 'myurl'+this.value,
      method: 'GET',
       success: function(result) {
       console.log(result); //Just checking it's there
       saySomething(result); //result will be injected in this function after ajax completion 
    });
});

function saySomething(msg) {
    console.log(msg); //use variable like this
}

score 0 · Answer 4 · answered Jul 26 '16 at 14:11

I hope my code is help to you.

$('#myselect').on('change', function() {
    $.ajax({
        url: 'myurl'+this.value,
        method: 'GET',
        async: false, // stop execution until response not come.
        success: function(result) {
            console.log(result); //Just checking it's there
            external = result;
        }
    });
});

console.log(external); //now it should return value

score -1 · Answer 5 · answered Jul 26 '16 at 13:46

-1

Define the variable external above your first function like so:

var external;

$('#myselect').on('change', function() {


  $.ajax({
        url: 'myurl'+this.value,
        method: 'GET',
        success: function(result) {

         console.log(result); //Just checking it's there

         external = result;


        }

    });

});


console.log(external);

answered Jul 26 '16 at 13:46

seemc0

27
2

But then `console.log(external);` would still print `undefined`. ;) – eisbehr Jul 26 '16 at 13:48

Javascript JQuery On Select Change Get Result and pass to outside

5 Answers5