CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolsindexeddb
ryze halberd
ryze halberd

Reputation: 137

IndexedDB add entry shows as successful, but doesn't show up in chrome dev tools

I'm trying to write a simple JavaScript application to add an entry to indexedDB from a web form. For some reason, the add request shows as successful, but I can't see anything in the chrome developer window, even if I refresh the database. Here's the javascript that I'm writing.

$(document).ready(function() {
    $("#addcsub").click(function(e){
        e.preventDefault();
        //add the contact
        addContact($("#clast").val(), $("#cfirst").val(), $("#cphone").val(), $("#cemail").val());
    });
});

document.addEventListener("DOMContentLoaded", function() {
    if(!"indexedDB" in window){
        return;
    }
    var openRequest = indexedDB.open("theDatabase",1);
    openRequest.onupgradeneeded = function(e) {
        var thisDB = e.target.result;

        if(!thisDB.objectStoreNames.contains("contacts")) {
            var objectStore = thisDB.createObjectStore("contacts", {keyPath:"contactid",autoIncrement: true});
            objectStore.createIndex("contactid","contactid",{unique:true});
            objectStore.createIndex("lastname","lastname", {unique:false});
            objectStore.createIndex("firstname","firstname", {unique:false});
            objectStore.createIndex("phone","phone", {unique:false});
            objectStore.createIndex("email","email", {unique:false});
        }
    }
    openRequest.onsuccess = function(e) {
        db = e.target.result;
    }
    openRequest.onerror = function(e) {
        console.log("Open Request Error");
    }
},false);

function addContact(last,first,phone,email){
    var transaction = db.transaction(["contacts"],"readwrite");
    var store = transaction.objectStore("contacts");
    var tc = {
        lastname:last,
        firstname:first,
        phone:phone,
        email:email
    }
    var request = store.add(tc);

    request.onerror = function(e){
        console.error(request.error);
    }
    request.onsuccess = function(e){ //this runs when I hit submit
        console.log("Add Successful"); //this appears in the console
    }

}

Update: I did some poking around and realized that my add transaction is aborting with an error of DOMexception code 22.

Update 2: for some reason, it works on other computers, just not my laptop.

Upvotes: 0

Views: 1353

Answers (1)

Malisbad
Malisbad

Reputation: 189

I had issues with the devtools gui with indexedDb. You can try pulling the record through the console and see if it is there, but in the past I've had to close devtools and open it again for it to refresh.

Upvotes: 1

Related Questions