CODEWITHSUNDEEP
javascripthtmlindexeddb
Some Guy Really
Some Guy Really

Reputation: 539

onsuccess and oncomplete call back is not working for indexedDb add transaction

I am trying to have a function in the onsuccess callback for IndexedDb add transaction, but for some reason the onsuccess callback is never called. I basically tried to add a movie object to the IndexedDb and in the callback I try to display all the movies in the indexedDb by iterating cursor.
I hope that the newly added movie will also be displayed. But the callback is failing. Below is my code. Could someone please let me know what is the problem?

var movieName=document.getElementById('movieInput').value;
var movieDataToStore = [{ movieid: "5", name: movieName, runtime:"60"}];
var request = indexedDB.open("movies", 1);
request.onsuccess = function(event) {
    db = event.target.result;
    //var transaction = window.db.transaction(["movies"], "readwrite");
    //alert(db.transaction("movies").objectStore("movies").add(null));
    var requestDataadd=window.db.transaction(["movies"],"readwrite").objectStore("movies").add(movieDataToStore[0]);
    requestDataadd.onsuccess = function(event) {
        window.db.transaction("movies").objectStore("movies").openCursor().onsuccess = function(event) {
            var cursor = event.target.result;
            if (cursor) {
                alert("CURSOR: movie: " + cursor.key + " has name " + cursor.value.name);
                cursor.continue();
            } else {//writeLog("CURSOR: No more entries!");
                alert("Cursor at the Load Button unabe to open");
            }
        };
    };
};

Upvotes: 2

Views: 4725

Answers (2)

Kyaw Tun
Kyaw Tun

Reputation: 13131

You are using two transactions. Since the second transaction is created before the first is completed, both of them are getting snapshot of initial state.

You have to reuse the first transaction or wait until it is completed to start second transaction. Here is reusing the transaction:

var tx = window.db.transaction(["movies"],"readwrite");
var requestDataadd = tx.objectStore("movies").add(movieDataToStore[0]);
requestDataadd.onsuccess = function(event) {
    tx.objectStore("movies").openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            alert("CURSOR: movie: " + cursor.key + " has name " + cursor.value.name);
            cursor.continue();
        } else {//writeLog("CURSOR: No more entries!");
            alert("Cursor at the Load Button unabe to open");
        }
    };
};

Upvotes: 3

Myrne Stol
Myrne Stol

Reputation: 11438

Are you getting the alert "Cursor at the Load Button unabe to open" ?

On first glance, I think the problem would be that the requestDataadd request fails because you already have inserted this object once before (successfully), and so you get a duplicate key error. But you don't have an onerror listener defined for the requestDataadd request.

However, that can't be the case if the onsuccess listener of requestDataadd actually is called (and you get an alert).

I also see you don't have an onerror listener defined for the openCursor request. You might want to change that to get more insight. Generally, you should always define both onerror and onsuccess handlers.

Upvotes: 0

Related Questions