时间戳

首页 > 解决方案 > 使用 Firebase 数据填充模态

javascript - 使用 Firebase 数据填充模态

问题描述

我创建了一个模式来将数据保存到 DB，但现在我试图打开一个模式，其中包含已经保存的当前值来编辑它们。但我没有成功

这里是编辑模式（从预览模式修改）：

<!-- edit Modal -->
  <div class="modal fade" id="editModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          
          <h4 class="modal-title">Modifique o incidente</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>
        <div class="modal-body">
            <form>

                <div class="form-group">
                  <label for="exampleFormControlInput1">Local</label>
                  <input type="text" class="form-control" id="localEdit" placeholder="Onde aconteceu?">
                </div>
               
                <div class="form-group">
                  <label for="exampleFormControlTextarea1">Descricao</label>
                  <textarea class="form-control" id="descricaoEdit" rows="3"></textarea>
                </div>

                <div class="form-group">
                    <label for="exampleFormControlInput1">Link da Imagem</label>
                    <input type="text" class="form-control" id="imgLinkEdit" placeholder="Tem imagem?">
                  </div>


                <button type="button" class="btn btn-default" type="submit" onclick="updateCard(event)">Adicionar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
              </form>

        </div>

      </div>
      
    </div>
  </div>

这是我在前面创建卡片的javascript方式：


               const content = `
                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <img class="card-img-top data-imgLink" data-src="${doc.data().foto}">
                        <div class="card-body">
                          <p class="card-text" id="data-local">Local: ${doc.data().local}</p>
                          <p class="card-text data-description">Descricao: ${doc.data().descricao}</p>
                          <p class="card-text data-situation">Situacao: ${doc.data().situacao}</p>
                          <button type="button" class="btn btn-sm btn-outline-secondary edit-button" id="editButton" data-toggle="modal" data-target="#editModal">Edit</button>
                          <button type="button" class="btn btn-sm btn-outline-secondary" type="submit" onclick="deleteCard('${doc.id}')">Apagar</button>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                       
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    `;

这是我试图创建的将值传递给编辑模式的函数（我只尝试使用第一个输入）：


$(document).on("click", ".edit-button", function(){

    var local = $(this).find('#data-local').text();
    $('#localEdit').parent().val(local);

    console.log("clicado");
});

如您所见，我将正确的 html id 传递给函数。

任何线索我做错了什么？

谢谢

标签： javascripthtmljqueryfirebase

解决方案

您有一个逻辑错误，$('#localEdit')将搜索 id 为localEdit的元素，这是一个输入字段并.val()与输入字段一起使用。所以，$('#localEdit').parent().val(local);你可以把它写成$('#localEdit').val(local);

因此，在这种情况下，您有一个引用 localEdit 的 id，它是一个输入字段，.val()函数将使用它，无需调用.parent().

推荐阅读