jQuery complete a function after the first

Question

I have 2 selectbox multiple. after selecting options in the 2 selectboxes, i need to add rows with input to a table, and only AFTER the rows were added to the table, i need to run ajax queries to populate each input with relevant data. here's my code:

$("#items, #sites").change(function () {
    var itemsCount = $('#items option:selected').length;
    var sitesCount = $('#sites option:selected').length;
    if (sitesCount > 0 && itemsCount > 0){
        popTable(itemsCount, sitesCount);
        getZicouiData();
    }
});

function popTable(itemsCount, sitesCount){
    $('#cutbacks > tbody').empty();
    var row = '';
    $('#items option:selected').each(function(){
        var item_id = $(this).val();
        row +='<tr>';
        row += '<td rowspan="'+sitesCount+'">'+$(this).text()+'</td>';
        var site_i = 0;
        $('#sites option:selected').each(function(){
            var site_id = $(this).val();
            if(site_i != 0){
                row +='<tr>';
            }
            row += '<td>'+$(this).text()+'</td><td><input type="text" class="form-control waiting" data-site-id="'+site_id+'" data-item-id="'+item_id+'" value="מעדכן נתונים"/></td>';
            row += '</tr>';
            site_i ++
        });
    });
    $('#cutbacks > tbody').append(row);
}
function getZicouiData(){
    $('.waiting').each(function(){
        var item_id = $(this).attr('data-item-id');
        var site_id = $(this).attr('data-site-id');
        url = '{{url('/')}}/sales/item_by_sale/'+item_id+'/'+site_id;
        ordered_items = $.getData(url).total;
        $(this).val(ordered_items);
    });
}
jQuery.extend
(
    {
        getData: function(url)
        {
            var result = null;
            $.ajax(
                {
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    cache: false,
                    success: function(data)
                    {
                        result = data;
                    }
                }
            );
           return result;
        }
    }
);

and here my html:

<select id='items' class='items' multiple>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
</select>
<select id='sites' class='sites' multiple>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
</select>
<table id='cutbacks' class='table'>
    <tbody></tbody>
</table>

My problem is that my table is empty until both functions were finished.

What's wrong?

You approach is fine and code is good enough too. Here is the fiddle http://jsfiddle.net/DE2kv/ I have build using your code. I don't find any problem. — Praveen, May 10 '14 at 23:11
What does `$.getData()` do? Is it synchronous or asynchronous? — jfriend00, May 10 '14 at 23:16
@Praveen, i know it's working but the getData() takes time and everything return same time instead of first of all the table and then the inputs — mocheaz, May 11 '14 at 03:56
You need to read this: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call/14220323#14220323. Your `getData()` function isn't working. It isn't returning the result. — jfriend00, May 11 '14 at 04:04

score 0 · Answer 1 · answered May 11 '14 at 07:48

Thanks to @jfriend00 I've found the solution:

Here the fixed code:

function getZicouiData(){
    $('.waiting').each(function(){
        var item_id = $(this).attr('data-item-id');
        var site_id = $(this).attr('data-site-id');
        var $this = $(this);
        url = '{{url('/')}}/sales/item_by_sale/'+item_id+'/'+site_id;
        $.ajax(
            {
                url: url,
                type: 'get',
                dataType: 'json',
                // async: false,
                cache: false,
                success: function(data)
                {
                    $this.val(data.total);
                }
            }
        );
    });
}

My Error was because the ajax wasn't synchronous.

jQuery complete a function after the first

1 Answers1