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.

You can not use document.write like that! document.write("</table>"); does not do what you think it does! And you should never use document.write after the page has fully loaded. — epascarello
– epascarello, Commented May 24, 2013 at 12:31
What? Learn up on JavaScript templates, it will change your life. — AlbertEngelB
– AlbertEngelB, Commented May 24, 2013 at 12:49

BeNdErR · Accepted Answer · 2013-05-24 12:40:36Z

1

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

edited May 24, 2013 at 12:40

answered May 24, 2013 at 12:29

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

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

2 Comments

Oli Fletcher Over a year ago

This has worked - should have got this myself, I think I have been staring at my screen too long, none the less thank you very much for your help :)

BeNdErR Over a year ago

I'm glad I could help. anyway, take a break :D!

Nick Larsen · Accepted Answer · 2013-05-24 12:31:07Z

0

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");
}

answered May 24, 2013 at 12:31

Nick Larsen

18.9k6 gold badges70 silver badges97 bronze badges

Comments

Laurent S. · Accepted Answer · 2013-05-24 12:31:42Z

0

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...

answered May 24, 2013 at 12:31

Laurent S.

6,9373 gold badges32 silver badges42 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-05-24 12:36:46Z

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();

Collectives™ on Stack Overflow

Jquery/Javascript adding unique classes to a div

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related