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

Learn More

Incremental ID example with Firebase [JavaScript]

Forked from Get the first item in a list in Firebase.

336 Runs 1688 Views 228 Copies
Saved

Saved

sundip 66

sundip
published 3 years ago

<html>
  <head>
  
    <!-- 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">
      
      $(document).ready(function () {
          
        var fb = new Firebase("https://katowulf-examples.firebaseio.com/incid/");
        
        // monitors changes and updates UI
        fb.child('counter').on('value', updateDiv);
        fb.on('value', updatePre);
        
        // creates a new, incremental record
        $('#inc').on('click', incId);
        
        // resets the data
        $('#clear').on('click', function() {
           fb.remove(); 
        });
        
        // attempts to create any id you put in
        $('#customButton').on('click', function() {
           addRecord($('#custom').val()); 
        });
        
        var errId = 0;
        // creates a new, incremental record
        function incId() {
          alert("incId");
            // increment the counter
            fb.child('counter').transaction(function(currentValue) {
                return (currentValue||0) + 1
            }, function(err, committed, ss) {
                if( err ) {
                   setError(err);
                }
                else if( committed ) {
                   // if counter update succeeds, then create record
                   // probably want a recourse for failures too
                   addRecord(ss.val()); 
                }
            });
        }
        
        // creates new incremental record
        function addRecord(id) {
            setTimeout(function() {
               fb.child('records').child('rec'+id).set('record #'+id, function(err) {
                  err && setError(err);
               });        
            });
        }
        
        // for demo purposes
        function updateDiv(ss) {
           $('div').text(ss.val()||0);
           $('#custom').val('rec'+(parseInt(ss.val(), 10)+1)); 
        }
        
        // for demo purposes
        function updatePre(ss) {
           $('#data').text(JSON.stringify(ss.val(), null, 2));  
        }
        
        // for demo purposes
        function setError(msg) {
            var id = ++errId;
            $('body').append('<p id="err'+id+'">'+msg+'</p>');
            setTimeout(function() { $('#err'+id).fadeOut(); }, 2500);
        }
      }
      
      );
    </script>
    <link rel="stylesheet" href="runnable.css" />
  </head>
  <body>
    <a target="_blank" href="https://gist.github.com/katowulf/6158392">
      Click here to see the security rules
    </a>
    
    <h3>Current Id</h3>
    <div></div>
    <button id="inc">increment</button>
    <button id="clear">reset data</button>
    
    <h4>Try to make record without incrementing ID</h4>
    <input type="text" id="custom" /><button id="customButton">add</button>
    
    <pre id="data"></pre>
  </body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).