jQuery code not updating web page

Question

I'm sure I'm overlooking something here... I have some jQuery code that fires off when a form button is pressed. The button is pressed, a coupon code is looked up and written in a div on the form and then the discount is applied (total = price - discount). Problem is, when I step thru Firebug to debug it, about 80% of the time the code works. However, when I run the code, it doesn't work. It's like the code runs too fast for the variables to get the correct information. Here's the code:

$('#coupon-submit').click(function() {
    applyCoupon($('#coupon'), $(this));

    var price = $('#price-total').text();
    price = price.substring(5,price.length);

    var theText = $('#fulldiscounttext').text();  // Sometimes this has a value while debugging, sometimes not
    var discount = theText.substring(1, theText.length-4); // Takes unwanted characters out of string

    var total = price - discount;

    $('#price-total').text('US $ ' + total.toFixed(2));
    var thetotal = $('#price-total').text();
    $('#grandtotal').val(thetotal);
});

applyCoupon() looks up the code and writes it into the div #fulldiscounttext. I'm trying to have the #price-total div update with the discounted amount. It's not updating (unless I'm debugging it).

The applyCoupon() function:

function applyCoupon(couponInput, couponButton)
{
    removeInputNames();
    $.ajax({
        data: $('#orderform').serialize(),
        type: 'POST',
        timeout: 5000,
        url: 'coupon.php',
        dataType: 'text',

        beforeSend: function(request)
        {
            $('#coupon-error').text('');
            couponButton.attr('disabled', 'disabled');

        },
        success: function(data, textStatus)
        {
            couponButton.removeAttr('disabled');

            if(data == "bad error code")
                couponOK = 0;
            else
                couponOK = 1;

            if (!couponOK)
            {
                var badcode = couponInput.val().toString();
                if (badcode.length > 0)
                {
                    var fmt = 'You\'ve entered an invalid code.';
                    $('#coupon-error').text(fmt);
                }
            }
            else    // Coupon recognized!
            {
                $('#total-row').before('<tr><td colspan="4">'
                    + '<div id="fulldiscounttext">' + data
                    + ' Off</div>'
                    + '</td></tr>');

                // New discount information; save and update totals
                $('#discount-storage').text(data);
                showPrice();
            }
        }
    });
}

Post the applyCoupon function - it's probably an async call... — tymeJV
– tymeJV, Commented Oct 20, 2014 at 19:01

tymeJV · Accepted Answer · 2014-10-20 19:06:50Z

1

Since applyCoupon is an async function the rest of your code will keep running while that requests processes. Use a callback to run code after the call has completed:

applyCoupon($('#coupon'), $(this), function() {
    var price = $('#price-total').text();
    price = price.substring(5,price.length);

    var theText = $('#fulldiscounttext').text();  // Sometimes this has a value while debugging, sometimes not
    var discount = theText.substring(1, theText.length-4); // Takes unwanted characters out of string

    var total = price - discount;

    $('#price-total').text('US $ ' + total.toFixed(2));
    var thetotal = $('#price-total').text();
    $('#grandtotal').val(thetotal);
});

And the applyCoupon function:

function applyCoupon(couponInput, couponButton, callback) {
    //AJAXy stuff
    success: function(data, textStatus)
    {
        couponButton.removeAttr('disabled');

        if(data == "bad error code")
            couponOK = 0;
        else
            couponOK = 1;

        if (!couponOK)
        {
            var badcode = couponInput.val().toString();
            if (badcode.length > 0)
            {
                var fmt = 'You\'ve entered an invalid code.';
                $('#coupon-error').text(fmt);
            }
        }
        else    // Coupon recognized!
        {
            $('#total-row').before('<tr><td colspan="4">'
                + '<div id="fulldiscounttext">' + data
                + ' Off</div>'
                + '</td></tr>');

            // New discount information; save and update totals
            $('#discount-storage').text(data);
            showPrice();
        }
        callback(); //ADDED CALLBACK TO RUN ONCE THE AJAX REQUEST IS COMPLETE
    }
}

answered Oct 20, 2014 at 19:06

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jen Mason Over a year ago

THANK YOU! Been fooling with this for days. Not sure why I didn't come here sooner. I know just enough jQuery to do a few things, but when it gets a bit more complicated, I'm lost. The async call explanation makes sense. Now I need to go learn more about callbacks. I appreciate your time. :)

Collectives™ on Stack Overflow

jQuery code not updating web page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related