javascript - Jquery/Javascript adding unique classes to a div

Question

I am having an issue with a javascript generated table, which displays fine on the page, The div at the end (bottom_box) needs to have a custom class based on its html content. The code is below:

            <script type="text/javascript">
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET", "servicereport2.xml", false);
            xmlhttp.send();
            xmlDoc = xmlhttp.responseXML;

            if (xmlDoc) {
                var x = xmlDoc.getElementsByTagName("ISSUE");
                for (i = 0; i < x.length; i++) {
                    document.write("<div class='box_lrg'><div class='box_top'></div><div class='box_middle'><table border='0'>");
                    document.write("<tr><td class='title'><h2>");
                    document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
                    document.write("</h2></td><td class='issueid'><strong>IssueID: </strong><br />");
                    document.write(x[i].getElementsByTagName("ISSUEID")[0].childNodes[0].nodeValue);
                    document.write("</td><td class='status'><strong>Status: </strong><br />");
                    document.write(x[i].getElementsByTagName("STATUSID")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("<tr><td colspan=3 class='description'>");
                    document.write(x[i].getElementsByTagName("TICKETDESCRIPTION")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("<tr><td></td><td class='updated'><strong>Last Updated: </strong><br />");
                    document.write(x[i].getElementsByTagName("UPDATEDON")[0].childNodes[0].nodeValue);
                    document.write("</td><td class='author'><strong>Author: </strong><br />");
                    document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("</table>");
                    document.write("</div><div class='box_bottom'>");
                    document.write(x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);
                    document.write("</div></div>");


                    category = $('.box_bottom').html();
                     if (category == 'Notifications') {
                       $(".box_bottom").addClass("notifications");
                     }
                     category = $('.box_bottom').html();
                     if (category == 'VO')
                     {
                       $(".box_bottom").addClass("VO");
                     }



                }
            }
            else {
                document.write("<h3><span class='blue'>There are no issues at the moment.</span></h3>");
            }

As you can see the JQuery is included in the loop, but is just applying the same class to all the bottom_box divs - they are all the first occurrence of the CATEGORY XML tag . EG if the first "category" is VO and the second is "notifications" then they are all being applied VO.

Any help is welcome.

score 1 · Accepted Answer

why don't you try like this:

....
if (xmlDoc) {
    var x = xmlDoc.getElementsByTagName("ISSUE");
    for (i = 0; i < x.length; i++) {
        ....
        document.write("</td></tr>");
        document.write("</table>");

        //store the category value in a var
        var category = x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);
        var addClass;

        //check category value and set the class name to add to the div
        if(category == "Notifications")
            addClass = "notifications";
        else if(category == "VO")
            addClass = "VO";

        //add the class to the div
        document.write("</div><div class='box_bottom "+addClass+"'>");
        document.write(category);
        document.write("</div></div>");
        ...

as soon as you handle the category content, instead of adding directly it into the document, first have a look on what it contains, and then apply the desired class to the div.

Hope it helps, in case let me know

score 0 · Accepted Answer

The jquery line $('.box_bottom') will select all elements currently in the dom with the class box_bottom when it is run. If you want to select specific boxes, you can create those boxes with jquery as well and hold a reference specifically to that one box when you need it instead of using document.write.

var boxBottom = $('<div class="box_bottom"></div>');
boxBottom.html(x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);

category = boxBottom.html();
if (category == 'Notifications') {
    boxBottom.addClass("notifications");
}
if (category == 'VO') {
    boxBottom.addClass("VO");
}

score 0 · Accepted Answer

Ignoring the bugs in the xml handler and usage of raw httpXMLrequest with jQuery, you need to iterate through each box_bottom and set its class

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "servicereport2.xml", false);

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var xmlDoc = xmlhttp.responseXML;

        if (xmlDoc) {
            var x = xmlDoc.getElementsByTagName("ISSUE");
            for (i = 0; i < x.length; i++) {
                document
                        .write("<div class='box_lrg'><div class='box_top'></div><div class='box_middle'><table border='0'>");
                document.write("<tr><td class='title'><h2>");
                document
                        .write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
                document
                        .write("</h2></td><td class='issueid'><strong>IssueID: </strong><br />");
                document
                        .write(x[i].getElementsByTagName("ISSUEID")[0].childNodes[0].nodeValue);
                document
                        .write("</td><td class='status'><strong>Status: </strong><br />");
                document
                        .write(x[i].getElementsByTagName("STATUSID")[0].childNodes[0].nodeValue);
                document.write("</td></tr>");
                document.write("<tr><td colspan=3 class='description'>");
                document
                        .write(x[i].getElementsByTagName("TICKETDESCRIPTION")[0].childNodes[0].nodeValue);
                document.write("</td></tr>");
                document
                        .write("<tr><td></td><td class='updated'><strong>Last Updated: </strong><br />");
                document
                        .write(x[i].getElementsByTagName("UPDATEDON")[0].childNodes[0].nodeValue);
                document
                        .write("</td><td class='author'><strong>Author: </strong><br />");
                document
                        .write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
                document.write("</td></tr>");
                document.write("</table>");
                document.write("</div><div class='box_bottom'>");
                document
                        .write(x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);
                document.write("</div></div>");

                category = $('.box_bottom').html();
                if (category == 'Notifications') {
                    $(".box_bottom").addClass("notifications");
                }
                category = $('.box_bottom').html();
                if (category == 'VO') {
                    $(".box_bottom").addClass("VO");
                }

            }
        } else {
            document
                    .write("<h3><span class='blue'>There are no issues at the moment.</span></h3>");
        }
        $('.box_bottom').each(function() {
                    var $this = $(this), category = $this.html();
                    if (category == 'Notifications') {
                        $this.addClass("notifications");
                    } else if (category == 'VO')
                        $this.addClass("VO");
                });
    }
}

xmlhttp.send();

score 0 · Accepted Answer

It doesn't work because you're doing it wrong. One (the best ?) solution would be to use the jQuery element creation and append() function, which will generate an actual dom element you can use in your loop to set its class.

Cause when you're doing this :

$(".box_bottom").addClass("notifications")

You're adding the class to all elements having a class .box_bottom , which at the end of your for loop is actually all your bottom boxes...

javascript - Jquery/Javascript adding unique classes to a div

4 回答 4

Related

Reference