Javascript CSS to load after another JS is done

Question

I have this Javascript that turns the color of a td table into a specific color according to the value inside it :

$(document).ready(function () {
        $('#headerTbl td').each(function () {
            if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
                $(this).css('background-color', '#F15854');
            }
            else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
                $(this).css('background-color', '#DECF3F');
            }
            else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
                $(this).css('background-color', '#5DA5DA');
            }
        })
       });

I am also using a push javascript to load those td's in a table:

 function getData() {

        var $tblpercent = $('#headerTbl');
        $.ajax({
            url: '../api/data',
            type: 'GET',
            datatype: 'json',
            success: function (data) {

                if (data.length > 0) {
                    $tbl.empty();

                    var rows2 = [];


                    for (var i = 0; i < data.length; i++) {
                        rows2.push('<td>' + data[i].percentage + '</td>');
                    }
                    $tblpercent.append(rows2.join(''));
                }
            }
        });
    };

How do you make the javascript css work for the appended tds?

@RohanVeer - no, wont make a difference and is a bad practice to run synchronous XMLHttpRequests on the main thread — Jaromanda X
– Jaromanda X, Commented Jan 12, 2017 at 6:57

T.J. Crowder · Accepted Answer · 2017-01-12 06:55:35Z

2

You run it again. First, isolate it into its own function:

function setBackgroundsOnCells() {
    $('#headerTbl td').each(function() {
        if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
            $(this).css('background-color', '#F15854');
        }
        else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
            $(this).css('background-color', '#DECF3F');
        }
        else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
            $(this).css('background-color', '#5DA5DA');
        }
    })
}

Then call that both from the ready handler and the ajax completion handler.

Side note: I would recommend not putting your background colors in the JavaScript code. Instead, ideally, put a class on the td elements when you're generating them that indicates what color they should be. If you can't do that for some reason, then adjust the code above to add the class based on content. Then at least the colors are in the CSS rather than the code.

answered Jan 12, 2017 at 6:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

MVCNoob Over a year ago

Thank you very much for your answer :D. oh and the background colors are just for experiment, thank you for the recommendation though.

MGA · Accepted Answer · 2017-01-12 06:57:48Z

you calling your css editing code in document.ready which is the first things gets executed and till that time td doesn't even exists.

you need to get the data first and create the table structure first before start editing the same.

do this way.

function getData() {

    var $tblpercent = $('#headerTbl');
    $.ajax({
        url: '../api/data',
        type: 'GET',
        datatype: 'json',
        success: function (data) {

            if (data.length > 0) {
                $tbl.empty();
                var rows2 = [];
                for (var i = 0; i < data.length; i++) {
                    rows2.push('<td>' + data[i].percentage + '</td>');
                }

                $tblpercent.append(rows2.join(''));
            }

            $('#headerTbl td').each(function () {
                if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
                    $(this).css('background-color', '#F15854');
                }
                else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
                    $(this).css('background-color', '#DECF3F');
                }
                else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
                    $(this).css('background-color', '#5DA5DA');
                }
            })
        }
    });
};

Collectives™ on Stack Overflow

Javascript CSS to load after another JS is done

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related