Web indexDB [3]

daten in der indexDB speichern, auslesen, anzeigen

21 Kokarde

Hi, nachdem ich das Weekend nach einer Lebensmittelvergiftung gerade so überstanden habe, werde ich mich mal gleich mit Deinem Tipp befassen.
Erst mal ein nettes Dankeschön und nun schaue wir mal ...

Verdrängung ist auch bei mir an der Tagesordnung *haha*

Ich habe die Datei neu hoch geladen:

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

Der Code-Block, den ich von Dir eingefügt habe, sieht nun so aus:

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

Der Code-Block für das Update sieht nun so aus:

 // 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 = $('#biblioid').val();
        
        console.log("Geändert wird:" + 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 = $('#new_year').val();
          
          console.log("Geändert wird:" + year);
          
                 /**
   * 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.');         
    }
  };
}

Der Bereich, wo die Tabelle angezeigt wird und wo die Selektierung per "value.biblioid" und "value.year" passiert und der Button erzeugt wird, sieht so aus:

  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="number" id="new_year" name="new_year" value="' + value.year + '">&nbsp;&nbsp;<input type="hidden" id="biblioid" name="biblioid" value="' + value.biblioid + '"><input type="submit" id="update-list-button" name="update-list-button" value="update"/></form><br><br></td><td>' + value.kaliber + '<br><br></td><td>' + value.notiz + '<br><br></td></tr></table>' ); 
            
           pub_list.append(list_item2);

Bei Klick auf "Updateliste erzeugen" wird die Tabelle erzeugt und im Feld was es upzudaten gilt, steht der Wert aus der DB den man nun überschreiben kann.

Die Konsole gibt aus:

- openDb ...
- addEventListeners
- openDb DONE
- displayPubList
- displayPubList cursor: IDBCursorWithValue {value: Object, source: IDBObjectStore, direction: "next", key: 1, primaryKey: 1}
- Keine weiteren Einträge!

Alles cool :)

Nun überschreibe ich das Feld mit der Überschrift "Stückzahl" mit einem neuen Wert und klicke auf den kleinen Button "update".

Die Konsole gibt aus:

- openDb ...
- addEventListeners
- openDb DONE

Oben im Browser steht:

http://www.hardwareplattform.de/web-index-db/form_edit_munition.html?new_year=3333&biblioid=1476950241879&update-list-button=update

Nun klicke ich wieder auf "Updateliste erzeugen".

Arrrrggg ... es hat sich nix getan ...

:((

Ich hatte ja zuvor ein paar Ideen aufgelistet im Post No. 18, ggf. passt davon eine Möglichkeit?

Habe das jetzt so verstanden, dass das Formular eigentlich nix annimmt und somit auch keine Werte abgeändert werden können, oder?

PS: die andere Variante, mit der festen Zuordnung von Werten, der funktioniert super. Jetzt müssen wir nur noch herausfinden, wie man im derzeitigen Formular-Modus die Werte in die Variablen bekommt und die somit dann in die DB zurück geschrieben werden.

22 Kokarde

Moin Jörg

Also ich habe alles probiert was ich zuvor geschrieben habe, leider führt nichts zum Erfolg. Ich werde nun versuchen die Daten per GET an eine weitere Seite zu übergeben und hoffe das der INSERT dann klappt.

Doch jetzt erst mal einen Kaffee :)

23 Jörg Kruse

Sorry, ich hatte das Update in deinem vorletzten Post nicht mitbekommen :-/

Ich schau mir das heute nachmittag mal an..

24 Jörg Kruse

Nochmal grundsätzlich zum Submit eines Formulars:

dieser ist notwendig, wenn die eingetragenen Daten von einem serverseitigem Script verarbeitet werden sollen, wie z.B. einem PHP-Script. JavaScript arbeitet aber clientseitig, ein Absenden ist von daher nicht erforderlich - das Script kann die eingetragenen Werte direkt auslesen. Man kann natürlich auch mit JavaScript die GET-Parameter auslesen, aber das hat dann schon etwas von "von hinten durchs Auge".

Ich habe das ganze nochmal lokal bei mir getestet

Das Problem ist in diesem Fall, dass #update-list-button zu dem Zeitpunkt, in dem addEventListeners() ausgeführt wird, noch gar nicht existiert. Die Ausgabetabelle mit dem Edit-Button wird ja erst manuell erzeugt. Dementsprechend muss man den Listener direkt danach initiieren:

var list_item2 = $('...');

pub_list.append(list_item2);

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

Nach updateResult() kannst du dann ja noch eine Benachrichtigung einbauen, so dass der Anwender weiß, dass die Bearbeitung erfolgreich war :)

25 Kokarde

Hi, alles klar.

Das Formular macht jetzt weder ein GET noch ein POST, der ganze untere Block sieht nun so aus:

if (cursor) {
        console.log("displayPubList cursor:", cursor);
        req = store.get(cursor.key);
        req.onsuccess = function (evt) {
          var value = evt.target.result;
            
         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="number" id="new_year" name="new_year" value="' + value.year + '">&nbsp;&nbsp;<input type="hidden" id="biblioid" name="biblioid" value="' + value.biblioid + '"><input type="submit" id="update-list-button" name="update-list-button" value="update"/></form><br><br></td><td>' + value.kaliber + '<br><br></td><td>' + value.notiz + '<br><br></td></tr></table>' ); 
            
           pub_list.append(list_item2); 
            
            
            
               var update_button = $('#update-list-button');
update_button.click(function(evt) {
  evt.preventDefault();
  updateResult();
}); 
            
           
        };

          
        cursor.continue();

          
        i++;
      } else {
        console.log("Keine weiteren Einträge!");
      }
    };
  }

Ich musste noch diese eine Klammer weg nehme, die vom DEV Tool als Fehler angezeigt wurde, da ging es wie von Zauberhand!!!!!

Wermutstropfen - Es geht nur für den obersten Eintrag.
Ich muss mal im Code schauen, nicht das ich noch irgendwo einen Festen Wert vergeben habe.

Melde mich noch mal ...

Auf jeden Fall sind wir auf der Spur Dank DIR! :)

26 Kokarde

OK; hier passiert irgendwas doppelt.

Klicke ich auf "Updateliste erzeugen" ist alles OK.
Es werden 2 Einträge angezeigt.

Nun ändere ich den Wert im ersten Eintrag und klicke auf den Button "update".

Die Konsole gibt folgendes aus:

Geändert wird:1476890528692
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:347 Geändert wird:100
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:357 a new year - done!
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:333 Geändert wird:1476890528692
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:365 Entries displayed.
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:333 Geändert wird:1476890528692
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:347 Geändert wird:100
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:357 a new year - done!
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:333 Geändert wird:1476890528692
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:365 Entries displayed.

Äh, kann es sein, dass ich eine Ebene noch nach unten muss, also eine "}" Klammer weiter? Sieht aus als wenn er sich in dem Bereich befindet, in dem sich der Cursor durch die DB läuft und die Ausgabe macht.
Er macht es halt 2 x weil ja auch 2 Datensätze gefunden werden.

Was meinst Du?

Vorab ->

Schiebe ich den Block für den update_button eine Klammer weiter, kommen Fehlermeldungen das diese ")" falsch gesetzt sei, die ich zuvor setzen musste, damit es überhaupt läuft.
Ich muss diese dann auch eine "}" Klammer weiter schieben, so das es dann so aussieht = "}); ".

Effekt:

Ich kann die Liste erzeugen, ein Update des ersten Eintrags machen, die Ausgabe mit der alert-Meldung kommt nun nur noch 1x - auch in der Konsole steht nun korrekt:

Geändert wird:1476890528692
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:347 Geändert wird:999
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:357 a new year - done!
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:333 Geändert wird:1476890528692
form_edit_munition.html?new_year=100&biblioid=1476951602503&update-list-button=update:365 Entries displayed.

aber ich kann kein Update der anderen Einträge machen :((

Klicke ich beim zweiten Eintrag auf den Update-Button, lädt er einfach nur die Seite neu.

Verrückt :/

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

27 Jörg Kruse

Das wird wohl deswegen schon nicht funktionieren, weil eine ID nur einmal vergeben werden kann. Der Listener reagiert nur auf das erste '#update-list-button'. Zudem funktioniert auch updateResult() nur mit einer ID 'biblioid' bzw. 'new_year', welches es bei mehreren Datensätzen mehrfach gibt.

Mögliche Vorgehensweise:

an die IDs innerhalb von list_item2 wird zur Unterscheidung noch cursor.key drangehangen (also z.B. dass bei cursor.key == 1 die IDs dann "biblioid1", "new_year1", "update-list-button1" etc. heißen). cursor.key wird zudem als Argument von updateResult() übergeben, welches es dann wieder an die IDs dranhängen kann.

Wenn du das nicht hinbekommst, kann ich die Code-Anpassungen im Detail posten - kann aber etwas dauern, bis ich dazu komme.

28 Kokarde

OK, gerade ist mein Gehirn geplatzt :)))

Die ID ist immer nur einmal vorhanden in der indexDB.
Diese wird ja automatisch vom System immer neu für jeden weiteren Datensatz angelegt. Sie zählt automatisch hoch. Bedeutet, wenn man z. B. 3 Datensätze hat, sind das 1-2-3 und wenn man jetzt 2 löscht und einen weiteren Datensatz anlegt, dann wäre dies die ID = 4

Die s. g. "biblioid" ist immer eindeutig. Diese lasse ich als eindeutigen Nenner automatisch bei jedem neuen Datensatz erzeugen und in die DB schreiben.
Falls wichtig: Diese liegt im s. g. Objekt = Value
Das ist wohl so eine Struktur innerhalb von indexDB

Ich dachte nun dass bei Klick auf den Button "update" der neue Wert aus dem Feld "new_year" an die Funktion "update-list-button" übergeben wird und durch den Nenner "value.biblioid" dem passenden Datensatz als neuer Wert zugeordnet und überschrieben wird.

Funktioniert auch, aber nur beim ersten Datensatz in der Reihe.

Deine Lösung sprengt leider meine Auffassungsgabe und ich würde mich über den Code als COPY PASTE freuen.

Hat alles Zeit, das ist hier ja kein primäres Projekt sondern nur der Versuch mir was zu basteln was mir bissle die Arbeit erleichtert.

Wenn alles zu Hardcore wird, dann füge ich halt noch einen Schritt davor ein und übergebe den Wert für den Datensatz noch mal an die Seite wo die Verarbeitung stattfindet. Dann steht da ja nur ein Datensatz mit dem update-Button :)
Oder ich mache eine Folgeseite wo die Verarbeitung erfolgt, das ginge ja dann mit GET im Formular.

Dennoch komisch, weil doch der Button für den Update die gleiche Funktion auslösen sollte. Aber der zweite Button löst halt nur das hier aus:

WEB-indexDB/form_edit_munition.html?new_year=400&biblioid=1476951602503&update-list-button=update

29 Jörg Kruse

Bitte nicht einfach nur Copy + Paste, sondern zumindest versuchen, die Änderungen zu verstehen :)

Und noch ein Empfehlung: der Code ist wesentlich leichter zu lesen, wenn er korrekt eingerückt ist. Es gibt auch Code Beautifier, online oder als Plugin für den Editor, die einem das abnehmen, wenn man mit den Einrückungsregeln noch nicht so vertraut ist (dort nur den JavaScript-Code behandeln lassen, mit gemischten Code kommen viele Code Formatierer nicht klar)

Ich habe zudem zur bessern Lesbarkeit den HTML-Code von list_item2 mithilfe von Backslashes am Ende umgebrochen. Hier erhalten die IDs zur Unterscheidung noch eine Zahl am Ende, wofür wir einfach cursor.key verwenden:

        req.onsuccess = function(evt) {                                         
            var value = evt.target.result;

            var list_item2 = $('\
                 <table width="80%"> \
                  <!-- ... --> \
                      <td><form id="update-form"> \
                          <input type="number" id="new_year'  + cursor.key + '" name="new_year" value="' + value.year + '"> \
                          <input type="hidden" id="biblioid'  + cursor.key + '" name="biblioid" value="' + value.biblioid + '"> \
                          <input type="submit" id="update-list-button'  + cursor.key + '" name="update-list-button" value="update"/> \
                      </form><br><br></td> \
                 <!-- ... --> \
                 </table> \
            ');

Auch der Selektor des Klick-Handlers, welcher ebenfalls innerhalb von 'req.onsuccess = function(evt) { ... }' stehen muss, wird um cursor.key erweitert. Dem darin enthaltenen Aufruf von updateResult() übergeben wir die Zahl als Argument. Da wir diese in dem Fall nicht über function(evt) durchreichen können, extrahieren wir sie mithilfe von substr() aus der ID des Buttons (this ist hier das Element, auf welches geklickt wurde, also der Button)

            pub_list.append(list_item2);
            var update_button = $('#update-list-button' + cursor.key);
            update_button.click(function(evt) {
                evt.preventDefault();
                updateResult(this.id.substr(18));
                alert("Update OK!");
            });
        };

Die Funktionsdefinition von updateResult() erweitern wir entsprechend um das betreffende Argument:

function updateResult(cursor_key) {

... und hängen die Zahl wieder an die IDs dran:

var biblioid = $('#biblioid' + cursor_key).val();

var year = $('#new_year' + cursor_key).val();

30 Kokarde

Hi

So, da wird doch mal offensichtlich, dass der Profi mal deutlich macht, dass die Idee doch nicht mal so einfach umsetzbar ist und Laien wie ich hier nix erreichen können :))

Einiges habe ich verstanden, auch das jetzt nur noch eine Tabelle mit einem Feld angezeigt wird in dem die Summen für "new_year" enthalten sind und die andern Felder jetzt noch mal neu hinzugefügt werden müssen.
Doch das sollte ich hin bekommen.

Auch das mit dem Argument habe ich verstanden.

Natürlich ist der Code bissle wild und unsauber aufgebaut ... das muss man bereinigen, da setzte ich mich noch mal dran.

Ich habe für den Vorgang mal einen Link erzeugt und es sieht SEHR GUT aus :))

Kaum zu glauben das ich die Sache gestern Abend komplett in PHP und MySQL in nur 5 Stunden zu einer laufenden und funktionierenden Online-Version gebracht habe. Aber da ist es auch wesentlich einfacher.

Nun setze ich mich mal noch an die Feinheiten und teste mal mit verschiedenen Endgeräten.

Im Moment kann ich nur ein großes DANKE aussprechen, das hier garnicht auf die Seite passt *LOL*

Melde mich wieder ...

Liebe Grüße aus Berlin, Kai

www.hardwareplattform.de/web-index-db/form_edit_munitionX.html

Seite 1 234

nach oben weiter >