Clever Geek Handbook

If parent has no element then open click event

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>

here is my code: -

<script>
data = false;


$(document).ready(function() {
    $("li").live("click", function(event) {
    /*if (event.target.id === '9426') {
        //$(this).unbind('click');
        alert('this is last !!')
        */
    $("li").hide();
        event.cancelBubble = true;
        loadChild($(this).attr("id"), event);
        return false;
    })
});

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

    if(obj.data("loaded") == null) {
        ul = "<d>";
        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 + "'>" + value_text + "</li>";
         });
         ul += "</d>";

         $("#" + id).before(ul);
         obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}

 $(function() {
     $('#1').click(function() {
     $(this).hide();
      $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                loadChild("0");
                $(xml).find('child1').each(function(){
                var value_text = $(this).attr('value');
                var id = $(this).attr('entity_id');
                $("<li id='" + id + "'></li>")
                             .html(value_text)
                             .appendTo('#firstLevelChild');
                             $(this).unbind('click');

        });       //close each(      
    }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id="1">
         <span  id='update-target'>Click here to load value</span>
         <ol id="0"></ol>
       </div>
    <div id="firstLevelChild">
        <ol id="0"></ol>
        </div>
        </p>
</body>
</html>

with this code i click on any value its soud will hide ..
but if the last child has no child then unhiding it means the click event for the last child is not working ... thanks everyone for helping me .. ...

+3


source to share


3 answers


try it

Demo



$(document).ready(function() {
  $("ul").live("click", function(event) {
    if($(this).children().size() > 1){
      $(this).find('li').first().hide();
      event.cancelBubble = true;
      loadChild($(this).attr("id"), event);
      return false;
    }    
 });
});

<ul>
   <li>Asia</li>
   <ul>
       <li>India</li>
       <ul>
          <li>Gujarat</li>
            <ul><li>Ahmedabad</li></ul>
       </ul>
  </ul>
</ul>
0


source


Now saw your code ...

Few hints first, In its current state it is now a bit difficult to read the code.

Perhaps you can consider rewriting ? Remember to write less, do more.



rewrite and answer the question:

What should your code be doing?
0


source


You can use length

to get the number of children for a node.

I cleaned up your code:

Html

<body>
    <div id="loader">
        <span id='update-target'>Click here to load value</span>
    </div>

    <div id="firstLevelChild"></div>

    <div id="path"></div>
</body>

JQuery

data = false;

$(document).ready(function() {
    $('#loader').click(function() {
        $(this).hide();
        $.ajax({
            type: "GET",
            url: "./final.xml",
            dataType: "xml",
            success: function(xml) {
                data = xml;
                ul = $("<ul></ul>");
                $(xml).find('child1').each(function(){
                    var value_text = $(this).attr('value');
                    var id = $(this).attr('entity_id');
                    li = $("<li id='" + id + "'></li>");
                    li.html(value_text);

                    ul.append(li);
                    $(this).unbind('click');

                });       //close each(      
                ul.appendTo('#firstLevelChild');
            }
        }); //close $.ajax(
    }); //close click(

    $(document).on("click", "li", function(event) {
        event.stopPropagation();
        loadChild($(this).attr("id"), event);
        return false;
    });
});

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

    if(obj.data("loaded") == null) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            $("#path").text($("#path").text() + " - " + obj.text());
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</ul>";

        obj.after(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}

Exit (after two clicks)

<div id="firstLevelChild">
    <ul>
        <li id="1" style="display: none;">Asia</li>
        <ul>
            <li id="2" style="display: none;">india</li>
            <ul>
                <li id="3">Gujarat</li>
                <li id="4">Rajshthan</li>
            </ul>
        </ul>
    </ul>
</div>
<div id="path"> - Asia - india</div>
0


source






More articles:


All Articles