The operation mutation was attempted in a READ_ONLY transaction

2

Why can not I add or delete id 1 or id 2 in code?

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>IndexedDB</title>
        <script type="text/javascript">
            var indexedDB = window.indexedDB || window.webkitIndexedDB ||
                            window.mozIndexedDB || window.msIndexedDB;
            var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
            //declaration db
            var db;
            (function () {
                var peopleData = [
                    { name: "John Dow", email: "[email protected]" },
                    { name: "Don Dow", email: "[email protected]" }
                ];

                function initDb() {
                    //open the bank
                    var request = indexedDB.open("PeopleDB", 1);
                    request.onsuccess = function (evt) {
                        db = request.result;
                    };
                    //if bank not open
                    request.onerror = function (evt) {
                       // Função genérica para tratar os erros de todos os requests desse banco!
                        console.log("IndexedDB error: " + evt.target.errorCode);
                    };


                    // Este evento é implementado somente em navegadores mais recentes
                    request.onupgradeneeded = function (evt) {
                       // cria um objectStore para esse banco
                        var objectStore = evt.currentTarget.result.createObjectStore(
                                 "people", { keyPath: "id", autoIncrement: true });

                        objectStore.createIndex("name", "name", { unique: false });
                        objectStore.createIndex("email", "email", { unique: true });

                        for (i in peopleData) {
                            objectStore.add(peopleData[i]);
                        }
                    };
                }

                function contentLoaded() {
                    initDb();
                    var btnAdd = document.getElementById("btnAdd");
                    var btnDelete = document.getElementById("btnDelete");
                    var btnPrint = document.getElementById("btnPrint");

                    btnAdd.addEventListener("click", function () {
                        var name = document.getElementById("txtName").value;
                        var email = document.getElementById("txtEmail").value;

                        var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore("people");
                        var request = objectStore.add({ name:name, email: email });
                        request.onsuccess = function (evt) {
                            // do something after the add succeeded
                            console.log("done with insert");
                        };
                    }, false);

                    btnDelete.addEventListener("click", function () {
                        var id = document.getElementById("txtID").value;

                        var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore("people");
                        var request = objectStore.delete(id);
                        request.onsuccess = function(evt) {
                            // It's gone!
                        };
                    }, false);

                    btnPrint.addEventListener("click", function () {
                        var output = document.getElementById("printOutput");
                        output.textContent = "";

                        var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
                        var objectStore = transaction.objectStore("people");

                        var request = objectStore.openCursor();
                        request.onsuccess = function(evt) {
                            var cursor = evt.target.result;
                            if (cursor) {
                                output.textContent += "id: " + cursor.key +
                                            " is " + cursor.value.name + " ";
                                cursor.continue();
                            }
                            else {
                                console.log("No more entries!");
                            }
                        };
                    }, false);
                }

                window.addEventListener("DOMContentLoaded", contentLoaded, false);
        })();
        </script>
    </head>
    <body>
        <div id="container">
            <label for="txtName">
                Name:
            </label>
            <input type="text" id="txtName" name="txtName" />
            <br />
            <label for="txtEmail">
                Email:
            </label>
            <input type="email" id="txtEmail" name="txtEmail" />
            <br />
            <input type="button" id="btnAdd" value="Add Record" />
            <br />
            <label for="txtID">
                ID:
            </label>
            <input type="text" id="txtID" name="txtID" />
            <br />
            <input type="button" id="btnDelete" value="Delete Record" />
            <br />
            <input type="button" id="btnPrint" value="Print objectStore" />
            <br />
            <output id="printOutput">
            </output>
        </div>
    </body>
    </html>
    
asked by anonymous 31.03.2018 / 03:33

1 answer

0

2 things to solve in your code:

The parameter IDBTransaction.READ_WRITE should be "readwrite" . Example:

var transaction = db.transaction("people", "readwrite");

Where you have IDBTransaction.READ_WRITE change to "readwrite" .

Another problem is in the function of deleting an entry. The value id in the line ...

var request = objectStore.delete(id);

... must be a number value. When you get the value in ...

var id = document.getElementById("txtID").value;

... it comes as string . You can convert numbers like this:

var id = Number(document.getElementById("txtID").value);

Documentation

    
31.03.2018 / 04:06