javascriptjqueryjquery-append

Appending html scripts containing class name, to a div tag, had no effect (no noticable css rendering)

I'm using JSON data to loop through a list to build the HTML's LI rows. The problem is when using JQuery appending, the class name had no noticable effect on the web browser. (It is as if the class name doesn't exists).

Monthly Plan #6 have no background color, meaning the classname wasn't used or appended correctly.

What seems to be the problem here?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
    li
    {
        margin: 0px 0px 0px 0px;
        border-top: solid 1px #000000;
        border-left: solid 1px #000000;
        border-right: solid 1px #000000;
        padding: 0px 0px 0px 0px;
        list-style: none;
    }
    ul 
    {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        border: solid 0px #000000;
        list-style: none;
    }
    ul li.liFirstChild
    {
        border-bottom: solid 0px #000000;
        -webkit-border-top-left-radius: 14px 14px;
        -webkit-border-top-right-radius: 14px 14px;
        -webkit-border-bottom-left-radius: 0px 0px;
        -webkit-border-bottom-right-radius: 0px 0px;
        -moz-border-radius-topleft: 14px;
        -moz-border-radius-topright: 14px; 
        -moz-border-radius-bottomleft: 0px;
        -moz-border-radius-bottomright: 0px; 
        border-radius: 14px 14px 0px 0px;
    }
    ul li:last-child, ul li.liLastChildTrue
    {
        border-bottom: solid 1px #000000;
        -webkit-border-bottom-left-radius: 14px 14px;
        -webkit-border-bottom-right-radius: 14px 14px;
        -moz-border-radius-bottomleft: 14px;
        -moz-border-radius-bottomright: 14px; 
        border-radius: 0px 0px 14px 14px;
        background-color: #ff0000;
    }
    ul li.liLastChildFalse
    {
        -webkit-border-bottom-left-radius: 0px 0px;
        -webkit-border-bottom-right-radius: 0px 0px;
        -moz-border-radius-bottomleft: 0px;
        -moz-border-radius-bottomright: 0px; 
        border-radius: 0px 0px 0px 0px;
        border-bottom: solid 0px #ffffff;
        background-color: #ff00ff;
    }
</style>
<script type="text/javascript" src="/Member/Scripts/jquery-v2.0.3/jquery-v2.0.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var _dataHtmlRow = { "Booklet": [{ "Id": "0", "Schedule": "12 Payments", "Year": "1", "PaymentAmount": "$2.00" }, { "Id": "1", "Schedule": "18 Payments", "Year": "1.5", "PaymentAmount": "$4.00" }, { "Id": "2", "Schedule": "24 Payments", "Year": "2", "PaymentAmount": "$6.00" }, { "Id": "3", "Schedule": "30 Payments", "Year": "2.5", "PaymentAmount": "$8.00" }, { "Id": "4", "Schedule": "36 Payments", "Year": "3", "PaymentAmount": "$10.00" }, { "Id": "5", "Schedule": "42 Payments", "Year": "3.5", "PaymentAmount": "$12.00" }] };

        //Calculate Quick Quote - Button...
        $('#buttonCalculateQuickQuote').on('click', function (e) {
            var htmlRow = "";
            var $divGridViewer = $('#divGridViewer');

            $divGridViewer.empty();

            $divGridViewer.append("<ul>");

            $.each(_dataHtmlRow.Booklet, function (i, o) {
                htmlRow = "";

                htmlRow += "<li " + (i == 0 ? "class='liFirstChild'" : "") + " style='background-color:#FFA94C;'>";
                htmlRow += " <div style='float:left;'>Monthly Plan #" + (i + 1).toString() + "</div>";
                htmlRow += " <div style='clear:both;'></div>";
                htmlRow += "</li>";
                htmlRow += "<li>";
                htmlRow += " <div style='float:left;'>Schedule: </div>";
                htmlRow += " <div style='float:right;'>" + o.Schedule + "</div>";
                htmlRow += " <div style='clear:both;'></div>";
                htmlRow += "</li>";
                htmlRow += "<li>";
                htmlRow += " <div style='float:left;'>Year: </div>";
                htmlRow += " <div style='float:right;'>" + o.Year + "</div>";
                htmlRow += " <div style='clear:both;'></div>";
                htmlRow += "</li>";
                htmlRow += "<li class='" + (i == (_dataHtmlRow.Booklet.length - 1) ? "liLastChildTrue" : "liLastChildFalse") + "'>";
                htmlRow += " <div style='float:left;'>Payment Amt: </div>";
                htmlRow += " <div style='float:right;'>" + o.PaymentAmount + "</div>";
                htmlRow += " <div style='clear:both;'></div>";
                htmlRow += "</li>";

                $divGridViewer.append(htmlRow);
            });

            $divGridViewer.append("</ul>");

            return false;
        });
    });
</script>
</head>
<body>

<div style="padding:25px;">
    <div style="padding-bottom:20px;">
        <input type="button" id="buttonCalculateQuickQuote" value="Calculate Quick Quote" style="" />
    </div>
    <div>
        <div id="divGridViewer">
        </div>
    </div>
</div>

</body>
</html>
Solution

  • The issue is you are confusing the purpose of append(). If you inspect the elements using your browser dev tools, you will see the html looks something like this:

    <div id="divGridViewer">
    <ul></ul>
    <li class="liFirstChild" style="background-color:#FFA94C;">...</li>
    <li>...</li>
