从输入更新数据

时间:2019-01-30 03:25:10

标签: javascript jquery indexeddb

我有一个简单的jquery移动页面,该页面应该在indexedDb中找到id,找到后,更新剩余的信息(如果该id记录存在)。 (我插入了10条记录) 我找不到正确的方法。如果使用以下代码,我将插入空数据,否则我的第二个按钮无响应 这是我的代码: js:

     let updateCompId = $("#updateCompId").val();
      $("#updateButton").click(function() {
              // var updateCompId = $("#updateCompId").val();
              let tx = db.transaction(["Clients"], 'readwrite');
              let store = tx.objectStore("Clients");

                      var readCompanyId = store.get(updateCompId);

                      if (readCompanyId = updateCompId) {

                            store.openCursor().onsuccess = function(event) {
                            let cursor = event.target.result;
                            if (cursor) {
                                document.getElementById('updateForm').style.display = "";

                                cursor.continue();
                            }
                        };
                      }
});


  $("#updateInfo").click(function() {
    console.log("here");
        var tran = db.transaction(["Clients"], "readwrite");
        var store = tran.objectStore("Clients");
        // var compId = $("#updateCompId").val();

        var updateCompName = $("#updateCompName").val();
        var updatePost = $("#updatePost").val();
        var updateCompAddress = $("#updateCompAddress").val();
        var updateCity = $("#updateCity").val();
        var updateCountry = $("#updateCountry").val();
        var updateContact = $("#updateContact").val();
        var updatePhone = $("#updatePhone").val();
        var updateEmail = $("#updateEmail").val();

        var item = {
            id:updateCompId,
            Name:updateCompName,
            Post:updatePost,
            Address:updateCompAddress,
            City:updateCity,
            Country:updateCountry,
            Contact:updateContact,
            Phone:updatePhone,
            Email:updateEmail
        };
        console.log(item);
        store.put(item);
  });

HTML:

        <form id="findId">
          Enter Company Id to update information:
          <input id="updateCompId" type="text" name="updateCompId"/>
          <button id="updateButton" class="ui-btn">find to update</button>
          <p id="updateCustomer"></p>
          <button id="updateInfo" class="ui-btn">Update</button>
        </form>

        <form id="updateForm">
          Company name:
          <input id="updateCompName" type="text" name="compName"/>
          Post code:
          <input id="updatePost" type="text" name="post"/>
          Company address:
          <input id="updateCompAddress" type="text" name="compAddress"/>
          City:
          <input id="updateCity" type="text" name="city"/>
          Country:
          <input id="updateCountry" type="text" name="country"/>
          Contact number:
          <input id="updateContact" type="text" name="contact"/>
          Company phone:
          <input id="updatePhone" type="text" name="phone"/>
          Email:
          <input id="updateEmail" type="text" name="email"/>

        </form>

1 个答案:

答案 0 :(得分:0)

我建议您花一些时间阅读有关IndexedDB的更多信息。 MozillaGoogle文档和W3 recommendation对此都很有用。

对于你的问题,你有一个get,其结果你想比较其他值。这是错误的,因为与IndexedDB的所有交互都是异步的,并返回带有IDBRequestonsuccess回调的onerror实例。你可以让你的get结果在onsuccess回调,但你在做什么,而不是被实际值进行比较的IDBRequest实例。