How to use variable outside my ajax success

Question

The aim is to get the values from the ajax call function;

Below is the code I have tried to get the value from the ajax success function and use it for another function, where I draw a box over image using SelectAreas function.

Code:

$.ajax({
    type: 'GET',
    url: 'getfile.php',

    data: {
        'file': file,
    },

    success: function(data) {
        console.log(file);

        // value [2324106109]

        var value = data.split(",");
        console.log(value[0]) // 23
        console.log(value[1]) // 24
        console.log(value[2]) // 106
        console.log(value[3]) // 109
  

    $('#img01').selectAreas({
        onChanged: debugQtyAreas,
        maxAreas: 1,
        areas: [{
            x: value[0],
            y: value[1],
            width: value[2],
            height: value[3],
        }],
        parent: $('#myModal'),
    });
}
});

In the above code , the console.log prints the values successfully, but when I tried to use those values inside my SelectAreas function, I could not access the values of value[0],value[1],value[3],value[4].

I am not sure where I am making a mistake. Can someone help me fix this issue and help me to get the values of value[0], value[1], value[2] and value[3] inside the selectareas function

can you please elaborate on `could not access the values `. Are they `undefined`? — D. Seah, Nov 27 '20 at 07:26
Related: [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086) | [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321) — VLAZ, Nov 27 '20 at 07:32
@VLAZ I checked the suggestion u mentioned, but when i use the return function , it produces an error, undefined token return, I have updated the code. — Joskaa, Nov 27 '20 at 07:36
@Joskaa — I have absolutely no idea how you got to your latest edit from VLAZ's suggested links. You have just created syntax errors. (VLAZ's links aren't really relevant anyway, despite the question title you weren't trying to use those variables outside the success function (at least before the edit)). — Quentin, Nov 27 '20 at 07:43
1. You've closed the function with `}` *before* the `return`, hence you get a syntax error. 2. You shouldn't be using a `return` anyway. 3. I was giving you more information about asynchronous tasks, since you'd be dealing with those and likely would bump into this sooner or later. 4. It's not clear what do you mean by "could not access". Where and how are you trying to access these values? What do you get when you do that. — VLAZ, Nov 27 '20 at 07:44
@D.Seah In the above code, if u see the console.log for the values, I am able to print them in the logs, but when I try to access the same values inside the selectareas function , the value[0], value[1], value[2], value[3] have null values — Joskaa, Nov 27 '20 at 07:44
Please read [How to ask a good question](https://stackoverflow.com/help/how-to-ask). You need to provide a [mcve]. We can't tell what the `selectAreas` function does or why you think the values have changed to `null`. — Quentin, Nov 27 '20 at 07:45
@Quentin I am sorry for the question structure. In the above code, inside the selectareas function if I enter numbers to x,y,width and height(i.e., the numbers is have written next to console.log) , a box is displayed with these dimensions over the image. thats selectareas function .But if I try to get the variables value[0], value[1], value[2], value[3] to x, y , width and height. It doesnt create any box over the image. — Joskaa, Nov 27 '20 at 07:55
"In the above code, inside the selectareas function" — Which we still can't see. You need to provide a [mcve] — Quentin, Nov 27 '20 at 07:55
(Although it sounds like you are trying to use variables from another scope instead of getting *exactly the same values* from the arguments you pass to the function) — Quentin, Nov 27 '20 at 07:57
First and foremost, please indent your code. `type: 'GET',` probably can be dropped or be `method: 'GET', `value[0]` like to be `parseInt(value[0], 10)`. Sorry I am guessing here because of limited information — D. Seah, Nov 27 '20 at 07:58
@Quentin I just want to use the exact values of value[0], value[1], value[2] value[3] to X, Y, width and height. — Joskaa, Nov 27 '20 at 07:59
@Quentin I tried to make the minimal code, but Its very difficult to do it for my code, Can you help me without it. — Joskaa, Nov 27 '20 at 08:30
@Joskaa — No. We can't see how you are trying to use the values. The problem is almost certainly in code you haven't shown us. — Quentin, Nov 27 '20 at 09:11

score -1 · Answer 1 · answered Nov 27 '20 at 07:26

-1

The easy way I guess, is just to create a let data = null, above ajax, then in success: assign the value. for the instance:

 let neededData;

 $.ajax({
   type:'GET',
   url: 'getfile.php',

   data:{
     'file':file,

   },

   success: function(data){
 
     neededData = data.split(",");

   $('#img01').selectAreas({
     onChanged: debugQtyAreas,
     maxAreas:1,
     areas: [
                            {
                                x: neededData[0],
                                y: neededData[1],
                                width: neededData[2],
                                height: neededData[3],
                            }
                        ],

       parent: $('#myModal'),

   });
  }
 })

answered Nov 27 '20 at 07:26

Ng Atom

95
7

2

[Probably won't work the way OP expects](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – VLAZ Nov 27 '20 at 07:27
Ok, then can you create a separate fn and put an arg to in, – Ng Atom Nov 27 '20 at 07:29
``` const yourFn = (splittedData) => { $('#img01').selectAreas({ onChanged: debugQtyAreas, maxAreas:1, areas: [ { x: neededData[0], y: neededData[1], width: neededData[2], ....... }); } Where splittedData is data from success. ``` – Ng Atom Nov 27 '20 at 07:31

How to use variable outside my ajax success

1 Answers1