0

this is my xml file :-

<root>
<child1 entity_id = "1" value= "Asia">
    <child2 entity_id = "2" value = "india">
        <child3 entity_id = "3" value = "Gujarat">
            <child5 entity_id = "5" value ="Rajkot"></child5>
        </child3>
        <child4 entity_id = "4" value = "Rajshthan">
            <child6 entity_id = "6" value = "Ajmer"></child6>
        </child4>
    </child2>
</child1>
</root>

this is my code :-

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
data = false;
loaded = false;

function loadChild(id) {
    if(!loaded) {
        ul = "<ul>";
        $(data).find("[entity_id='" + id + "']").children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');

            ul += "<li id='" + id + "'>" + value_text + "</li>";
         });
         ul += "</ul>";
         $("#" + id).append(ul);
         loaded = true;
    }
}

 $(function() {
     $('#update-target a').click(function() {
         $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                //console.log(data);
                 $(xml).find('child1').each(function(){
                     var value_text = $(this).attr('value');
                     var id = $(this).attr('entity_id');
                     $("<li id='" + id + "' onclick=\"loadChild('" + id + "');\"></li>")
                         .html(value_text)
                         .appendTo('#update-target ol');
                 }); //close each(
             }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id='update-target'>
         <a href="#">Click here to load value</a>
         <ol></ol>
       </div>
     </p>

</body>
</html>

i got the output something like this :-

Asia India

i want something like this output:-

if click on Asia then display India
if click on India then display Gujarat and Rajshthan
if click on Gujarat then display Rajkot
if click on Rajshthan then display Ajemr

6
  • It's hard to understand what your question and problems are from the post. Please be more explicit.
    – Roland Mai
    Jan 23, 2013 at 7:59
  • @Candide i have get one output Asia then i click on them its display there child value India and now i want click on India then its display there child value like a Gujarat and Rajshthan Jan 23, 2013 at 8:23
  • This question is tagged xslt, but I can't see any XSLT in the question (or answer!). Perhaps that tag needs to be removed?
    – Tim C
    Jan 23, 2013 at 9:16
  • @TimC i want some help on your answer can u help me?? your answer is correct but i want in them some changes like if i click on parent then there display there child where child is display at a time parent is hide... can you help me out of this Jan 29, 2013 at 9:57
  • Hello! I am quite busy at the moment, I am afraid, so don't know when I will be able to help. But you could always ask a whole new question here on StackOverflow if you like, and maybe someone else can help.
    – Tim C
    Jan 29, 2013 at 19:34

1 Answer 1

0

Firstly, if you want to continually click on the child values, you will need to add your loadChild function as a click event on each child list item. So, instead of this line

ul += "<li id='" + id + "'>" + value_text + "</li>";

You need this line

ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>";

However, this leads on to the next issue. You are using a global variable loaded to check whether the XML has already been read. But once this has been set to true (when clicking india) then the loadChild function will not do anything else. You really need to keep a track of the loaded value for each separate child. You could make use of the jquery data function here, for example

var obj = $("#" + id);
if(obj.data("loaded") == null)
{
   // Load data
}
obj.data("loaded", true);

Note that another thing you will need to avoid is that when clicking on a child element, you want to avoid the onclick event of the parent firing (which may happen because the child element is embedded within the parent's li) element, and so you will need to tell the browser not to bubble up the click event.

event.cancelBubble = true;

Finally, to simplify the code a bit, you could actually get the click handler for update-target a to call your loadChild function, but using a 'dummy' element with an id of 0.

Try the following code instead:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
data = false;

function loadChild(id) {
    var obj = $("#" + id);

    if(obj.data("loaded") == null) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";
        $(data).find(path).children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');
             ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>";
         });
         ul += "</ul>";

         $("#" + id).append(ul);
         obj.data("loaded", true);
         event.cancelBubble = true;
    }
}

 $(function() {
     $('#update-target a').click(function() {
         $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                loadChild("0");
             }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id='update-target'>
         <a href="#">Click here to load value</a>
         <ol id="0"></ol>
       </div>
     </p>
</body>
</html>
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.