2

Buenas tardes gente,

Antes que nada presentarme me llamo Aarón y estoy con un proyecto de un desarrollo de una App Android utilizando Intel xdk,después elegí para la base de datos IndexedDb.

Me surgió un problema a la hora de borrar los datos que inserto en la base de datos,la inserción si la hago bien pero el borrado no hace nada.

Voy a publicar aquí mi código para ver si la sintaxis es correcta:

<!DOCTYPE html>
<html>
<head>
<title>Guasar análisis de progresión lineal</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
    /* following two viewport lines are equivalent to meta viewport statement above, and is needed for Windows */
    /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */

    @-ms-viewport {
        width: 100vw;
        min-zoom: 100%;
        zoom: 100%;
    }

    @viewport {
        width: 100vw;
        min-zoom: 100% zoom: 100%;
    }

    @-ms-viewport {
        user-zoom: fixed;
        min-zoom: 100%;
    }

    @viewport {
        user-zoom: fixed;
        min-zoom: 100%;
    }
    /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
  </style>
  <!-- See explanation at the bottom of this file for info regarding placement of JS libraries. -->
  <!-- These library references (below) are just examples to give you the general idea... -->
  <!-- <script src="lib/mc/hammer.js"></script> -->
  <!-- <script src="lib/ft/fastclick.js"></script> -->
  <!-- <script src="lib/jq/jquery.js"></script> debajo css -->
  <!-- Aquí definimos el tipo de base de datos -->
  <script type="text/javascript">

    var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //crear objeto de la base de datos para las distintos navegadores
        var dataBase = null;//variable global

        function startDB() { //crea la base de datos IndexedDb

            dataBase = indexedDB.open("object", 1); //nombre de la base de datos y versión

            dataBase.onupgradeneeded = function (e) { // 

                var active = dataBase.result; //conector
                var object = active.createObjectStore("people", {keyPath: 'id', autoIncrement: true});//creación del objeto//keyPath es la clave primaria
                object.createIndex('by_name', 'name', {unique: false});
                object.createIndex('by_dni', 'dni', {unique: true});

            };

            dataBase.onsuccess = function (e) {
                //    alert('Database loaded');
                loadAll();//cuando se carga la base de datos queremos mostrar todos los registros
            };

            dataBase.onerror = function (e) {
                alert('Error al cargar la base de datos');
            };

        }

        function add() {
            var active = dataBase.result; //conector con la base de datos
            var data = active.transaction(["people"], "readwrite"); //array ,modo de transacción
            var object = data.objectStore("people");

            var request = object.put({
                dni: document.querySelector("#dni").value,
                name: document.querySelector("#name").value,
                surname: document.querySelector("#surname").value
            });

            request.onerror = function (e) {
                alert(request.error.name + '\n\n' + request.error.message);
            };

            data.oncomplete = function (e) { 

                document.querySelector('#dni').value = '';
                document.querySelector('#name').value = '';
                document.querySelector('#surname').value = '';
                alert('Object successfully added');
                loadAll();
            };

        }

          function delet() {

            var active = dataBase.result;
            var data = active.transaction(["people"],"readwrite");
            var object = data.objectStore("people");    

              var request = object.delete(document.querySelector("#dni_bo").value );

                // comprobar el error
              request.onerror = function (e) {
               alert('ERROR AL BORRAR\n\n' + request.error.name + '\n\n' + request.error.message);
              };
        }

        function load(id) {
            var active = dataBase.result;
            var data = active.transaction(["people"], "readonly");
            var object = data.objectStore("people");

            var request = object.get(parseInt(id));

            request.onsuccess = function () {
                var result = request.result;

                if (result !== undefined) {
                    alert("ID: " + result.id + "\n\
                           DNI " + result.dni + "\n\
                           Name: " + result.name + "\n\
                           Surname: " + result.surname);
                }
            };
        }

        function loadByDni(dni) {
            var active = dataBase.result;
            var data = active.transaction(["people"], "readonly");
            var object = data.objectStore("people");
            var index = object.index("by_dni");
            var request = index.get(String(dni));

            request.onsuccess = function () {
                var result = request.result;

                if (result !== undefined) {
                    alert("ID: " + result.id + "\n\
                           DNI " + result.dni + "\n\
                           Name: " + result.name + "\n\
                           Surname: " + result.surname);
                }
            };
        }

        function loadAll() {//carga todos los objetos del almacen
            var active = dataBase.result;
            var data = active.transaction(["people"], "readonly");//la transición para recibir datos de la base de datos
            var object = data.objectStore("people");//

            var elements = [];

            object.openCursor().onsuccess = function (e) {//puntero al inicio del almacen

                var result = e.target.result;

                if (result === null) { //llegamos al final
                    return;
                }

                elements.push(result.value);
                result.continue();

            };

            data.oncomplete = function () {

                var outerHTML = '';

                for (var key in elements) {

                    outerHTML += '\n\
                    <tr>\n\
                        <td>' + elements[key].dni + '</td>\n\
                        <td>' + elements[key].name + '</td>\n\
                        <td>\n\
                            <button type="button" onclick="load(' + elements[key].id + ')">Details</button>\n\
                            <button type="button" onclick="loadByDni(' + elements[key].dni + ')">Details DNI</button>\n\
                        </td>\n\
                    </tr>';

                }

                elements = [];
                document.querySelector("#elementsList").innerHTML = outerHTML;
            };
        }

        function loadAllByName() {
            var active = dataBase.result;
            var data = active.transaction(["people"], "readonly");
            var object = data.objectStore("people");
            var index = object.index("by_name");

            var elements = [];

            index.openCursor().onsuccess = function (e) {

                var result = e.target.result;

                if (result === null) {
                    return;
                }

                elements.push(result.value);
                result.continue();

            };

            data.oncomplete = function () {

                var outerHTML = '';

                for (var key in elements) {

                    outerHTML += '\n\
                    <tr>\n\
                        <td>' + elements[key].dni + '</td>\n\
                        <td>' + elements[key].name + '</td>\n\
                        <td>\n\
                            <button type="button" onclick="load(' + elements[key].id + ')">Details</button>\n\
                            <button type="button" onclick="loadByDni(' + elements[key].dni + ')">Details DNI</button>\n\
                        </td>\n\
                    </tr>';

                }

                elements = [];
                document.querySelector("#elementsList").innerHTML = outerHTML;
            };
        }

    </script>  
</head>

<body onload="startDB();"> 

<link rel="stylesheet" href="css/app.css">

<script src="cordova.js"></script>
<!-- "Phantom" cordova.js required for projects that use plugins --> 
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script src="js/util.js"></script>

<h1>Bienvenido a Guasar</h1>
<div>
 <h2>¿Que tipo quieres?</h2> 
 <button onclick="hideBanner()">Humphrey</button>
 <!--<button onclick="showBanner()">Octupus</button>    

<button onclick="removeBanner()">Remove Banner Ad</button>
<button onclick="createInterstitial()">Create Interstitial Ad</button> 
<button onclick="showInterstitial()">Show Interstitial Ad</button>-->
</div>
<div class="align-center">
<h2>GUARDAR REGISTROS</h2>
    <input type="text" id="dni" placeholder="Nº Historia" />
    <input type="text" id="name" placeholder="Nombre" />
    <input type="text" id="surname" placeholder="Apellidos" />
    <button type="button" onclick="add();">Guardar</button>  
    <input type="text" id="id" placeholder="id"/>
    <button type="button" onclick="delet();">Borrar</button>
    <!--Función que busca datos sobre un dni almacenado de la base de datos 
    <input type="text" id="dni" placeholder="DNI"/>
    <!-- <button type="button" onclick="loadByDni();">Buscar</button> -->
    <!--Botón que vuelve hacia atrás-->
    <button onclick="self.location='prueba.html'">DATOS</button>
    <hr>
  </div>
 </body>     
</html>

1
  • ¿Cómo se crea la base de datos?
    – Alvaro Montoro
    el 8 mar. 2016 a las 14:02

1 respuesta 1

1

El fallo: no estás pasando la clave adecuado para identificar el registro que quieres borrar en "people". Según la documentación de la API de IndexedDB, el método delete() toma como parámetro la clave del registro a borrar, pero en el código de arriba se le está pasando el dni (y en el código original se le pasaba el registro completo):

var request = object.delete(document.querySelector("#dni_bo").value );

Que por cierto es incorrecto, porque le cambiaste el ID al campo de texto de "dni_bo" a "id", así que incluso si el "dni" fuera la clave (que no lo es), esa línea de código (y el borrado) fallaría.

Al crear "people" defines "id" como clave primaria, entonces el borrado debería hacerse pasando el valor del "id". Un dato importante: id es un entero (int), entonces para que el borrado se realice de manera correcta, debe pasarse el valor como entero y no como string. Si no usas parseInt, el valor se considera string y el borrado falla.

Si el campo de texto que utilizas para borrar el registro contiene el "id", esta función de borrado funciona ahora sin problemas:

function delet() {

    var active = dataBase.result;
    var data = active.transaction(["people"],"readwrite");
    var object = data.objectStore("people");    

    var request = object.delete( parseInt( document.querySelector("#id").value ) );

}

Si en cambio lo que contiene el campo de texto es el dni del usuario, entonces el borrado debe hacerse en dos pasos:

  1. Buscar el registro que tenga ese dni
  2. Borrar el registro con el id encontrado

Y el código de la función de borrado sería así:

function delet() {

    var active = dataBase.result;
    var data = active.transaction(["people"],"readwrite");
    var object = data.objectStore("people");    

    // primero buscamos el registro a partir del dni
    var index = object.index("by_dni");
    var request = index.get(document.querySelector("#dni").value);

    // cuando se encuentre el registro, lo borramos
    request.onsuccess = function () {
        var result = request.result;
        object.delete(result.id);
    };
}

HTML:

<h2>BORRAR REGISTROS POR DNI</h2>
<input type="text" id="dni" placeholder="dni"/>
<button type="button" onclick="delet();">Borrar x DNI</button>
10
  • Muchas gracias Alvaro por tu respuestas yo creo que el error es que le estoy pasando mal el parámetro para eliminar el objeto del almacén.Aquí te adjunto una captura de como se guarda en la base de datos cada objeto: Imagen base de datos Y además te adjunto el código entero porque tengo dudas de como eliminar los registros de la base de datos en Indexeddb lo puse en la pregunta inicial el código entero. MUCHAS GRACIAS DE NUEVO. Un saludo. Aarón Vera
    – Aaron VC
    el 9 mar. 2016 a las 11:52
  • Me fije ahora que debo pasar el keypath que en este caso es id y no dni pero sigue sin funcionar nose porque cuando le doy al botón de borrar se queda presionado y no hace nada ni salta ningún error te colge arriba el código completo.
    – Aaron VC
    el 9 mar. 2016 a las 13:01
  • @AaronVC Sí, modifiqué la respuesta para reflejar eso. Ahora el borrado funciona para mí
    – Alvaro Montoro
    el 9 mar. 2016 a las 13:02
  • Muchas gracias Alvaro eres un máquina.Funciona perfecto la funciona borrar por id. La otra función que me pasaste para borrar por dni no me va, te modifique debajo de la función que me pasastes para que veas como recojo el DNI.He probado poniendo el campo dni y by_dni y no va el botón de borrar.
    – Aaron VC
    el 9 mar. 2016 a las 17:41
  • @AaronVC en la edición que sugeriste (la rechacé), el campo de texto tiene un id "dni", pero mi función está escrita para un campo con id "id". cámbia el selector en var request = index.get(document.querySelector("#id").value); por var request = index.get(document.querySelector("#dni").value); y debería funcionar
    – Alvaro Montoro
    el 9 mar. 2016 a las 17:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.