Zur Navigation

Web indexDB [2]

daten in der indexDB speichern, auslesen, anzeigen

11 Kokarde

Einen schönen guten Morgen wünsche ich, auch wenn es hier in Berlin wirklich recht schmuddelig ist, mit dem trüben Wetter und dem Regen.

Wow, da hast Du dich ja schön ins Zeug gelegt, wo fang ich an? :)

Vielleicht mit einer Erfolgsmeldung :)))
Ja, dein Tipp und deine Idee war die Lösung!
Ich habe zwar ein wenig gebraucht, bis ich die richtige Reihenfolge gefunden habe, aber jetzt geht es.
Geilomat!!!

Anmerkung:
Verschiebe ich das Skript hoch in HEAD, funktioniert nichts mehr, auch der Button nicht.

Link: http://www.hardwareplattform.de/web-index-db/list.html

19.10.2016 11:00 | geändert: 19.10.2016 11:12

12 Jörg

Zitat von Kokarde
Verschiebe ich das Skript hoch in HEAD, funktioniert nichts mehr, auch der Button nicht.

Link: http://www.hardwareplattform.de/web-index-db/list.html

Unterhalb vom jquery Script? dieses muss als erstes eingebunden sein und danach das eigentliche Script.

19.10.2016 11:45

1 Forenmitglied fand diesen Beitrag gut

13 Kokarde

Sorry, konnte den Beitrag nicht mehr editieren.
Hatte da noch den falschen Code drinnen mit der falschen Reihenfolge.
Jetzt geht es und ich habe die Version auch schon online :)

19.10.2016 12:25

14 Kokarde

Aber jetzt kommt es ... dicke ...
Wie angedroht jetzt das eigentlich fette Problem, jedenfalls für mich :)

Ich brauche ja nun noch eine Updatefunktion für einen der Werte.
Habe also diesen Code-Block modifiziert und würde erst mal wissen wollen, ob das so erst mal korrekt ist?

 var list_item2 = $('<table width="80%"><tr><td><b><u>LFD. NR: '  + cursor.key + '</u><br><br></b></td><td></td><td></td><td></td><td></td></tr><tr><td><b>DATEN-ID:</b></td><td><b>HERSTELLER:</b></td><td><b>STÜCKZAHL:</b></td><td><b>KALIBER:</b></td><td><b>KURZNOTIZ:</b></td></tr><tr><td>' + value.biblioid + '<br><br></td><td>' + value.title + '<br><br></td><td><form id="update-form"><input type="text" id="year" value="' + value.year + '">&nbsp;&nbsp;<input type="submit" id="update-list-button" value="update"/></form><br><br></td><td>' + value.kaliber + '<br><br></td><td>' + value.notiz + '<br><br></td></tr></table>' ); 

Die Datei nennt sich:

http://www.hardwareplattform.de/web-index-db/form_edit_munition.html

19.10.2016 13:04 | geändert: 19.10.2016 13:04

15 Jörg

In $() erwartet jquery keinen HTML-String, sondern einen Selektor; anscheinend möchtest du hier eine ganz gewöhnliche JavaScript-Zuweisung machen:

var list_item2 = '<table width="80%"><!-- ... --></table>';

Zum besseren Verständnis empfehle ich ein jquery Tutorial durchzuarbeiten - über die Suchbegriffe "jquery Einführung" lassen sich da geeignete Seiten finden.

Wenn man die Grundzüge der jquery Syntax verstanden hat, kann man damit sehr gut und einfach arbeiten :)

19.10.2016 16:15

16 Kokarde

Äh, das ist doch das Gleiche wie in "list.html", oder?

Ich habe ja nur aus "list.html" die Datei "form_edit_munition.html" gemacht und die Variable "value.year" (bitte den komischen Namen ignorieren) mit einem Formular und dem Input-Feld umschlossen.
Das war ja zuvor auch bereits HTML Code.

Der Code kommt ja so auch aus dem Original:

https://mdn.mozillademos.org/de/docs/IndexedDB/IndexedDB_verwenden$samples/Full_IndexedDB_example?revision=1121927

Ich muss jetzt nur verstehen, wie ich den neuen Wert, der da in die Zelle (in das Input-Feld) geschrieben wird, wieder zurück in die DB bekomme.

Das funzt bereits, wenn ich den folgenden Code-Block mit einem Button verlinke.

 function updateResult() {
  var transaction = db.transaction(['Munitionsliste'], 'readwrite');
  var objectStore = transaction.objectStore('Munitionsliste');

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
        
        
          /**
   * biblioid funktioniert nur bei festen Wert direkt im Skript :(
   */
    
        var biblioid = $('123456789').val();
        
                   /**
   * cursor selektiert die ID für den Datensatz der upgedatet werden soll
   */
      
      if(cursor.value.biblioid === biblioid) {
        var updateData = cursor.value;

                  /**
   * year funktioniert nur bei festen Wert direkt im Skript :(
   */
          var year = $('year').val();
          
          
                 /**
   * updateData.year funktioniert nur bei festen Wert direkt im Skript :(
   */
          
        updateData.year = "2016; 
    
        var request = cursor.update(updateData);
        request.onsuccess = function() {
          console.log('a new year - done!');
        };
      };

      
      cursor.continue();   
        
    } else {
      console.log('Entries displayed.');         
    }
  };
};

Scheinbar muss ich es nur noch hin bekommen, dass bei Klick auf den Button "update" der Wert zurück in die DB geschrieben wird.

Hast Du da eine Idee dazu?

Ich denke, das hier ist die Lösung, aber ich bin zu blöd das umzusetzen:

