Question

I am having a problem with a block of my code, this section creates boxes of chocolates based on what a user chooses in a previous step and what data is pulled from the database in the api script.
the problem is that it doesn’t work without the alert(‘hi’) in it. if i take that out it will just create an empty box without dropping the flavors in it, the flavor the flavors are inserted with the createFlavorArray function.

var product = new Array();
var price = new Array();
var size = new Array();

$(function () {
      $.ajax({
        type: 'POST',
        url: 'phpscripts/api.php',      
        data: "",
        dataType: 'json',    
          success: function(rows)        
        {
        count = 0;
          for (var i in rows)
          {
            var row = rows[i];          
              product[count] = row[0];
              price[count] = row[1];
              size[count] = row[2];
              count++;
          }
        } 
      });
    });

//b = box
//o = option that is inside the box
//nextBoxId is the box id
//nextFlavorId is the option or flavor id

var nextBoxId = 1;
var nextFlavorId = 1;
var orderCap = 0;
var subTotal = 0;
var numOfChocolates = 0;
var numOfBoxes = 0;

$(document).ready(function(){

    while (halfPoundBoxes > 0) {
            $("#boxes").append('<div id="b'+nextBoxId+'"></div>');
            $('#b'+nextBoxId).addClass('div-table-selection');
            $('#b'+nextBoxId).append($('#minusBox').clone().attr('id', "m"+nextBoxId));
            $('#b'+nextBoxId).append('<div style="display:table-row"></div>');

            //call the function to loop through and create the number of flavor options needed
            var x = 0;
            alert('hi');
            while(x < product.length){
                if ('1/2lb Box' == product[x]) {
                    createFlavorArray(size[x], nextBoxId);
                    subTotal += price[x] * 1;
                    $('#b'+nextBoxId).attr('title', product[x]);
                }
                x++;

            }
            //clone the delete box button and make it visible

            $('#m'+nextBoxId).show(500);
            $('#b'+nextBoxId).append("<br />");

            if (orderCap == 0) {
            $('#boxes').append('<div id="msg"><p>If you wish to add another box to your order select the size and click +1 Box.</p></div>');
            }

            $("#m"+nextBoxId).click(function() {
                    $(this).parent().remove();
                orderCap--;
                //if they're ordering zero boxes hide the order button
                //remove total price
                //remove the message
                if (orderCap == 0)
                {
                    document.getElementById('orderBtn').style.display = "none";
                    $("#msg").remove();
                    $("#totalPrice").empty();
                }
                if (orderCap < 10)
                {
                    $("#cap").remove();
                    $("#addBox").show(500);
                }
                var y = 0;
                while (y < product.length) {
                    if ('1/2lb Box' == product[y]) {
                    subTotal -= price[y] * 1;
                    numOfChocolates -= size[y] * 1;
                    }
                    y++;
                }
                $('#totalPrice').html("<p>Sub Total: " + subTotal + "</p>")
                //subtract the new
                $('#finalpaypal').val(subTotal);

            });
            nextBoxId++;
            orderCap++;
            numOfBoxes++;
            $('#totalPrice').html("<p>Sub Total: " + subTotal + "</p>")
            halfPoundBoxes--;   
    }

Answer 1

You need to put the code in a function and run it after the ajax success is finished

...
$(function () {
  $.ajax({
    type: 'POST',
    url: 'phpscripts/api.php',      
    data: "",
    dataType: 'json',    
      success: function(rows)        
    {
    count = 0;
      for (var i in rows)
      {
        var row = rows[i];          
          product[count] = row[0];
          price[count] = row[1];
          size[count] = row[2];
          count++;
      }
      do_after_ajax();
    } 
  });
});

function do_after_ajax(){
        while (halfPoundBoxes > 0) {
        $("#boxes").append('<div id="b'+nextBoxId+'"></div>');
        $('#b'+nextBoxId).addClass('div-table-selection');
        ....
}