1 Reply Latest reply on Oct 22, 2017 8:10 AM by zacharyr30798184

    Phonegap multi page

    rdsgi

      I'm writing a multi page app. my first page is a login the second is a data entry for inventory and so is the third. after login in I make visible two icons that can transfer user to page two or page 3. The data entry of page two uses PouchDB to access validation data and store input transactions that are presented on the screen on a table. when a new transaction is entered the data is written to the PouchDB file and added to the onscreen table.  At that moment after writing the doc in PouchDB the app goes int the Jquery.js and at line 9683 in a complete() the screen goes blank the the login page(#1) is presented and the input fields don't respond. I need to know if I need to remove Jquery in order to use multi pages in an app or how to get around this error. the HTML/JS/CSS code is below.

      INDEX.HTML:

      <!DOCTYPE html>

      <html lang="en">

      <head>

          <meta charset="utf-8" />

          <meta name="format-detection" content="telephone=no" />

          <meta name="msapplication-tap-highlight" content="no" />

          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

          <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />

          <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

          <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

          <link rel="stylesheet" type="text/css" href="css/reset.css" />

          <link rel="stylesheet" type="text/css" href="css/index.css" />

          <link rel="shortcut icon" href="">

          <script type="text/javascript" src="cordova.js"></script>

          <script type="text/javascript" src="js/pouchdb-6.3.4.js"></script>

          <script type="text/javascript" src="js/index.js"></script>

          <title>Truck Checkout</title>

      <!--

          <script type="text/javascript">

              app.initialize();

          </script>

      -->

      </head>

      <body>

      <!--Login Page -->  

          <div data-role="page" id="login">

              <div data-role="header" >

                  <div class="main-header">

                          <h1>Checkout Login</h1>

                  </div>

              </div>  <!--  header  -->

              <div data-role="content" class="navigation">

                  <div class="navigation">

                          <a href="#checkout" id="hideme1" >

                              <img src="img/Truck-50.png" alt="Checkout" />

                              <h5>Checkout</h5>

                          </a>

                          <a href="@loading"  id="hideme2" >

                              <img src="img/forklift-50.png" alt="Loading" />

                              <h5>Loading</h5>

                          </a>

                  </div>

                  <div class="loginfields">

                          <p strong id=uidlabel >User Id</p>

                          <input type="tel" id="txtuid"  size="10" class="ifld" placeholder="UserId"/>

                          <p strong id=pswlabel >Password</p>

                          <input type="password" id="txtpsw" class="ifld" placeholder="Password" pattern="[0-9]" inputmode="numeric" />

                          <button id="txtlogbtn" >Login</button>

                  </div>

                  <div class="xflmsg">

                      <p id="logmessage"></p>

                  </div>

              </div>  <!--    content  -->

              <div data-role="footer" id="footdiv">

                  <h3 id="footlog"></h3>

              </div>

       

       

          </div>  <!--end page Login -->

       

       

      <!--Checkout Page -->

          <div data-role="page" id="checkout">

              <div data-role="header" class="main-header">

                      <div class="main-header">

                          <a href="#login" style="margin-left:10px, align-left"> 

                              <img src="img/ArrowLeft_32.png" alt="arrow" class="backimg"/>

                          </a>

                          <h1>Truck Checkout</h1>

                      </div>

              </div>  <!--  header  -->

                  <div class="entryfields">

                      <div class="xflentry">

                          <input type="tel" id="txtmonth"  size="3" placeholder="MM" data-role="none"/>

                          <input type="tel" id="txtday"  size="3" placeholder="DD" data-role="none" />

                          <input type="tel" id="txttruck" placeholder="Truck#" data-role="none"/>

                          <input type="tel" id="txtroute" placeholder="Route" data-role="none" disabled/>

                          <input type="text" id="txtdriver" placeholder="Driver" data-role="none" disabled/>

                      </div>

                  </div>

                  <div class="xfldinvent">

                      <form action=""  name="inventory">

                          <input type="tel" id="txtupc" placeholder="UPC" data-role="none" />

                          <input type="tel" id="txtrqty" placeholder="Sobra" data-role="none" />

                          <input type="tel" id="txtsqty" placeholder="Stale" data-role="none" />

                          <button id="txtbtn" class="btn2">Add</button>

                      </form>

                  </div>

            

                  <div class="xfldprod">

                      <p id="message">Product:</p>

                      <input type="text" id="txtprod"  placeholder="Product No" data-role="none" disabled/>

                      <input type="text" id="txtdesc"  placeholder="Product Description" data-role="none" disabled/>

                  </div>

            

                  <div class="tablepos">

                      <div class="tabsection">

                          <table class="header" id="tabid">

                              <thead>

                                  <th id="p1">Product#</th>

                                  <th id="p2">Description</th>

                                  <th id="p3">Sobra</th>

                                  <th id="p4">Stale</th>

                              </thead>

                              <tbody id="reclines">

                              </tbody>

                          </table>

                      </div>

                  </div>

                    

              <div data-role="footer" id="botdiv">

                      <h3 id="foottext">Message</h3>

                 </div>

           </div>  <!--end page Checkout -->

      </body>

      </html>

       

      INDEX>JS:

      // global variables

      var tmm;

      var tdd;

      var tyy;

      var mmtab = [31,29,31,30,31,30,31,31,30,31,30,31];

      var logged = false;

      var xuid = localStorage.getItem("userid");

      var xpsw = "";

      var xname = "";

      var xchko = "";

      var xload = "";

      var hid  = true;

      var ausers = [];

      var gprodno   = "";

      var gdesc = "";

      var gtruck = "";

      var groute = "";

      var gdriver = "";

      var atrucks = [];

      var trans = [];

      var jtran = {};

      var grqty = 0;

      var gsqty = 0;

      var trqty = 0;

      var tsqty = 0;

      var updt = false;

       

       

      $(function () {

          // are we running in native app or in a browser?

          window.isphone = false;

          if(document.URL.indexOf("http://") === -1

              && document.URL.indexOf("https://") === -1) {

              window.isphone = true;

          }

       

       

          if( window.isphone ) {

              document.addEventListener("deviceready", onDeviceReady, false);

          } else {

              onDeviceReady();

          }

      });

       

       

      function onDeviceReady() {

       

       

          // var display = document.getElementById('pouchdb-display');

          dbUsers  = new PouchDB('users');

          var syncP = PouchDB.sync("users", "http://192.168.1.114:5984/users");

          dbProd = new PouchDB('product');

          var syncP = PouchDB.sync("product", "http://192.168.1.114:5984/product");

          dbChk  = new PouchDB('checkout');

          var syncK = PouchDB.sync("checkout", "http://192.168.1.114:5984/checkout");

          dbTrk  = new PouchDB('trucks')

          var syncT = PouchDB.sync("trucks", "http://192.168.1.114:5984/trucks");

       

       

          var iddate    = new Date();

          console.log('iddate: '+ iddate);

          var idmm      = iddate.getMonth() + 1;

          var iddd      = iddate.getDate();

          var idyyyy    = iddate.getFullYear();

          var tmsg      = "";

       

       

          loadUsers();

          loadTrucks();

       

       

          // Login Page

       

       

          $('#txtlogbtn').click(function() {

              xuid = $('#txtuid').val();

              xpsw = $('#txtpsw').val();

              var xact = false;

              var xup = false;

              for(var i=0; i < ausers.length; i++) {

                  if (xuid == ausers[i].UserId && xpsw == ausers[i].pswd) {

                      xup = true;

                      if (ausers[i].Status == "A")  {

                          localStorage.setItem("userid", xuid);

                          localStorage.setItem("username", ausers[i].Username);

                          localStorage.setItem("checkout", ausers[i].checkout);

                          localStorage.setItem("loading", ausers[i].loading);

                          localStorage.setItem("Status", ausers[i].Status);

                          xact = true;

                          xname = ausers[i].Username;

                          xchko = ausers[i].checkout;

                          xload = ausers[i].loading;

                          var ix = ausers[i].Status;

                          logged = true;

                          setAccess();

                          i = ausers.length + 1;

                      }   

                  }

              }

              if (!xup) {

                  alert('Invalid Login Credentials - try again')

              }else {

              if (!xact) {

                  alert('User Account Inactive: ', ix)

              }}

          });

             

          function setAccess() {

              $("#logmessage").html("Login Successfull - " + xname);

              if (xchko) {

                  $("#hideme1").css('visibility','visible');

              }

              if (xload) {

                  $("#hideme2").css('visibility','visible');

              }

              if (!xchko && !xload) {

                 alert("Invalid Access Level");

              }

          }

       

       

          function loadUsers() {

              dbUsers.allDocs({include_docs: true, ascending: true}).then(

                  function(doc) {

                      userArray(doc.rows);

                  }).catch(function(err) {

                      console.log(err);

                  });

          }

       

       

          function userArray(data){

              for(var i=0; i<data.length; i++) {

                 newusr =  {

                  UserId :   data[i].doc._id,

                  pswd:      data[i].doc.pswd,

                  checkout : data[i].doc.checkout,

                  loading :  data[i].doc.loading,

                  Username : data[i].doc.Username,

                  Status :   data[i].doc.Status

                          };

                  ausers.push(newusr);

              }

          }

       

       

      // Checkout Page Section

       

       

          $('#txtmonth').focusout(function() {

              tmm = $('#txtmonth').val();

              if (tmm < 1  && tmm > 12) {

                  alert('Invalid Month');

              }

          });

       

       

       

       

          $('#txtday').focusout(function() {

              tdd = $('#txtday').val();

              ddh = mmtab[tmm];

              if (tdd  < 1  && tdd > ddh) {

                  alert('Invalid Day');

              }

          });

       

       

       

       

          $('#txttruck').focusout(function() {

              var truck = $('#txttruck').val();

              var fd = new Date();

              fd.setDate(fd.getDate() - 4);

              var td = new Date();

              tyy = td.getFullYear();

              if ( tmm == 12  &&  idmm == 1) {

                  tyy = tyy - 1;

              }

              var pdate = tyy + '-' + tmm + '-' + tdd + 'T00:00:00';

              var pd = new Date(pdate);

              if (truck.length > 0) {

                  getRoute(truck);     // validate truck and get route/driver info

                  if (groute > "") {

                      if (pd > fd && pd <= td) {

                          reloadTrn();

                      }

                      else {

                          alert('Invalid date');

                      }

                  }

                  else {

                      alert('Invalid Truck No');

                  }

              }

              else {

                  alert('Invalid Truck No');       

              }

          });

       

       

          $('#txtupc').focusout(function() {

              var upcCode = $('#txtupc').val();

              if (upcCode.length > 1) {

                 getProd(upcCode);

                  }

              document.getElementById("message").innerHTML =

                  "Product";

              });

       

       

          $('#txtbtn').click(function() {

              var result = verifyItem();

          });

         

       

       

          function getRoute(xtrk)  {

              groute = "";

              gdriver = "";

              for(var i=0; i < atrucks.length; i++) {

                  if (atrucks[i].truck == xtrk) {

                  groute = atrucks[i].route;

                  gdriver = atrucks[i].driver;

                  $('#txtroute').val(groute);

                  $('#txtdriver').val(gdriver);

                  i = atrucks.length + 1;

                  }

              }   

          } 

         

          function verifyItem() {

              dbChk.allDocs({include_docs: true, ascending: true}).then(

                  function(doc) {

                      updtItem(doc.rows);

              }).catch(function(err) {

                      console.log(err);

              });

          }

             

          function updtItem(data){

              var truck = $('#txttruck').val();

              var tdate = tyy + '-' + tmm + '-' + tdd;

              var id    = truck + gprodno + tdate;

              var nrqty = Number($('#txtrqty').val());

              var nsqty = Number($('#txtsqty').val());

              var updt = false;

              for(var i=0; i<data.length; i++) {

                  if (data[i].doc._id == id) {

                          jtran = {

                              _id:         id,

                              _rev:        data[i].doc._rev,

                              truck:       truck,

                              product:     gprodno,

                              route:       groute,

                              trndate:     tdate,

                              proddesc:    gdesc,

                              driver:      data[i].doc.driver,

                              rqty:        nrqty,

                              sqty:        nsqty,

                              userid:      xuid,

                              status: 'N'

                              };

                      updt = true;

                      dbChk.put(jtran, function callback(error, result)  {

                      if (!error) {

                          clearfields();

                          reloadTrn();

                          i = data.length + 1;

                          document.getElementById("message").innerHTML =

                              "Product  - updated successfully";

                          return;

                          }

                      });

                  }

              }

              if (!updt) {

                  addItem();   

              }   

          }

         

          function reloadTrn() {

              trqty = 0;

              tsqty = 0;

              trans.length = 0;

              dbChk.allDocs({include_docs: true, ascending: true}).then(

                  function(doc) {

                      loadArray(doc.rows);

              }).catch(function(err) {

                      console.log(err);

              });

          }

       

       

          function addItem() {

              var nrqty = Number($('#txtrqty').val());

              var nsqty = Number($('#txtsqty').val());

              var tdate = tyy + '-' + tmm + '-' + tdd;

              var trantab = {

                  prodno:  $('#txtprod').val(),

                  description: $('#txtdesc').val(),

                  rqty: nrqty,

                  sqty: nsqty   

              };

              var newtran =  {

                  truckno: $('#txttruck').val(),

                  prodno:  $('#txtprod').val(),

                  trndate: tdate,

                  description: $('#txtdesc').val(),

                  driver:  $('#txtdriver').val(),

                  rqty: nrqty,

                  sqty: nsqty,

                  status: 'N'

              };

                  trans.push(trantab);

                  addTran(newtran);

                  trqty = trqty + nrqty;

                  tsqty = tsqty + nsqty;

                  // clear input fields

                  clearfields();

                  tmsg = "Total: Sobra: "+ trqty + ",  Stale: " + tsqty;

                  document.getElementById("foottext").innerHTML = tmsg;

          }

       

       

          function addTran(newTran) {

             // console.log("iddate: " + iddate);

              var truck =  newTran.truckno;

              var prod  =  newTran.prodno;

              var tdate =  newTran.trndate;

              var id    =  truck + prod + tdate;

              var desc  =  newTran.description;

              var driv  =  newTran.driver;

              var rq    =  newTran.rqty;

              var sq    =  newTran.sqty;

              var stat  =  newTran.status;

              jtran = {

                  _id:      id,

                  truck:    truck,

                  product:  prod,

                  trndate:  tdate,

                  proddesc: desc,

                  driver:   driv,

                  rqty:     rq,

                  sqty:     sq,

                  userid:   xuid,

                  status:   stat

              };

              dbChk.put(jtran, function callback(error, result)  {

                  if (!error) {

                      clearfields();

                      reloadTrn();

                      tmsg = "Product  - Transaction added successfully";

                      document.getElementById("message").innerHTML = tmsg;

                     

                  }

              });

          }

       

       

          function clearfields() {

              $('#txtupc').val('');

              $('#txtrqty').val('');

              $('#txtsqty').val('');

              $('#txtprod').val('');

              $('#txtdesc').val('');

          }

       

       

          function loadArray(data) {

              var truck = $('#txttruck').val();

              var tdate = tyy + '-' + tmm + '-' + tdd;

              var reclines  = $('#reclines');

              var newtran = [];

              $("#tabid tbody tr").remove();

              for(var i=0; i<data.length; i++) {

                  if (data[i].doc.truck == truck &&

                      data[i].doc.trndate == tdate) {

                      newtran =  {

                          prodno:     data[i].doc.product,

                          description: data[i].doc.proddesc,

                          rqty:       data[i].doc.rqty,

                          sqty:       data[i].doc.sqty

                      };

                      trans.push(newtran);

                  }

              }

              if (trans.length > 0) {

                  for ( i = 0; i < trans.length; i++) {      

                      trqty = trqty + trans[i].rqty;

                      tsqty = tsqty + trans[i].sqty;

                      reclines.append(

                      '<tr><td align="center">' +

                      trans[i].prodno + '</td><td align="center">' +

                      trans[i].description + '</td><td align="center">' +

                      trans[i].rqty + '</td><td align="center">' +

                      trans[i].sqty + '</td></tr>');

                  }

              }

              tmsg = "Total: Sobra: "+ trqty + ",  Stale: " + tsqty;

              document.getElementById("foottext").innerHTML = tmsg;

          }

       

       

          function getProd(upc) {

              dbProd.get(upc).then( function(doc)  {

                  return  showProd(doc);

                 //  console.log(doc);

                  }).catch(function(err) {

                    alert("UPC Not Found: "+ err );

                    console.log(err);

                  });

          }

       

       

          function showProd(data) {

              gprodno =  data.product;

              gdesc = data.proddesc;

              $('#txtprod').val(gprodno);

              $('#txtdesc').val(gdesc);

          }

         

          function loadTrucks() {

              dbTrk.allDocs({include_docs: true, ascending: true}).then(

                  function(doc) {

                  truckArray(doc.rows);

              }).catch(function(err) {

                  console.log(err);

              });

          }

             

          function truckArray(data){

              for(var i=0; i<data.length; i++) {

              newtrk =  {

                  truck :  data[i].doc._id,

                  route :  data[i].doc.route,

                  driver : data[i].doc.driver

                  };

                  atrucks.push(newtrk);

              }

          }

      }

       

      INDEX.CSS:

      /*

      index.css

      */

      body {

      /*  margin: 100px 0px 0px 0px;  */

         font-family: 'Roboto', 'Noto', sans-serif;

         font-size: 13px;

         min-height: 100vh;

         color: black;

      }

       

       

      .main-header {

          position: fixed;

          top: 0px;

          left: 0px;

          width: 100%;

          background-color: blue;

          color: white;

          margin: 0px;

          padding: 0px ;

          line-height: 60px;

         }  

       

       

       

       

      h1 {

          margin-top: 5px;

          margin-bottom: 5px;

          margin-left: 80px; 

          width: 250px;

          font-size: 24px;

          font-weight: bolder;

      }

       

       

      .navigation {

          position: fixed;

          top: 70px;

          left: 0px;

          width: 100%;

          background-color: gainsboro;

          color: white;

          font-size: 15px;

          margin: 0px;

          padding: 0px ;

          height: 75px;

          display:inline-block;

         }  

       

       

      img {

          float: left;

      }

       

       

      #hideme1 {

          text-align: left;

          visibility: hidden;

          display:inline-block;

          margin-left: 70px;

          margin-top: 5px;

      }

      #hideme2 {

          text-align: left;

          visibility: hidden;

          display:inline-block;

          margin-left: 100px;

          margin-top: 5px;

      }

       

       

      .ui-btn {

          font-size: 18px !important;

      }

      .loginfields {

          position: fixed;

          margin-left: 5px;

          top: 145px;

          height: 240px;

          width: 350px;

          font-family: monospace;

          background-color: #8aedf6;

          color: black;

          border-radius: 2px;

      }

      .ifld:focus {

          border: 1px solid #000;

         

      }

       

       

      #uidlabel {

          position: relative;  

          margin-left: 30px;

          margin-top: 15px;

          font-weight: bold;

          font-size: 18px !important;

      }

       

       

      .ui-input-text {

          border-width: 2px;

      }

      input.txtuid {

          position: relative;  

          margin-left: 30px;

          margin-top: 5px;

          padding: 3px;

          border-width: 2px;

          width: 100px;   

      }

      #pswlabel {

          position: relative; 

          margin-left: 30px;

          margin-top: 15px;

          font-weight: bold;

          font-size: 18px !important;

      }

      input.txtpsw {

          position: relative;  

          margin-left: 30px;

          margin-top: 5px;

          margin-bottom: 15px;

          padding: 3px;

          width: 100px;   

      }

      #txtlogbtn.ui-btn {

          position: relative;

          margin-left: 90px;

          margin-right: 40px;

          margin-bottom: 10px;

          float: center;

          width: 150px !important;

          height: 55px;

      }

      .xflmsg {

          position: fixed;  

          top: 393px;

          height: 35px;

          width: 340PX;   

          margin-left: 10px;

          font-family: monospace;

          background-color: #50FFE2;

          color: blue;

         

      }

      #logmessage {

          margin: 3px 5px 3px 5px;

          height: 26px;

          width: 96%;   

      }

       

       

      div#footdiv {

          position: fixed;

          bottom: 0px;

          left: 0px;

          width: 100%;

          background-color: blue;

          color: white;

          font-size: 20px;

          margin: 0px;

          padding: 0px ;

          height: 40px;

      }

      h3#foottext {

          margin: 5px 10px 5px 30px;

      }

       

       

      /*

      checkout Page

      */

       

       

      .backimg {

          margin-top: 15px;

          margin-left: 5px;

      }

      .entryfields {

          position: relative;

          top: 61px;

          height: 60px;

          font-family: monospace;

          background-color: #8aedf6;

          color: black;

      }

       

       

      #txtmonth {

          margin-left: 10px;

          margin-top: 15px;

          margin-right: 5px;

          float: left;

          width: 35px;

          height: 25px;

      }

      #txtday {

          margin-top: 15px;

          margin-right:10px;

          float: left;

          width: 35px;

          height: 25px;

      }

      #txttruck {

          margin-top: 15px;

          margin-right: 10px;

          float: left;

          width: 50px;

          height: 25px;

      }

      #txtroute {

          margin-top: 15px;

          margin-right: 10px;

          float: left;

          width: 50px;

          height: 25px;

      }

      #txtdriver {

          margin-top: 15px;

          margin-right: 10px;

          float: left;

          width: 70px;

          height: 25px;

      }

       

       

      .xfldinvent {

          position: relative;

          top: 63px;

          height: 60px;

          background-color: yellow;

          color: blue;

      }

       

       

      #txtupc {

          float: left;

          font-size: 14px;

          margin-left: 4px;

          margin-top: 15px;

          margin-right: 5px;

          width: 120px;

          height: 25px;

      }

       

       

      #txtrqty {

          float: left;

          font-size: 14px;

          margin-top: 15px;

          margin-right: 3px;

          width: 45px;

          height: 25px;

      }

      #txtsqty {

          float: left;

          font-size: 14px;

          margin-top: 15px;

          margin-right: 3px;

          width: 45px;

          height: 25px;

      }

       

       

      #txtbtn {

          margin-top: 8px;

          margin-right: 3px;

          float: left;

          width: 90px;

          height: 45px;

      }

       

       

      .xfldprod {

          position: relative;

          top: 60px;

          height: 70px;

          background-color: lightgreen;

          color: black;

      }

       

       

      #message {

          font-size: 14px;

          font-weight: bold;

          margin-left: 5px;

          margin-top: 5px;

          margin-right: 5px;

          padding-top: 5px;

      }

       

       

      #txtprod {

          float: left;

          font-size: 14px;

          margin-left: 5px;

          margin-top: 10px;

          margin-right: 0px;

          width: 100px;

          height: 25px;

      }

       

       

      #txtdesc {

          float: left;

          font-size: 14px;

          margin-left: 5px;

          margin-top: 10px;

          margin-right: 5px;

          width: 190px;

          height: 25px;

      }

       

       

      /*  table styling 

      */

       

       

      .tablepos {

          position: relative;

          top: 62px;

      }

      #tabsection {

          width: 400px;

          overflow-x: scroll;

      }

      #tabsection table {

          overflow-y: scroll;

      }

      #tabsection tbody {

          overflow-x: scroll;

          display: block;

          height: 200px;

      }

      #tabsection thead {

          display: table-row;

      }

       

       

      /* Table -only styling below here */

      #tabsection {

          border: 1px solid lightgrey;

      }

      table {

          border-collapse: collapse;

      }

      #p1 {

          width: 75px;

          padding-left: 3px;

      }

      #p2 {

          width: 160px;

          padding-left: 3px;

      }

      #p3 {

          width: 50px;

          padding-left: 3px;

      }

      #p4 {

          width: 50px;

          padding-left: 3px;

      }

      th, td {

          border: 1px solid gray;

      }

      th {

          background-color: lightgrey;

          border-width: 1px;

          height: 20px;

      }

      td {

          border-width: 1px;

      }

      tr:first-child td {

          border-top-width: 0;

      }

      tr:nth-child(even) {

          background-color: #eee;

      }

       

       

      /* footer  */

      #botdiv {

          position: fixed;

          bottom: 0px;

          left: 0px;

          width: 100%;

          background-color: blue;

          color: white;

          font-size: 20px;

          margin: 0px;

          padding: 0px ;

          line-height: 40px;

      }

      h3#foottext {

          margin: 5px 10px 5px 30px;

      }

        • 1. Re: Phonegap multi page
          zacharyr30798184 Level 1

          You'll need jquery and jquery mobile to use multi-page in a single document like you have setup unless you decide to go with another framework. As far as the errors, my guess would have something to do with the callbacks from the db requests. I've never used this particular api before, but that would be where I would start.