Mistake with an insert into Web SQL from text input

Viewed 58

so I'm still learning JavaScript and am having an issue with something I am working on. When trying to enter something into two separate text inputs it will only default to the gotError function, nothing is being inserted into the Web SQL and then read back to the list.

The JavaScript:

    function openDb() {
db = openDatabase('DName', '1', 'NameV', 2 * 1024 * 1024);
                   //(Database Name, Version, Display Name, Size )

db.transaction(function (tx) {   
   tx.executeSql("CREATE TABLE IF NOT EXISTS Logs (id unique, person TEXT, place TEXT)"); 

  });
}

document.addEventListener('init', function(event) {
  if(event.target.id == 'mylist') {
    openDb();
    storeItems();
  }
});

function gotError() {
  alert('Something went wrong.');
}

function gotSuccess() {
  storeItems()
}

function storeItems()
{
  db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM Logs", [], listItems, gotError);
  });
}

function listItems(rs)
{
  var output = '';
  var list = document.getElementById('tList');

  for(i = 0; i < rs.rows.length; i++)
  {
    stuff = person && place;
    var row = rs.rows.stuff(i);
    output += "ons-list-item>" + row.stuff +
    "<div class=\"right\"> <ons-button><ons-icon icon=\"trash\"></ons-icon></ons-button></div>" +
    "</ons-list-item>";
  }

  list.innerHTML = output;

}

function addItem() 
{
  var textbox = document.getElementById("person", "place");
  var value = textbox.value;

  db.transaction(function(tx)
  {
    tx.executeSql("INSERT INTO Logs (person,place) VALUES (?,?)", [value], gotSuccess, gotError)
  });

  textbox.value = "";
  fn.load("mylist.html");
}

The HTML:

<template id="mylist.html">
    <ons-page id='mylist'>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          My List
        </div>
        
      </ons-toolbar>
      <div>
      
        <ons-input type="text" class="select-input--underbar" id="person" placeholder="Enter person here . . ."></ons-input>

        <ons-input type="text" class="select-input--underbar" id="place" placeholder="Enter place here . . ."></ons-input>
        
        <ons-button modifier="large" onclick="addItem()">Add Item</ons-button>
     
      </div>
      
      
      
    
      <ons-list id='tList'>
        <ons-list-header>Listed Items:</ons-list-header>
        <ons-list-item>

        </ons-list-item>
      </ons-list>
     
      
    </ons-page>
  </template>

    </ons-page>
  </template>

Originally the code was supposed to insert have two text inputs that would need to be filled out, a button would be pressed to add them to the list, then display the db contents for person and place. Then each time the page was opened or closed it would re-read the contents of the db and redisplay them on the list.

1 Answers

This is an error:

    stuff = person && place;

Because:

  • You are declaring stuff as a global variable (error in strict mode).
  • person and place are undeclared

Probably this error is being catch'ed and then gotError is executed. Probably you would have seen that if declared the function with an argument:

function gotError(error) {
  console.error('Something went wrong:', error);
}
Related