11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Disparition bouton sur Chrome après clic

Bonjour,

j'utilise l'API IndexedDb pour stockage des données dans le navigateur.
Pour faire des tests, j'ai créé 3 boutons : add, readAll, delete.
Add ajoute une ligne d'info de plus (écrit en dur dans le code)
ReadAll lit toutes les lignes d'infos
Delete supprime la ligne correspondante à l'id saisi dans le champ id.
(NB: les autres champs ne servent pas dans le code ci dessous)
Cela fonctionne bien sur firefox 22 et iE10.

Mais sur Chrome 28, la suppression ne fonctionne pas. Lorsqu'on clique sur le bouton delete, le bouton disparait de l'écran et la suppression n'est pas effectuée.

Une idée sur la raison de ce problème sur Chrome ?

Voici le code de la page (à exécuter sur un serveur (ex: wamp) pour tester)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IndexedDb Demo | onlyWebPro.com</title>
<script type="text/javascript">
//prefixes of implementation that we want to test
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
//prefixes of window.IDB objects
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
 

var customerData = [
  { name: "Bill", age: 35, email: "bill@company.com" },
  { name: "Donna", age: 32, email: "donna@home.org" }
];
 //}
 
 
 
var db;
var request = window.indexedDB.open("newDatabase", 1);
 
request.onerror = function(event) {
  console.log("error: ");
};
 
request.onsuccess = function(event) {
  db = request.result;
  console.log("success: "+ db);
  
};

 
request.onupgradeneeded = function(event) {
        var db = event.target.result;
		var objectStore = db.createObjectStore("customers", {keyPath: "id",  autoIncrement: true});
		objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("email", "email", { unique: true });
        for (var i in customerData) {
                objectStore.add(customerData[i]);       
        }
}

/**
   * @param {string} store_name
   * @param {string} mode either "readonly" or "readwrite"
   */
  function getObjectStore(store_name, mode) {
    var tx = db.transaction(store_name, mode);
    return tx.objectStore(store_name);
  }

 
 
function readAll() {
        var objectStore = db.transaction("customers").objectStore("customers");
  
        objectStore.openCursor().onsuccess = function(event) {
          var cursor = event.target.result;
          if (cursor) {
                alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                cursor.continue();
          }
          else {
                alert("No more entries!");
          }
        };      
}
 
function add() {
        var request = db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .add({ name: "Kenny", age: 19, email: "kenny@planet.org" });
                                 
        request.onsuccess = function(event) {
                alert("Kenny has been added to your database.");
        };
         
        request.onerror = function(event) {
                alert("Unable to add data\r\nKenny is aready exist in your database! ");        
        }
         
}
 
function remove() {
		var idi=parseInt(document.getElementById('id').value);
		//alert("idi="+idi);
     	var request=db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .delete(idi);
				
        request.onsuccess = function(event) {
          alert("Id's entry " + idi +" has been removed from your database.");
        };
}
 
</script>
</head>
 
<body>

<button onclick="readAll()">Read all data from indexedDb</button>
<button onclick="add()">Add data to indexedDb</button>
<button onclick="remove()">Delete data from indexedDb</button>

<ol>
	<li>
	<label for="id">Id</label>
	<input type="number" name="id" id="id" />
	</li>
	<li>
	<label for="nom">Nom</label>
	<input type="text" name="name" id="name" placeholder="Nom" required/>
	</li>
	<li>
	<label for="">Age</label>
	<input type="text" name="age" id="age" placeholder="age"/>
	</li>
	<li>
	<label for="email">E-mail:</label>
	<input type="text" name="email" id="email" placeholder="Exemple@domaine.com" required/>
	</li>
</ol>

</body>
</html>


merci d'avance pour vos réponses.[/i]
C'est tout bête. remove() est une méthode native du DOM. En faisant onclick="remove()" c'est comme si tu faisais onclick="this.remove()". Donc ça appelle la méthode remove() de ton button ce qui le supprime de la page.

Changes le nom de ta méthode remove() et ça devrait fonctionner parfaitement Smiley smile

Sinon tu peux aussi rassembler tes méthodes dans un objet ce qui te permettra de les cibler plus précisément.
Modifié par moust (17 Jul 2013 - 13:10)
Sujet clos
Aller à