daily pastebin goal
60%
SHARE
TWEET

Untitled

arindamnayak Nov 16th, 2014 159 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8' />
  5.         <title>Todo list: azuretest1</title>
  6.         <link rel='stylesheet' href='styles.css' />
  7.                 <link rel="stylesheet" href="http://akquinet.github.io/jquery-toastmessage-plugin/demo/css/jquery.toastmessage-min.css" />
  8.                   <script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
  9.                     <script type="text/javascript" src="http://akquinet.github.io/jquery-toastmessage-plugin/demo/jquery.toastmessage-min.js"></script>
  10.         <meta name='viewport' content='width=device-width' />
  11.         <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
  12.     </head>
  13.     <body>
  14.         <div id='wrapper'>
  15.             <article>
  16.                 <header>
  17.                     <h2>Microsoft Azure</h2>
  18.                     <h1>Mobile Services</h1>
  19.  
  20.                     <form id='add-item'>
  21.                         <button type='submit'>Add</button>
  22.                         <div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
  23.                     </form>
  24.                 </header>
  25.  
  26.                 <ul id='todo-items'></ul>
  27.                 <p id='summary'>Loading...</p>
  28.             </article>
  29.  
  30.             <footer>
  31.                 <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
  32.                     Learn more about Microsoft Azure Mobile Services
  33.                 </a>
  34.                 <ul id='errorlog'></ul>
  35.             </footer>
  36.         </div>
  37.  
  38.      
  39.         <script src='http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.2.min.js'></script>
  40.         <script src='page.js'></script>
  41.                
  42.                 <script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
  43.                 <script type="text/javascript">
  44.                         // Enable pusher logging - don't include this in production
  45.                         Pusher.log = function(message) {
  46.                           if (window.console && window.console.log) {
  47.                                 window.console.log(message);
  48.                           }
  49.                         };
  50.  
  51.                         var pusher = new Pusher('PUSHER_KEY');
  52.                         var channel = pusher.subscribe('test_channel');
  53.                         channel.bind('OnUpdate', function(data) {
  54.                        
  55.                                 if(data.complete)
  56.                                 {
  57.                                         $().toastmessage('showSuccessToast', "Finally, Completed Task.");
  58.                                         $("li[data-todoitem-id=" + data.id + "]").fadeOut(100).remove();
  59.                                 }
  60.                                 else
  61.                                 {
  62.                                         $().toastmessage('showSuccessToast', "Updated item ...");
  63.                                         $("li[data-todoitem-id=" + data.id + "] div input").fadeOut().val(data.text).fadeIn(100);
  64.                                                
  65.                                 }
  66.                                 $('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');
  67.                         });
  68.                        
  69.                         channel.bind('OnInsert', function(data) {
  70.                                 $().toastmessage('showSuccessToast', "Hooray, Someone created task " + data.text);
  71.                                 var newelem =  $('<li>')
  72.                     .attr('data-todoitem-id', data.id)
  73.                     .append($('<button class="item-delete">Delete</button>'))
  74.                     .append($('<input type="checkbox" class="item-complete">').prop('checked', false))
  75.                     .append($('<div>').append($('<input class="item-text">').val(data.text)));
  76.                                 $('#todo-items').fadeOut().append(newelem).fadeIn(100);
  77.                                 $('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');
  78.                         });
  79.                         //OnDelete
  80.                        
  81.                         channel.bind('OnDelete', function(data) {
  82.                                 $().toastmessage('showSuccessToast', "Got rid of one more task, Huh!");
  83.                                 $("li[data-todoitem-id=" + data + "]").fadeOut(100).remove();
  84.                                 $('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');
  85.                         });
  86.                 </script>
  87.     </body>
  88. </html>
RAW Paste Data
Top