CODEWITHSUNDEEP
javascriptjquery
Jeff
Jeff

Reputation: 21

My javascript doesn't run without alert

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--;   
    }

Upvotes: 0

Views: 1362

Answers (3)

cuzzea
cuzzea

Reputation: 1535

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');
        ....
}

Upvotes: 0

Curtis
Curtis

Reputation: 103348

The reason your code is working only when using an alert(), is that the alert() action is giving your jQuery AJAX request a few seconds to return a value to your success() call back function.

You should move any code which is affected by your callout function, into the callout function also, so that this code runs in the correct order.

Alternatively you could not run your AJAX request asynchronosly by adding async:false, but as @Rocket has commented, this isn't recommended.

$.ajax({
  async: false,

Upvotes: 4

sgrif
sgrif

Reputation: 3822

It looks like you're trying to operate on markup returned by your ajax. That code needs to be moved into the success callback of the ajax request. The reason the alert call makes it work is simply that it delays everything else long enough for the page to finish loading.

Upvotes: 0

Related Questions