Question

传递给Bootstrap模态的变量数据使用“数据文本”在HTML数据文本元素字段中进行硬编码（根据Bootstrap示例）。如果模式的目的是允许用户进行更改，那么我该如何将其发送回原始HTML数据文本以在下一次更新？

JS新手在这里。我让Bootstrap 4模态工作并通过Ajax更新回服务器（非常感谢StackOverFlow的搜查！）。我在页面上大约有100个文本元素，所有这些元素都加载了用于编辑单击的文本字段的相同模式。字段初始值被硬编码到data-text字段中的页面HTML中（遵循Bootstrap模式示例）。这允许传递当前文本值以使用现有文本值预填充模态字段以进行编辑。

接下来，用户在模式中编辑注释字段，然后单击提交。我能够获取该值并将其传递回服务器，并使用页面上新编辑的值更新DOM，一切正常，看起来很棒！到目前为止一切顺利。

现在是问题所在。由于我一直无法弄清楚如何更改data-text字段（在页面HTML中进行了硬编码），因此在正确提交后，屏幕（DOM）会以新值进行更新，但是元素不会更新。它仍然是旧值。这意味着我下次单击以编辑文本时，文本字段的OLD值已预先填充在要编辑的模式中。

问题：如何通过JS更新html数据文本字段？

我已经对这个问题进行了详尽的研究，没有Stack Overflow，我将永远无法使它正常工作，非常感谢你们。关于传递变量TO Modals的问题很多，但是关于传递数据的问题很少，关于由JS提交时设置数据文本的问题很少。

文本元素定义示例。这是一个稍微简化的示例。文本字段包含来自服务器数据库的一些数据，HTML由PHP / MySQL生成。（页面上100个元素中的1个）：

<td id="note_12345678" data-toggle="modal" data-target="#noteModal" data-note="<some text from db>" class="note"><same text from server db></td>

这是提交代码的JS。除了我试图更改元素的“数据注释”字段的最后一行之外，所有内容均正常运行

function note_submit(element) {
    var note = document.getElementById('message-text').value;
    ajaxcall("/ajaxclick.php" , { note:note } , null); // Simplified, all is working.
    noteElement = document.getElementById('note_12345678');
    noteElement.innerText = note ; // Updates the DOM with submitted note.
    noteElement.data-note = note ; // <== trying to change data-note here but obviously a syntax error.
}

在最后一步之前，一切正常。单击文本字段将打开模式，预加载文本以进行编辑，允许用户进行编辑，然后单击Ajax将提交发送到服务器以进行更新，屏幕上的DOM注释将由JS更新。如果我重新加载页面，它将从服务器数据库加载新的编辑文本值。一切正常。非常高兴。

问题是下一次，我单击文本元素进行编辑时，模态将数据注释硬编码的OLD值加载到HTML中。 JS提交后如何更新？多谢您提供一百万美元的协助。如此接近。

已更新：页面正在加载jquery-3.3.1.js和bootstrap / 4.0.0 / js / bootstrap.min.js。浏览器是FF V66。

将变量传递给Bootstrap模式并将其传递回

0 个答案: