indexeddb de javascript , no consigo introducir datos desde div me estoy volviendo loca, no consigo dar con el problema, me dicen que "el problema lo tiengo con el retorno de datos y el formulario de envío del pedido. Están desconectados, si pones alerts para ver donde pierdes los valores de los datos lo verás. (esto no tengo ni idea de como hacerlo)
Es decir, haces perfecto el drag&drop, y tienes el valor del precio almacenado, pero eso no esta conectado de ninguna forma a recoger los datos en la base de datos.
me explico,
he creado un carrito de compra donde los elementos a comprar se arrastran (drag and drop) y los datos se van exponiendo en un div,y el total de la compra se pone en otro div :
Código:
como veis el imput al hacer clik llama a addproducto() que es donde recojo los datos de la indexeddb .<section id="cestacompleta" >
<div name="cesta" id="cesta" >cesta </div>
<label>Pedido</label>
<div name="Parcial" id="Parcial"></div></br>
<label>total</label>
<div name="Total" id="Total" ></div><label>€</label>
<label name="pedidorealizado" id="pedidorealizado">hacer pedido</label></br>
<input type="submit" id="enviar" onclick="addproducto()"></br>
<div id="mostrarMapa" style="width: 250px; height: 150px;"> </div>
</section>
el drag&drop es .
Código:
de este js deberia recoger en indexeddb el valor que hay en los dos div, no consigo hacerlo, cuando mando que se efectue el addproduct medice que es null . var elem_destino;
var precioTotal=0;
var esarrastrable
function comenzardrag(){
var imagenes=document.querySelectorAll("#carritocompra img");
for (var i=0;i<imagenes.length;i++){
imagenes [i].addEventListener("dragstart",comenzando_arrastrar,false);
}
elem_destino=document.getElementById("cesta");
elem_destino.addEventListener("dragenter",function(e){e.preventDefault()},false);
elem_destino.addEventListener("dragover",function(e){e.preventDefault()},false);
elem_destino.addEventListener("drop",soltado,false);
}
function comenzando_arrastrar(e){
var elemento=e.target;
e.dataTransfer.setData("Text",elemento.getAttribute("id"));
}
function soltado(e){
//esarrastrable=la id del objeto que se está arrastrando (deporte)
esarrastrable = e.dataTransfer.getData("Text");
//Crear una referencia la imagen que se arrastra
deporte=document.getElementById(esarrastrable)
deporte.style.opacity=1;
var clon=deporte.cloneNode(true);
//Añadir, en el DOM, a la rama del objeto contenedor (la div de la cesta) la imagen
e.target.appendChild(clon);
//precio=el contenido del atributo data-precio de la imagen que se está arrastrando
precio=deporte.getAttribute('data-precio');
//Crear una referencia de la capa (div) donde estarán los datos parciales
var miParcial=document.getElementById('Parcial');
//Crear una referencia de la capa (div) donde estarán el dato del total
var miTotal=document.getElementById('Total');
//Agregar contenido HTML a la capa "Parcial", es decir, los detalles de la compra
miParcial.innerHTML = miParcial.innerHTML + esarrastrable +": "+ precio + '<br/>';
//Calcular el precio total sumando el valor acumulado de la variable global: preciototal
//al precio que se almacena en el atributo 'data-precio'
//parseInt (valorTexto), convierte la cadena valorTexto en numérico
precioTotal=precioTotal+parseInt(precio);
//Agregar contenido HTML a la capa "Total"
miTotal.innerHTML= precioTotal;
//Valor que devuelve la función
return false;
}
window.addEventListener("load",comenzardrag, false)
la base de indexeddb es :
Código:
alguno sabria explicarme donde debo llamar a la indexeddb o como solucionar que los div manden la informacion a la indexeddb? var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
function startDB() {
dataBase = indexedDB.open("carrito", 1);
dataBase.onupgradeneeded = function (e) {
active = dataBase.result;
carrito = active.createObjectStore("people", { keyPath : 'id', autoIncrement : true });
carrito.createIndex('by_name', 'name', { unique : false });
carrito.createIndex('by_dni', 'dni', { unique : true });
carrito = active.createObjectStore("products", { keyPath : 'id', autoIncrement : true });
carrito.createIndex('by_product', 'product', { unique : false });
carrito.createIndex('by_price', 'price', { unique : false });
};
dataBase.onsuccess = function (e) {
alert('Base de datos cargada correctamente');
};
dataBase.onerror = function (e) {
alert('Error cargando la base de datos');
};
}
function add() {
var active = dataBase.result;
var data = active.transaction(["people"], "readwrite");
var carrito = data.objectStore("people");
//Ahora es el momento de agregar un objeto a nuestro almacén en IndexedDB. La sintaxis es muy
//sencilla:
var request = carrito.put({
email :document.querySelector("#email").value,
name: document.querySelector("#name").value,
surname: document.querySelector("#surname").value
});
data.oncomplete = function (e) {
document.querySelector("#email").value = '';
document.querySelector("#name").value = '';
document.querySelector("#surname").value = '';
alert('Objeto agregado correctamente');
};
}
function addproducto() {
var active = dataBase.result;
var data = active.transaction(["products"], "readwrite");
var carrito = data.objectStore("products");
//Ahora es el momento de agregar un objeto a nuestro almacén en IndexedDB. La sintaxis es muy
//sencilla:
var request = carrito.put({
Pedido :document.querySelector("#Parcial").value,
gasto: document.querySelector("#Total").value
});
data.oncomplete = function (e) {
Pedido :document.querySelector("#Parcial").value="";
gasto: document.querySelector("#Total").value = '';
alert('Objeto agregado correctamente');
};
}
window.addEventListener("load",startDB,false);
por favor , os agradeceria inmensamente vuestra sabiduria, yo no consigo dar con el problema.
un saludo
