Question

我有一个扩展的模型，可以在输入字段中显示详细信息，并且用户可以在单击编辑按钮时单击并保存并在Firebase中对其进行更新？ / p>

这里的问题是一次只更新一个字段，用户将不得不再次单击编辑并输入该字段并再次保存。

对此有什么解决办法吗？

发布了最小的可复制代码：

HTML：

<div class="modal">
  <div class="modal-content">
    <div class="shipDetails">
      <!-- Contact Chip -->
      <span class="mdl-chip mdl-chip--contact">
        <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">R</span>
        <span class="mdl-chip__text" id="retriveRR" ></span>
      </span>
      <span class="mdl-chip mdl-chip--contact">
        <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">D</span>
        <span class="mdl-chip__text" id="retriveDate" ></span>
      </span>
      <div>
        <span class="mdl-chip__text">CNEE:</span>
        <input name="retriveCNEE" type="RRField" id="retriveCNEE" disabled>
        <span class="mdl-chip__text">Account:</span>
        <input name="retriveCustAccount" type="RRField" id="retriveCustAccount" disabled>
      </div>
      <div class="model-width">
        <span class="mdl-chip__text">Origin:</span>
        <input name="retriveOrg" type="RRField" id="retriveOrg" style="width: 80px;" disabled>
        <span class="mdl-chip__text">Destination:</span>
        <input name="retriveDest" type="RRField" id="retriveDest" style="width: 80px;" disabled>
        <span class="mdl-chip__text">Weight:</span>
        <input name="retriveWeight" type="RRField" id="retriveWeight" style="width: 80px;" disabled>
        <span class="mdl-chip__text">Pieces:</span>
        <input name="retrivePC" type="RRField" id="retrivePC" style="width: 80px;" disabled>
      </div>
      <button id="saveEditBtn" onclick="" style="margin-top:10px;width: 32%;">Edit</button>
      <button id="ViewFilesBtn" onclick="" style="margin-top:10px;width: 32%;">View</button>
    </div>
  </div>
</div>

Javascript：

var RRText = document.getElementById("retriveRR");

//get fields data
$('#saveEditBtn').click(function() {
  if (document.getElementById('saveEditBtn').innerHTML == "Edit") {

    document.getElementById("retriveCNEE").disabled = false;
    document.getElementById("retriveCustAccount").disabled = false;
    document.getElementById("retriveOrg").disabled = false;
    document.getElementById("retriveDest").disabled = false;
    document.getElementById("retriveWeight").disabled = false;
    document.getElementById("retrivePC").disabled = false;
    document.getElementById('saveEditBtn').innerHTML = "Save"

  } else if (document.getElementById('saveEditBtn').innerHTML == "Save") {

    var RRValue = RRText.innerText;
    var FirebaseRef = firebase.database().ref("Requests").child(RRValue);
    var CNEEText = document.getElementById("retriveCNEE");
    var CUSTACCText = document.getElementById("retriveCustAccount");
    var OrgText = document.getElementById("retriveOrg");
    var DestText = document.getElementById("retriveDest");
    var WeightText = document.getElementById("retriveWeight");
    var PCText = document.getElementById("retrivePC");

    document.getElementById("retriveCNEE").disabled = true;
    document.getElementById("retriveCustAccount").disabled = true;
    document.getElementById("retriveOrg").disabled = true;
    document.getElementById("retriveDest").disabled = true;
    document.getElementById("retriveWeight").disabled = true;
    document.getElementById("retrivePC").disabled = true;

    FirebaseRef.child("Customer Account").set(CUSTACCText.value);
    FirebaseRef.child("Customer Name").set(CNEEText.value);
    FirebaseRef.child("Origin").set(OrgText.value);
    FirebaseRef.child("Destination").set(DestText.value);
    FirebaseRef.child("Weight").set(WeightText.value);
    FirebaseRef.child("Pieces").set(PCText.value);

    document.getElementById('saveEditBtn').innerHTML = "Edit"

  }
});

Answer 1

我通过将更新Firebase的方式更改为使用FirebaseRef.update({

解决了该问题

var FirebaseRef = firebase.database().ref("Requests").child(RRValue);     
FirebaseRef.update({
     "Customer Account":CUSTACCText.value,
    "Customer Name":CNEEText.value,
    "Shipper Name":ShipperText.value,
    "Collection Address":CollectAddrText.value,
    "Origin":OrgText.value,
    "Destination":DestText.value,
    "Weight":WeightText.value,
    "Pieces":PCText.value,
    "Dimensions":DIMText.value,
    "Stack":StackText.value,
    "Desk":DeskText.value,
    "Comment":CommentText.value,
    "Pricing Comments":PricingCommentsText.value,
    "SelectedAgentsRates/0/Rates":Agent0Text.value,
    "SelectedAgentsRates/1/Rates":Agent1Text.value,
    "SelectedAgentsRates/2/Rates":Agent2Text.value,
    "Selling":SellingRateText.value,
    "Status":StatusText.value,
     "Cancel Reason":ClosedReasonText.value,
     "Confirmed Agent":ConfirmedAgentText.value,
     "Cost":ConfirmedAgentRateText.value
    });

如何解决输入字段无法通过多个更改更新Firebase的问题

1 个答案: