0

I'm trying to add background colors on the admin orders grid based on the order status in a Magento 1.9 install. I have colors coming fine on page load, but when the grid is reloaded with ajax if any filtering/sorting is done, I loose the background colors because the JS function that I'm using isn't executed again.

I thought I have found a fix with using:

Ajax.Responders.register({
    onComplete: function(transport) {
        $.each(theTable, function (index, row) {
            var sourceRow = $(row).children()[pos].innerHTML.toLowerCase().trim();

            switch (sourceRow) {
                case 'backordered':
                    alert('hello');
                    $(row).css("background", "rgba(250, 54, 54, .5)");
                    break;

            }
        });
    },
});

When I run this code, the alert function will pop up before the ajax request is complete. So the grid elements haven't been built on the page when my code is executed and the background color is not applied.

This doesn't make a lot of sense to me, as you would think that onComplete would hit when the request is complete.

I have tried making the .css call on page elements that are already on the page (anything that isn't coming in on the ajax request) and it works fine to change the color. So I know that things like jQuery not being there or the incorrect use of the .css is not that issue.

Also, when I place an alert in the onSuccess object of the Ajax.Responders.register, it never hits.

Ajax.Responders.register({
    onSuccess: function(transport) {
        alert('hello success');
    }
});

Any ideas on what might be failing here?

1

onSuccess is not available for Ajax.Responders http://api.prototypejs.org/ajax/Ajax/Responders/

You need to use onComplete and add some extra checks for url and response status

Your code can looks like:

Ajax.Responders.register({
    onComplete: function(transport) {
        if (!transport.url.include('/sales_order/grid') || transport.getStatus() !== 200) {
            return;
        }

        $.each(theTable, function (index, row) {
            var sourceRow = $(row).children()[pos].innerHTML.toLowerCase().trim();

            switch (sourceRow) {
                case 'backordered':
                    alert('hello');
                    $(row).css("background", "rgba(250, 54, 54, .5)");
                    break;

            }
        });
    },
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.