data coming back but not able to post in jquery ajax

Question

For the life of me I can not see why this is happening.

Basically I am using the following code to bring back table rows from the database.

var getCposInputs = {
            'type': 'viewcpos',
            'quoteid': '<?php echo $_GET['id']; ?>'
        };

        $.ajax({
            type: 'POST',
            url: '/Applications/Controllers/Quotes/ajax-add-sin.php',
            data: getCposInputs,
            dataType: 'html',
            encode: true
        }).done(function(data){

            //$('body').html(data);
            buildcotable += data;

        });

So as you can see there is commented out line that when removed shows the details straight into the body instead of the variable which is later sent out using the .html() function within JavaScript.

So the full jQuery code is:

var buildcotable = '';
    var buildtrs = $('#formentry15').val();
    var coArray = '';
    var coArrayNumber = 1;

    buildcotable += '<div class="table-responsive">';
    buildcotable += '<table class="table table-bordered">';

    buildcotable += '<thead>';
    buildcotable += '<th class="text-center">Number</th>';
    buildcotable += '<th class="text-center">Price</th>';
    buildcotable += '<th class="text-center">Installments</th>';
    buildcotable += '<th class="text-center">Contact Initials</th>';
    buildcotable += '<th class="text-center">Options</th>';
    buildcotable += '</thead>';

    buildcotable += '<tbody id="jquerypotable">';

    //lets do a check and see how many are listed
    if(buildtrs != 'TBC'){

        var getCposInputs = {
            'type': 'viewcpos',
            'quoteid': '<?php echo $_GET['id']; ?>'
        };

        $.ajax({
            type: 'POST',
            url: '/Applications/Controllers/Quotes/ajax-add-sin.php',
            data: getCposInputs,
            dataType: 'html',
            encode: true
        }).done(function(data){

            $('body').html(data);
            buildcotable += data;

        });

    } else {

        buildcotable += '<tr id="jqueryporow1">';
        buildcotable += '<td><input type="hidden" value="No" id="jqueryponumber1" class="form-control">No CPO\'s have been submitted</td>';
        buildcotable += '<td><input type="hidden" value="" id="jquerypovalue1" class="form-control"></td>';
        buildcotable += '<td class="text-center"><input type="hidden" value="" id="jquerypoinstallments1" class="form-control"></td>';
        buildcotable += '<td><input type="hidden" value="" id="jquerypocontactinitials1" class="form-control"></td>';
        buildcotable += '<td class="text-center">&nbsp;</td>';
        buildcotable += '</tr>';

    }

    buildcotable += '</tbody>';

    buildcotable += '</table>';
    buildcotable += '<p><a href="#" class="btn btn-default btn-block" id="addnewpo">Add New CPO Number</a></p>';
    buildcotable += '<p><a href="#" class="btn btn-danger btn-block" id="ubldonepo">Done</a></p>';
    buildcotable += '</div>';

    $('.ubl-section-7').html(buildcotable);

I know that the data is coming back fine, because when I remove the comment for $('body').html(data); then it shows the information.

But if trying to put it into a variable it simply does nothing.

Any ideas on why this is happening?

Thanks

Answer 1

You have to make sure that the output is generated after the ajax request retrieved its data. Else your last line of code is run even before the buildcotable += data; has been executed, because the ajax request isn't ready yet (it's asynchronous). Try something like this:

var buildcotable_beg = '<table><tr> ...';
var buildcotable_cnt = '';
var buildcotable_end = '...</table>';
var full_bld_tbl = '';

if (buildtrs != 'TBC') {
    $.ajax(...).done(function(buildcotable_cnt) {
        full_bld_tbl = buildcotable_beg + buildcotable_cnt + buildcotable_end;
        $('.ubl-section-7').html(full_bld_tbl);
    });
} else {
   buildcotable_cnt = '<tr>...</tr>';

   full_bld_tbl = buildcotable_beg + buildcotable_cnt + buildcotable_end;
   $('.ubl-section-7').html(full_bld_tbl);
}