Question

I only have one function in my scripts page, and it is giving me this error: Uncaught TypeError: Illegal invocation. To be honest, I’ve never seen this error before, and none of the other cases that I found online seemed to apply to me. My jquery is below, and I don’t think any other pieces are necessary, but let me know and I can post other parts.

$(document).ready(function () {
    /*----UPDATE BOX REQUEST----*/
    $(".boxesChange").live("click", function () {
        entry = $(this).closest("tr");
        delivered = $(entry).find("#delivered");
        if ((delivered).is(":checked")) {
            deliveredBoolean = "1";
        } else {
            deliveredBoolean = "0";
        }
        boxesDelivered = $(entry).find("#boxesDelivered").val();
        bubbleWrapDelivered = $(entry).find("#bubbleWrapDelivered").val();
        supplyRequestId = $(entry).find(".boxesSupplyRequestId").val();

        $.post('boxesChange.php', {
            'delivered': delivered,
            'boxesDelivered': boxesDelivered,
            'bubbleWrapDelivered': bubbleWrapDelivered,
            'supplyRequestId': supplyRequestId
        }, function (response) {
            $(this).closest(".boxesScheduleEntry").css("background-color", "#ccffcc");
        });
        return false;
    });
});

Answer 1

The problem is in your $.post call. You’re trying to set 'delivered' to delivered, which is a jQuery object, I assume you meant deliveredBoolean.

Also, in the callback function this is not what you think it is, it’s the jqXHR object, not the element.

var $this = $(this);
$.post(
        'boxesChange.php', 
        {
            'delivered': deliveredBoolean,
            'boxesDelivered': boxesDelivered,
            'bubbleWrapDelivered': bubbleWrapDelivered,
            'supplyRequestId': supplyRequestId
        },
        function (response) {
            $this.closest(".boxesScheduleEntry").css("background-color", "#ccffcc");
        }
);