Want more features on Pastebin? Sign Up, it's FREE!
Guest

jhgyg

By: a guest on Jul 21st, 2013  |  syntax: None  |  size: 4.08 KB  |  views: 37  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link rel="stylesheet" href="jquery2.css">
  5.  
  6.   <!-- Extra Codiqa features -->
  7.   <link rel="stylesheet" href="codiqa.ext.css">
  8.  
  9.   <link rel="stylesheet" href="https://codiqa.com/view/c54825de/css">
  10.  
  11.   <!-- jQuery and jQuery Mobile -->
  12.   <script src="jquery.js"></script>
  13.   <script src="jquery2.js"></script>
  14.   <script src="storage.js"></script>
  15.   <!-- Extra Codiqa features -->
  16.   <script src="codiqa.js"></script>
  17.    
  18.   <script src="https://codiqa.com/view/c54825de/js"></script>
  19. </head>
  20.  
  21. <body>
  22.  
  23.  
  24.    <div data-role="page" data-control-title="Home" id="home">
  25.       <div data-theme="a" data-role="header">
  26.           <h3>
  27.               Scores
  28.           </h3>
  29.            <a href=# data-role=button id=create> Create List </a>
  30.     <a href=# data-role=button id=remove> Delete DB </a>
  31.       </div>
  32.  
  33.   <div data-role=content>
  34.        <a data-role="button" rel="external" href="index.html" data-icon="home" data-iconpos="left">
  35.               Go Home
  36.           </a>
  37.     <span> Location and Date </span>
  38.     <input type=text id=lname>
  39.     <span> Event Name and Time </span>
  40.     <input type=text id=fname>
  41.     <span> Location and Date </span>
  42.     <input type=text id=bname>
  43.     <span> Event Name and Time </span>
  44.     <input type=text id=cname>
  45.     <a href=# data-role=button id=insert>Add Score To Datbase</a>
  46.     <a href=# data-role=button id=list>List of Scores</a>
  47.   </div>
  48. </div>
  49.  
  50. <div data-role=page id=win2 data-add-back-btn=true>
  51.   <div data-role=header>
  52.     <h1>List of Scores</h1>
  53.   </div>
  54.  
  55.   <div data-role=content>
  56.   </div>
  57. </div>
  58.  
  59. </body>
  60. </html>
  61.  
  62. <script>
  63.  
  64. var db = openDatabase ("Test", "1.0", "Test", 65535);
  65.  
  66. $("#create").bind ("click", function (event)
  67. {
  68.   db.transaction (function (transaction)
  69.   {
  70.     var sql = "CREATE TABLE customers " +
  71.         " (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
  72.         "lname VARCHAR(100) NOT NULL, " +
  73.         "fname VARCHAR(100) NOT NULL)" +
  74.         "bname VARCHAR(100) NOT NULL)" +
  75.         "cname VARCHAR(100) NOT NULL)"
  76.     transaction.executeSql (sql, undefined, function ()
  77.     {
  78.       alert ("Table created");
  79.     }, error);
  80.   });
  81. });
  82.  
  83. $("#remove").bind ("click", function (event)
  84. {
  85.   if (!confirm ("Delete table?", "")) return;;
  86.   db.transaction (function (transaction)
  87.   {
  88.     var sql = "DROP TABLE customers";
  89.     transaction.executeSql (sql, undefined, ok, error);
  90.   });
  91. });
  92.  
  93. $("#insert").bind ("click", function (event)
  94. {
  95.   var lname = $("#lname").val ();
  96.   var fname = $("#fname").val ();
  97.   var bname = $("#bname").val ();
  98.   var cname = $("#cname").val ();
  99.  
  100.   db.transaction (function (transaction)
  101.   {
  102.     var sql = "INSERT INTO customers (lname, fname, bname, cname) VALUES (?, ?, ?, ?)";
  103.     transaction.executeSql (sql, [lname, fname, bname, cname], function ()
  104.     {
  105.       alert ("Score inserted");
  106.     }, error);
  107.   });
  108. });
  109.  
  110. $("#list").bind ("click", function (event)
  111. {
  112.   db.transaction (function (transaction)
  113.   {
  114.     var sql = "SELECT * FROM customers";
  115.     transaction.executeSql (sql, undefined,
  116.     function (transaction, result)
  117.     {
  118.       var html = "<ul>";
  119.       if (result.rows.length)
  120.       {
  121.         for (var i = 0; i < result.rows.length; i++)
  122.        {
  123.          var row = result.rows.item (i);
  124.          var lname = row.lname;
  125.          var fname = row.fname;
  126.          var bname = row.bname;
  127.          var cname = row.cname;
  128.          html += "<li>" + lname + "&nbsp;" + fname + "&nbsp;" + bname + "&nbsp;" + cname + "</li>";
  129.         }
  130.       }
  131.       else
  132.       {
  133.         html += "<li> No Score </li>";
  134.       }
  135.      
  136.       html += "</ul>";
  137.      
  138.       $("#win2").unbind ().bind ("pagebeforeshow", function ()
  139.       {
  140.         var $content = $("#win2 div:jqmData(role=content)");
  141.         $content.html (html);
  142.         var $ul = $content.find ("ul");
  143.         $ul.listview ();
  144.       });
  145.      
  146.       $.mobile.changePage ($("#win2"));
  147.      
  148.     }, error);
  149.   });
  150. });
  151.  
  152. function ok ()
  153. {
  154. }
  155.  
  156. function error (transaction, err)
  157. {
  158.   alert ("DB error : " + err.message);
  159.   return false;
  160. }
  161.  
  162. </script>
clone this paste RAW Paste Data