Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/04/2014, 06:18
Avatar de zibor
zibor
 
Fecha de Ingreso: diciembre-2006
Mensajes: 80
Antigüedad: 17 años, 4 meses
Puntos: 1
Pregunta indexedDB con javascript

Buenas tardes.
Estoy liado aprendiendo a utilizar indexedDB en un proyecto en javascript.

Surfeando por internet encontré muchos manuales/tutoriales de como utilizarlo a groso modo. Realicé un script el cual creaba o abría la "bd", añadía y mostraba los resultados. Funciones básicas, escritas secuencialmente sin interrupciones alguna, es decir al ejecutarse hacia todos esas acciones.

Código:
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
if (!window.indexedDB) {
     window.alert("Tu navegador no soporta IndexedDB.");
}
var openRequest = indexedDB.open("pruebaBD",1);

openRequest.onupgradeneeded = function(e) { 
// cuando es necesario crear las tablas de la base de datos
    var thisDB = e.target.result;
    if(!thisDB.objectStoreNames.contains("documents")) {
            var os = thisDB.createObjectStore("documents", {keyPath: "id",autoIncrement:true}); // crear tabla
    }
};
 
openRequest.onsuccess = function(e) {
     // se ha creado con exito
    var db = e.target.result;
    var transaction = db.transaction(["documents"],"readwrite");
    var store = transaction.objectStore("documents");

    var docs = {
        title:"title",
        text:"text",
        date:new Date().getTime(),
        update:"update"
    };

    var request = store.add(docs);

    request.onerror = function(e) {
        console.log("add doc to Database error: ", e.target.errorCode);
    };

    request.onsuccess = function(e) {
        var transaction = db.transaction(["documents"],"readonly");
        var store = transaction.objectStore("documents");
        var request = store.openCursor();

        request.onsuccess = function(event) {
            // Esto es un hack para versiones antiguas de Firefox (older versions than 6)
            var cursor = request.result || event.result;
            // Cuando el cursor esté a nulo es que hemos terminado la enumeración, por lo que
            // actualizamos el DOM
            if (!cursor) {
              $("#c").html("<div></div>");
              return;
            }
            $("body").append("key: " + cursor.value.id + " => Todo text: " + cursor.value.text + "");
            console.log("<div>key: " + cursor.value.id + " => Todo text: " + cursor.value.text + "</div>");
            cursor.continue();
        };
    };
};	
 
openRequest.onerror = function(e) {
     // ha ocurrido algún error
    console.log("Database error: ", e.target.errorCode);
};
Evidentemente ese script es un ejemplo de prueba para quedarme con el funcionamiento.
Ahora la idea es modular mediante objetos. Cuando inicio el proyecto se ejecuta al principio la creación o apertura de indexeddb, hasta ahí todo correcto.

Código:
var database = {
    init : function(){
        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
        window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
        window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
        if (!window.indexedDB) {
             window.alert("Tu navegador no soporta IndexedDB.");
        }
        openRequest = indexedDB.open("BD1",1);

        openRequest.onupgradeneeded = function(e) { // cuando es necesario crear las tablas de la base de datos
            var thisDB = e.target.result;
            if(!thisDB.objectStoreNames.contains("documents")) {
                    var os = thisDB.createObjectStore("documents", {keyPath: "id",autoIncrement:true}); // crear tabla
            }
        };
    },
    addDoc : function(_title,_text,_date){
        openRequest.onsuccess = function(e) {
            // se ha creado con exito
           var db = e.target.result;
           var transaction = db.transaction(["documents"],"readwrite");
           var store = transaction.objectStore("documents");
           var objValues = {
                title : _title,
                content : _text,
                date : _date,
                update : "-"
           };

           var request = store.add(objValues);

           request.onerror = function(e) {
               console.log("add doc to Database error: ", e.target.errorCode);
           };

           request.onsuccess = function(e) {
               console.log("add ok");
           };
       };
       openRequest.onerror = function(e) {
             // ha ocurrido algún error
            console.log("Database error: ", e.target.errorCode);
        };
    }
};
database.init();
La idea es que con un formulario, el cliente rellene unos datos y cuando dichos datos estén listos, mandarlos "database.addDoc();".
Todos los datos son mandados correctamente desde el formulario, e incluso la conexión establecida con indexdb al crearla como variable global parece que también me lo manda correctamente.

El problema me surge al interpretar addDoc del objeto database, que entra en dicho apartado, pero no me ejecuta "request.onsuccess = function..." que es la primera linea. Antes de dicha linea he comprobado que los datos que se mandan son correctos.

Alguna idea de que hago mal? algún fallo de diseño?

Cualquier ayuda será bienvenida.
Gracias.
__________________
Picando código...!!!

Última edición por zibor; 03/04/2014 a las 07:01