Web indexDB [2]

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.

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

Ä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 :)

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

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.