http://stackoverflow.com/questions/11217309/how-do-i-update-data-in-indexeddb

Danke

Gruß, Kai

PS: Ich geh jetzt erst mal bissle auf den Bolzplatz den Fussball treten :)

19.10.2016 16:32 | geändert: 19.10.2016 17:16

17 Kokarde

Sorry, korrekt lautet der Code, der nun auch auf der Webseite ist, der mit dem Testbutton funktioniert, wie folgt:



 // UPDATE                


     function updateResult() {
  var transaction = db.transaction(['Munitionsliste'], 'readwrite');
  var objectStore = transaction.objectStore('Munitionsliste');

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
        
        
          /**
   * biblioid funktioniert nur bei festen Wert direkt im Skript :(
   */
    
        var biblioid = "1476890528692";
        
        console.log(biblioid);
        
                   /**
   * cursor selektiert die ID für den Datensatz der upgedatet werden soll
   */
      
      if(cursor.value.biblioid === biblioid) {
        var updateData = cursor.value;

                  /**
   * year funktioniert nur bei festen Wert direkt im Skript :(
   */
          var year = "999";
          
          
                 /**
   * updateData.year funktioniert nur bei festen Wert direkt im Skript :(
   */
          
        updateData.year = year; 
    
        var request = cursor.update(updateData);
        request.onsuccess = function() {
          console.log('a new year - done!');
        };
      };

      
      cursor.continue();   
        
    } else {
      console.log('Entries displayed.');         
    }
  };
}
                    


19.10.2016 17:48

18 Kokarde

Moin

Ich glaub ich bin einen kleinen Schritt weiter.
Der Link, nach Klick auf den Button "update", sieht nun so aus:

/WEB-indexDB/form_edit_munition.html?new_year=9999&biblioid=1476890528692&update-list-button=update

Die Daten werden also im Link übergeben.

Doch in der Konsole steht: NIX!

Das wundert mich doch sehr, müsste doch mind. einer der "console.log" Werte ausgegeben werden.

Doch noch mal kurz zum aktuellen Fakt:

Trage ich bei den Variablenfeldern feste Werte ein, dann klappt das Update sofort, wenn ich die Funktion an einen eigenen Button hänge!

Was ich zuvor mit dem Button "Update Test" einfach mal versucht hatte.

Also liegt es ja nur an der Übergabe der "neuen" Formularwerte an die Funktion "updateResult()", oder?

Nun habe ich mal was Anderes probiert :)

Ich habe 2 x Munition angelegt und jetzt das Update-Form aufgerufen.

Ich habe einen Button erzeugt, der nennt sich "UPDATE" und hat die ID = "test-button". Diesem Button verbinde ich mit:


var test1_button = $('#test-button');
    test1_button.click(function(evt) {
      updateResult();
    });

mit der Funktion die ausgeführt werden soll = "updateResult()"

Und siehe da ... YES .... es geht!

Doch FUCK, na klar, nur für die erste Reihe, den ersten Datensatz.
Klar, woher soll das Skript auch wissen das in beiden Feldern, bzw. im unteren Feld eine Zahl geändert wurde.

OK; ich bin zwar einen kleinen Schritt weiter, aber die Lösung ist mir immer noch unschlüssig.

Idee?

Kann muss man ggf. etwas beim Formular oder dem Formularbutton ändern?

Sowas wie "<form id="update-form" onSelect="updateResult();">" vielleicht?

Es wird mir einfach nicht klar, was der Unterschied ist zwischen dem Extra-Button und dem Button im Formular :((

Vielleicht muss ich ja dort was ändern, aber ich habe schon beide Möglichkeiten versucht:

var update-button = $('#update-list-button');
    update-button.click(function(evt) {
      updateResult();
    });


  $('#update-list-button').click(function(evt) {
       updateResult();
    }); 


Liebe Grüße, Kai

20.10.2016 09:52 | geändert: 20.10.2016 10:39

19 Jörg

Zitat von Kokarde
Äh, das ist doch das Gleiche wie in "list.html", oder?

Ich habe ja nur aus "list.html" die Datei "form_edit_munition.html" gemacht und die Variable "value.year" (bitte den komischen Namen ignorieren) mit einem Formular und dem Input-Feld umschlossen.
Das war ja zuvor auch bereits HTML Code.

Der Code kommt ja so auch aus dem Original:

https://mdn.mozillademos.org/de/docs/IndexedDB/IndexedDB_verwenden$samples/Full_IndexedDB_example?revision=1121927

OK, jquery parst innerhalb von jQuery() bzw. $() auch HTML-Strings - das war mir noch nicht geläufig (oder ich hab's verdrängt) :)

http://api.jquery.com/jQuery/#jQuery2

Den Rest schau ich mir später an...

20.10.2016 18:14

20 Jörg

Die Daten werden also im Link übergeben.

Genauer gesagt in einer URL - und zwar weil du da einen Submit-Button eingebaut hast:

<input type="submit" id="update-list-button" name="update-list-button" value="update"/>

Bei einem type="button" würde das Formular nicht an diese URL versendet.

Verhindern kannst du das Absenden aber auch mit einem preventDefault():

var update-button = $('#update-list-button');
update-button.click(function(evt) {
  evt.preventDefault();
  updateResult();
});

Doch in der Konsole steht: NIX!

Ja, weil die Seite neu aufgerufen wird - das Script fängt gewissermaßen wieder bei Null an. Durch das Absenden des Formulars kommt updateResult() auch nicht mehr zum Zuge.

20.10.2016 21:06 | geändert: 20.10.2016 21:09