</div>

    Notice that the <li>s come after the <ul></ul>, which is empty. This is because $divGridViewer.append("<ul>"); will not just add "<ul>" as a string, but create an element and add it to the <div>. The next time you append something, this will be added to the end after the <ul>.

    A simple fix for this is to create the <ul/> as a variable, add the <li>s to that and then append it to divGridViewer:

    // create ul
var ul = $("<ul/>");

$.each(_dataHtmlRow.Booklet, function (i, o) {
    htmlRow = "";

    htmlRow += "<li " + (i == 0 ? "class='liFirstChild'" : "") + " style='background-color:#FFA94C;'>";
    ...
    htmlRow += "</li>";

    // add the row to the ul instead
    ul.append(htmlRow);
});

// add ul to the container
$divGridViewer.append(ul);

    The other problem is that you are setting an inline style for the Monthly Plan headings. This means that when you add the class, the background color is ignored because the inline style overrides it. You could force the CSS color using background-color: #ffff00 !important; but this isn't recommended.

    Instead you should either give it another class with the orange background (I would probably go with this):

    ul li.monthly {
    background-color:#FFA94C;
}

    Or another option is to use some CSS to apply it to every 4th item, except the last:

    ul li:nth-child(4n):not(:last-child) {
    background-color:#FFA94C;
}

    Here is the full page with these changes

    $(document).ready(function () {
    var _dataHtmlRow = { "Booklet": [{ "Id": "0", "Schedule": "12 Payments", "Year": "1", "PaymentAmount": "$2.00" }, { "Id": "1", "Schedule": "18 Payments", "Year": "1.5", "PaymentAmount": "$4.00" }, { "Id": "2", "Schedule": "24 Payments", "Year": "2", "PaymentAmount": "$6.00" }, { "Id": "3", "Schedule": "30 Payments", "Year": "2.5", "PaymentAmount": "$8.00" }, { "Id": "4", "Schedule": "36 Payments", "Year": "3", "PaymentAmount": "$10.00" }, { "Id": "5", "Schedule": "42 Payments", "Year": "3.5", "PaymentAmount": "$12.00" }] };
    
    //Calculate Quick Quote - Button...
    $('#buttonCalculateQuickQuote').on('click', function (e) {
        var htmlRow = "";
        var $divGridViewer = $('#divGridViewer');
        
        $divGridViewer.empty();
        
        var ul = $("<ul/>");
        
        $.each(_dataHtmlRow.Booklet, function (i, o) {
            htmlRow = "";
            
            htmlRow += "<li class='monthly" + (i == 0 ? " liFirstChild" : "") + "'>";
            htmlRow += " <div style='float:left;'>Monthly Plan #" + (i + 1).toString() + "</div>";
            htmlRow += " <div style='clear:both;'></div>";
            htmlRow += "</li>";
            htmlRow += "<li>";
            htmlRow += " <div style='float:left;'>Schedule: </div>";
            htmlRow += " <div style='float:right;'>" + o.Schedule + "</div>";
            htmlRow += " <div style='clear:both;'></div>";
            htmlRow += "</li>";
            htmlRow += "<li>";
            htmlRow += " <div style='float:left;'>Year: </div>";
            htmlRow += " <div style='float:right;'>" + o.Year + "</div>";
            htmlRow += " <div style='clear:both;'></div>";
            htmlRow += "</li>";
            htmlRow += "<li class='" + (i == (_dataHtmlRow.Booklet.length - 1) ? "liLastChildTrue" : "liLastChildFalse") + "'>";
            htmlRow += " <div style='float:left;'>Payment Amt: </div>";
            htmlRow += " <div style='float:right;'>" + o.PaymentAmount + "</div>";
            htmlRow += " <div style='clear:both;'></div>";
            htmlRow += "</li>";
            
            ul.append(htmlRow);
        });
        
        $divGridViewer.append(ul);
        
        return false;
    });
});
    li
{
    margin: 0px 0px 0px 0px;
    border-top: solid 1px #000000;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
ul 
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: solid 0px #000000;
    list-style: none;
}
ul li.liFirstChild
{
    border-bottom: solid 0px #000000;
    -webkit-border-top-left-radius: 14px 14px;
    -webkit-border-top-right-radius: 14px 14px;
    -webkit-border-bottom-left-radius: 0px 0px;
    -webkit-border-bottom-right-radius: 0px 0px;
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px; 
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px; 
    border-radius: 14px 14px 0px 0px;
}
ul li:last-child, ul li.liLastChildTrue
{
    border-bottom: solid 1px #000000;
    -webkit-border-bottom-left-radius: 14px 14px;
    -webkit-border-bottom-right-radius: 14px 14px;
    -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px; 
    border-radius: 0px 0px 14px 14px;
    background-color: #ff0000;
}
ul li.liLastChildFalse
{
    -webkit-border-bottom-left-radius: 0px 0px;
    -webkit-border-bottom-right-radius: 0px 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px; 
    border-radius: 0px 0px 0px 0px;
    border-bottom: solid 0px #ffffff;
    background-color: #ff00ff;
}

ul li.monthly {
    background-color:#FFA94C;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="padding:25px;">
    <div style="padding-bottom:20px;">
        <input type="button" id="buttonCalculateQuickQuote" value="Calculate Quick Quote" style="" />
    </div>
    <div>
        <div id="divGridViewer">
        </div>
    </div>
</div>