Pass ajax data to another function

Question

I want to apply the getStatus function right here:

function getStatus(id)
{
    $.ajax({
        method: "POST",
        url: '<?php echo base_url('marketplace/get_store_status'); ?>/'+id,
        dataType: 'json',
        success: function(data){
            return data.status;
        }
    });
}

Into this function right here:

$('#store-status').click(function() {
    var id = getStatus(<?php echo $vendor->store_id; ?>);
    if (id == 1) {
    $('#btn-status')
        .removeClass('btn-danger')
        .addClass('btn-primary')
        .text('Activate');
    } else {
        $('#btn-status')
        .removeClass('btn-primary')
        .addClass('btn-danger')
        .text('Deactivate');
    }
    console.log(id);
    $('#modal-status').modal('show');
});

But when i log the id variable in the element click function into the console, it shows undefined.

But when i log the success data from the getStatus function itself, it shows the correct data. What am I doing wrong in my code?

The getStatus in Ajax stands for asynchronous. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example, $.ajax returns immediately and the next statement, return result;, is executed before the function you passed as success callback was even called. **Possible solutions** There are basically two ways how to solve this: Make the AJAX call synchronous (lets call it SJAX). Restructure your code to work properly with callbacks. — user3790694, Dec 16 '16 at 09:11
@EdwardBlack the value returned from `store_id; ?>` is a number — padejar, Dec 17 '16 at 01:17
@EdwardBlack yes it did, otherwise there would be a PHP error on my page, and my javascript codes wouldn't parse correctly because it returned with error. — padejar, Dec 19 '16 at 01:15
@padejar where exactly do you check if `id` does even contain a value? I see no checks at all in your code, so how can you be sure that no empty value is returned? — Black, Dec 19 '16 at 07:23

score 2 · Accepted Answer · answered Dec 16 '16 at 09:03

2

The Ajax call is asynchronous. You need to pass a callback instead.

You could make it synchronous too, but that delays your page and can cause issues if the call takes longer

function getStatus(id, callback)
{
    $.ajax({
        method: "POST",
        url: '<?php echo base_url('marketplace/get_store_status'); ?>/'+id,
        dataType: 'json',
        success: function(data){
            callback && callback(data.status);
        }
    });
}


$('#store-status').click(function() {
    var id = getStatus(<?php echo $vendor->store_id; ?>, function(id), {
   // the code here
});

});

answered Dec 16 '16 at 09:03

Rene Pot

24,681
7
68
92

What is the && doing? Why is it needed? – Black Dec 16 '16 at 09:35
1

it is an if statement. `callback &&` checks if callback exists, and if so, do `callback(data.status)`. If not, ignore it. It prevents calling functions that don't exists and causing errors. It is a sanity check ;) – Rene Pot Dec 16 '16 at 09:52
Nice, good to know :) – Black Dec 16 '16 at 10:12
Thanks will try it right now. – padejar Dec 17 '16 at 01:17

Black · Answer 2 · 2016-12-16T09:34:21.113

0

The problem is that your code after var id = getStatus(<?php echo $vendor->store_id; ?>); runs without waiting for a response, because you make an asynchronous call. One solution is to set async to false to make the call synchronous, which is not recommended though.

$.ajax({
    method: "POST",
    async: false,
    url: '<?php echo base_url('marketplace/get_store_status'); ?>/'+id,
    dataType: 'json',
    success: function(data){
        return data.status;
    }
});

Another better solution would be to use a callback function.

edited Dec 16 '16 at 09:34

answered Dec 16 '16 at 09:03

Black

18,150
39
158
271

yep much better than other one cause the existing code wont need to be restructured. – Beginner Dec 16 '16 at 09:07
No actually it is up to 20 times slower this way, always use callback functions like @Rene Pot showed in his answer. But it is a alternative. – Black Dec 16 '16 at 09:08
Out of the ~5 different solutions to this problem, `async: false` is the easiest and worst possible way. **This will freeze the tab until the HTTP call returns, which could take a few seconds** – Madara's Ghost Dec 16 '16 at 09:10
But it is a working solution, so no need to downvote. – Black Dec 16 '16 at 09:11

Pass ajax data to another function

2 Answers2