title: IndexedDB w/ two transactions: 1 read then 1 update
body: <p>With IndexedDB, I can't seem to create a second transaction to my objectstore (just a list of ToDo's) once I've already created a transaction to read and display the data. I don't get an error on the line that tries to create the second transaction, but nothing happens and code stops execution.</p>
  
  <p>This part that retrieves and displays my data runs fine:</p>
  
  <pre><code>var trans;
  var ostore;
  var db;
  var reqdb = window.indexedDB.open("ToDoApp", 2);
  
  
  reqdb.onupgradeneeded = function (event) {
      console.log("running onupgradeneeded");
      var myDB = event.target.result;
      if (!myDB.objectStoreNames.contains("todos")) {
          myDB.createObjectStore("todos", { keyPath: "ToDoTitle" });
      }
  };
  
  
  reqdb.onsuccess = function (event) {
      db = event.target.result;
      trans = db.transaction(["todos"], "readonly");
      ostore = trans.objectStore("todos");
      var req = ostore.get("TEST IDB 2");   
      $("#btnSave").click(function () {
          UpdateToDo();
      });
      req.onerror = function (event) {
          alert("error");
      };
      req.onsuccess = function (event) {
          $("#ToDoTitle").val(req.result.ToDoTitle);
      };
  };
  </code></pre>
  
  <p>This gets and displays things just fine. But notice the UpdateToDo() function that gets set with the onclick event so I can actually UPDATE my data.</p>
  
  <pre><code>function UpdateToDo(event) {
      alert("1"); 
      var newtransaction = db.transaction(["todos"], "readwrite");
      alert("2");
      var newstore = newtransaction.objectStore("todos");
  
          newstore.openCursor().onsuccess = function (event) {
              const cursor = event.target.result;
              if (cursor) {
                  if (cursor.value.ToDoTitle == 'TEST IDB 2') {       
                      const updateData = cursor.value;
                      updateData.ToDoCategory = 1; // hard coding for now
                      var requpdate = cursor.update(updateData);
                      requpdate.onsuccess = function () {
                          console.log('Updated');
                      };
                      requpdate.onerror = function () {
                          console.log('Error');
                      }
                  };
                  cursor.continue();
              } else {
                  console.log('Cursor error.');
              }
          };
  }
  </code></pre>
  
  <p>This first alert fires, but the second one doesn't. I assumed that because the first callback that create the first transaction was returned, that transaction was closed, but it still appears to be blocking me from creating this transaction. If I take out the first transaction COMPLETELY, the second transaction gets created and the second alert runs... then from there I can create a cursor and update the data.</p>
  
  <p>I tried making the first transaction and object stores as global variables, but that doesn't work either. </p>
  
  <p>It seems kind of ridiculous to only let you perform one transaction per page. How else am I suppose to initially load data and THEN allow the user to update it? Am I missing something?</p>