Hi alli have one douts about my applicationhow can i use check box for the below every xml nodes using jqueryplease find my code below HTML ltdivgt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt function var xmlData readXml39lt ResolveUrl34XmlFilesXMLFilexml34 gt39 var sHTML draw

Here I have created sample that will help you outHTMLltdivgt ltstyle type34textcss34gt ul marginleft 0px liststyle none paddingleft 40px marginleft 20px padding 0 0 0 16px margin 0 li margin 0 padding 0px 0 5px ltstylegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt function var xmlData readXml39lt ResolveUrl34XmlFilesXMLFilexml34 gt39 var sHTML drawTreeFromXmlxmlData documentgetElementById34tree34innerHTML sHTML function drawTreeFromXmlxmlData var html 3434 var properties xmlDatagetElementsByTagName34proper

Check CheckBox based on XML file values using jQuery

stellusm...

SOLVED CLOSED ACTIVE ANSWERED
User: stellusmca
Posted: on Feb 12, 2016 06:06 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4336

Hi all,

i have one douts about my application,

how can i use check box for the below every xml nodes using jquery

please find my code below,

HTML:

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>');
            var sHTML = drawTreeFromXml(xmlData);
            document.getElementById("Tree").innerHTML = sHTML;
        });
 
        function drawTreeFromXml(xmlData) {
            var html = "";
            var properties = xmlData.getElementsByTagName("properties");
            html += ""
            $(properties).each(function () {
                var department = $(this);
                var CustomerID = $(department).find("CustomerID").text();
                html += "<ul><li><a href='javascript:;'>" + CustomerID + "</a></li><ul>";
                var CompanyName = $(department).find("CompanyName").text();
                html += "<li><a href='javascript:;'>" + CompanyName + "</a></li>";
                var ContactName = $(department).find("ContactName").text();
                html += "<li><a href='javascript:;'>" + ContactName + "</a></li>";
                var ContactTitle = $(department).find("ContactTitle").text();
                html += "<li><a href='javascript:;'>" + ContactTitle + "</a></li>";
                var Address = $(department).find("Address").text();
                html += "<li><a href='javascript:;'>" + Address + "</a></li>";
                var City = $(department).find("City").text();
                html += "<li><a href='javascript:;'>" + City + "</a></li>";
                var PostalCode = $(department).find("PostalCode").text();
                html += "<li><a href='javascript:;'>" + PostalCode + "</a></li>";
                var Country = $(department).find("Country").text();
                html += "<li><a href='javascript:;'>" + Country + "</a></li>";
                var Phone = $(department).find("Phone").text();
                html += "<li><a href='javascript:;'>" + Phone + "</a></li>";
                var Fax = $(department).find("Fax").text();
                html += "<li><a href='javascript:;'>" + Fax + "</a></li></ul></li></ul>";
            });
            return html;
        }
 
        function readXml(xmlFile) {
            var xmlDoc;
            if (typeof window.DOMParser != "undefined") {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", xmlFile, false);
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType('text/xml');
                }
                xmlhttp.send();
                xmlDoc = xmlhttp.responseXML;
            }
            else {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.load(xmlFile);
            }
            return xmlDoc;
        }      
    </script>
    <div id="Tree">
    </div>
</div>

XMLFILE.xml:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed>
  <entry>
    <content>
      <properties>
        <CustomerID>ALFKI</CustomerID>
        <CompanyName>Alfreds Futterkiste</CompanyName>
        <ContactName>Maria Anders</ContactName>
        <ContactTitle>Sales Representative</ContactTitle>
        <Address>Obere Str. 57</Address>
        <City>Berlin</City>
        <PostalCode>12209</PostalCode>
        <Country>Germany</Country>
        <Phone>030-0074321</Phone>
        <Fax>030-0076545</Fax>
      </properties>
    </content>
  </entry>
  <entry>
    <content>
      <properties>
        <CustomerID>ANATR</CustomerID>
        <CompanyName>Ana Trujillo Emparedados y helados</CompanyName>
        <ContactName>Ana Trujillo</ContactName>
        <ContactTitle>Owner</ContactTitle>
        <Address>Avda. de la Constitución 2222</Address>
        <City>México D.F.</City>
        <PostalCode>05021</PostalCode>
        <Country>Mexico</Country>
        <Phone>(5) 555-4729</Phone>
        <Fax>(5) 555-3745</Fax>
      </properties>
    </content>
  </entry>
