indexDB not displaying new entires in Chrome

[MakukoFFM]

Im using the indexDB API with an HTML5 form. For some reason when I add a new entry into it, it display right away in Firefox but in Chrome is do not show until I refresh the page. JS: \[code\]var mainForm, fName, lName, uName, pass, email, dob, phone, bio, nl, terms, school, gender, save, reset, db;function startDB(){ mainForm = document.getElementById('mainForm'); fname = document.getElementById('fName'); lName = document.getElementById('lName'); users = document.getElementById('uName'); pass = document.getElementById('password'); email = document.getElementById('email'); dob = document.getElementById('dob'); phone = document.getElementById('phone'); bio = document.getElementById('bio'); nl = document.getElementById('newsletter'); terms = document.getElementById('terms'); school = document.getElementById('school'); gender = document.getElementsByName('gender'); save = document.getElementById('save'); reset = document.getElementById('reset'); databox = document.getElementById('databox'); save.addEventListener('click',addObject); //open DB var request = indexedDB.open('macroPlay'); //if fails request.addEventListener('error', showerror); //if succeeds request.addEventListener('success', start); //if !exist, create. request.addEventListener('upgradeneeded', createdb); }function showerror(e){ alert('Error: ' + e.code + ' - ' + e.message);}function start(e){ db = e.target.result; showUsers();// Show all values in the object store}function createdb(e){ var datababase = e.target.result; var myusers = datababase.createObjectStore('users', {keyPath: 'userName'});}function addObject(){ var fName = document.getElementById('fName').value; var lName = document.getElementById('lName').value; var userName = document.getElementById('uName').value; var pass = document.getElementById('password').value; var email = document.getElementById('email').value; var dob = document.getElementById('dob').value; var phone = document.getElementById('phone').value; var bio = document.getElementById('bio').value; var nl = document.getElementById('nl').value; var terms = document.getElementById('terms').value; var school = document.getElementById('school').value; //May need to set a loop to find value of radio var gender; var radios = document.getElementsByName('gender'); for (var i = 0, length = radios.length; i < length; i++) { if (radios.checked) { gender=radios.value; } } //set up transaction var mytransaction = db.transaction(['users'], "readwrite"); //get object store var myusers = mytransaction.objectStore('users'); //Add item var request = myusers.add(new getUser(userName,fName,lName,pass,email,dob,phone,bio,nl,terms,school,gender)); // Show all results. request.addEventListener('success', showUsers); //Reset Form Fields clearForm();}function getUser(userName, fn, ln, pw, em, dob, tel, bio, nl,tm, scl, gender){ this.userName = userName; this.fn = fn; this.ln = ln; this.pw = pw; this.em = em; this.dob = dob; this.tel = tel; this.bio = bio; this.nl = nl; this.tm = tm; this.scl = scl; this.gender = gender;}function showUsers(){ //reset box databox.innerHTML = ''; //set the transaction var mytransaction = db.transaction(['users']); //get object store var myusers = mytransaction.objectStore('users'); //open the cursor and set an order var newcursor = myusers.openCursor(null,"prev"); //show all users on successful load of DB newcursor.addEventListener('success',showUserList);}function showUserList(e){ //var result = e.target.result; //databox.innerHTML = '<div>' + result.id + ' - ' + result.name + ' - ' + result.date + '</div>'; var cursor = e.target.result; // Capture multiple return values as a cursor // Modify the databox to show the results if (cursor){ databox.innerHTML += '<div>' + cursor.value.userName + ' - ' + cursor.value.fn+ ' - ' + cursor.value.ln+ ' - '+ cursor.value.pw+ ' - '+ cursor.value.em+ ' - '+ cursor.value.dob+ ' - '+ cursor.value.tel+ ' - '+ cursor.value.bio+ ' - '+ cursor.value.nl+ ' - '+ cursor.value.tm+ ' - '+ cursor.value.scl+' - '+ cursor.value.gender+ ' <input type="button" onclick="removeobject(\'' + cursor.value.userName + '\')" value="http://stackoverflow.com/questions/15492314/remove"/></div>'; // Add a remove button as inserted HTML cursor.continue(); // Iterates over the cursor }}function removeobject(keyword){ // Confirm the deletion if(confirm('Are you sure?')){ // Set the transaction var mytransaction = db.transaction(['users'], "readwrite"); // Get the object store var mystore = mytransaction.objectStore('users'); // Delete the record with the chosen index var request = mystore.delete(keyword); // If success, show the updated results request.addEventListener('success', showUsers); }}//reset functionsfunction clearForm(){ //Reset form fname = document.getElementById('fName').value=''; lName = document.getElementById('lName').value=''; uName = document.getElementById('uName').value=''; pass = document.getElementById('password').value=''; email = document.getElementById('email').value=''; dob = document.getElementById('dob').value=''; phone = document.getElementById('phone').value=''; bio = document.getElementById('bio').value=''; nl = document.getElementById('nl').value=''; terms = document.getElementById('terms').value=''; school = document.getElementById('school').value=''; gender = document.getElementsByName('gender').value=''; showUserList(); }function reset(){ if(confirm("are you sure?")){ var f = document.getElementById("mainForm"); f.reset(); }}\[/code\]