Speed up development with full-stack environments for every branch.

Learn More

Editable nested tree nodes using Firebase [JavaScript]

425 Runs 1072 Views 59 Copies


sundip 66

published 3 years ago

    <!-- Installing Firebase from CDN -->
    <script src='https://cdn.firebase.com/v0/firebase.js'></script>
    <!-- Installing jQuery from CDN -->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type="text/javascript">
    /* Recipe code to check if data exists in Firebase */
      var rootRef = new Firebase("https://kato-rp2.firebaseio-demo.com");

      // delete record when a tag is clicked
      jQuery('body').on('click', 'a', function() {
         var $rec = $(this).closest('[data-id]');
          var id = $rec.attr('data-id') || null;
          if( id ) {
             // remove any nested children
             $rec.find('[data-id]').each(function() {
             // remove the record
          return false;
      // add new records at the appropriate level when a button is clicked
      jQuery('body').on('click', 'button', function () {
          var $input = $(this).prev('input');
          var title = $input.val();
          var parent = $input.closest('[data-id]').attr('data-id') || null;
          console.log('creating', parent, title);
          if (title) {
              rootRef.push({ 'title': title, 'parent': parent });
          return false;
      rootRef.on('child_added', function (snapshot) {
          var message = snapshot.val();
          console.log('child_added', message);
          displayTitleMessage(snapshot.name(), message.title, message.parent);
      rootRef.on('child_removed', function(snapshot) {
      function displayTitleMessage(id, title, parentId) {
          var $parent = parentId ? findParent(parentId) : $('#records');
          var $el = makeListItem(title);
          console.log('displaying', id, parentId, $parent, title);
          // add a data-parent attribute, which we use to locate parent elements
          $el.appendTo($parent).attr('data-id', id);
      function findParent(parentId) {
          return $('#records').find('[data-id="' + parentId + '"] > ul');
      function makeListItem(title) {
          return $('#recordTemplate').clone()
          // remove the id attr
          .attr('id', null)
          // enter the <span> tag and use .text() to escape title
          // navigate back to the cloned element and return it

    <link rel="stylesheet" href="runnable.css" />
    <ul id="records"></ul>
    <form><input type="text"><button>add</button></form>
    <li id="recordTemplate"> 
        <span></span> <a href="#">X</a>
        <form><input type="text"><button>add</button></form>
    <!-- after parsing the records, they look like this 
         (the hash is stored in data-id):
    <li data-id="-iZjYl...."> 
        <span>Title here</span> <a href="#">X</a>
        <ul>... children here... </ul>
        <form><input type="text"><button>add</button></form>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).