</feed>

Shashika...

0 2

Reply
ANSWER
User: Shashikant
Replied: on Feb 12, 2016 08:00 AM
Report

Here I have created sample that will help you out.

HTML

<div>
    <style type="text/css">
        ul
        {
            margin-left: 0px;
            list-style: none;
            padding-left: 40px;
            margin-left: -20px;
            padding: 0 0 0 16px;
            margin: 0;
        }
        li
        {
            margin: 0;
            padding: 0px 0 5px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>');
            var sHTML = drawTreeFromXml(xmlData);
            document.getElementById("tree").innerHTML = sHTML;
        });

        function drawTreeFromXml(xmlData) {
            var html = "";
            var properties = xmlData.getElementsByTagName("properties");
            html += ""
            $(properties).each(function () {
                var department = $(this);
                var CustomerID = $(department).find("CustomerID").text();
                html += "<ul>";
                html += "<li><input type='checkbox'/><a href='javascript:;'>" + CustomerID + "</a>";
                html += "<ul>";
                var CompanyName = $(department).find("CompanyName").text();
                html += createElement(CompanyName);
                var ContactName = $(department).find("ContactName").text();
                html += createElement(ContactName);
                var ContactTitle = $(department).find("ContactTitle").text();
                html += createElement(ContactTitle);
                var Address = $(department).find("Address").text();
                html += createElement(Address);
                var City = $(department).find("City").text();
                html += createElement(City);
                var PostalCode = $(department).find("PostalCode").text();
                html += createElement(PostalCode);
                var Country = $(department).find("Country").text();
                html += createElement(Country);
                var Phone = $(department).find("Phone").text();
                html += createElement(Country);
                var Fax = $(department).find("Fax").text();
                html += createElement(Fax);
                html += "</ul></li></ul>";
            });
            return html;
        }

        function createElement(ElementValue) {
            return "<li><input type='checkbox'/><a href='javascript:;'>" + ElementValue + "</a></li>";
        }
        $("#tree input:checkbox").live('change', function () {
            if ($(this).nextAll('ul').length == 0) {
                if ($(this)[0].checked == false) {
                    $(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', false);
                } else {
                    if ($(this).closest('ul').parent().find('input:checkbox:checked').length == $(this).closest('ul').parent().find('input:checkbox').length - 1) {
                        $(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', true);
                    }
                }
            } else {
                if ($(this)[0].checked == true) {
                    $(this).nextAll('ul').find('input:checkbox').attr('checked', true);
                } else {
                    $(this).nextAll('ul').find('input:checkbox').attr('checked', false);
                }
            }
        });


        $('#tree a').live('click', function () {
            if ($(this).nextAll('ul').length != 0) {
                if ($(this).nextAll('ul').is(':visible')) {
                    $(this).nextAll('ul').hide();
                } else {
                    $(this).nextAll('ul').show();
                }
            }
        });


        function readXml(xmlFile) {
            var xmlDoc;
            if (typeof window.DOMParser != "undefined") {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", xmlFile, false);
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType('text/xml');
                }
                xmlhttp.send();
                xmlDoc = xmlhttp.responseXML;
            }
            else {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.load(xmlFile);
            }
            return xmlDoc;
        }       
    </script>
    <div id="tree">
    </div>
</div>

Screenshot

Check CheckBox based on XML file values using jQuery

Company

Explore

Follow us

Contact Us