Question

我在bootstrap模式中有一个表单。我希望输入字段显示用户第一次填写表单时输入的过去值，我从云数据库中检索。我希望这些输入字段可以编辑，以便用户可以使用它们可能具有的任何更改重新提交表单。但是，在尝试在输入字段中显示过去的信息时，我陷入困境。我找不到为什么输入字段的这些值没有被改变的任何原因。

将我的按钮添加到我的boostrap list-group的javascript：

var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
    {

        var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
        $('#iot-list').append(button);
    }
};

我的按钮将放在我的列表组中的html：

<div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
                <button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
                <p class="fancy-font dash-item-title">Your IoTs</p>
                <button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
                <div class="list-group iot" id="iot-list"><!-- buttons will be placed here --></div>

            </div>...

点击按钮时弹出的模式：

<div class="modal fade" id="quick-view-iot-modal">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="quick-view-iot-h4"></h4>
  </div>
  <div class="modal-body">
        <form id="edit-iot-form" method="post">
        IoT Name: <br>
        <input type="text" name="iot-name" class="iot-value" required><br>
        Organization ID: <br>
        <input type="text" name="org-id" class="iot-value" readonly required><br>
        Authentication Method: <br>
        <input type="text" name="auth-method" class="iot-value" value="apikey" readonly><br>
        API Key: <br>
        <input type="text" name="api-key" class="iot-value" readonly required><br>
        Authentication Token: <br>
        <input type="text" name="auth-token" class="iot-value" readonly required><br>
        </form>
        <button name="more" type="button" class="fancy-font page-button">More</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

将内容添加到模态的javascript。它位于文档准备就绪时调用的main方法中：

 $('.iot').click(
    function()
    {
        var iotName = event.target.name;
        getIots(loadIotQuickView, iotName);
        $('h4#quick-view-iot-h4.modal-title').text(event.target.name);


    });

getIots（）函数:(它包含参数variable = null，因为我还在不使用varaible参数的代码的另一部分中使用它。此方法将ajax post发送到servlet，然后servlet以数组响应iot对象）

var getIots = function(callback, variable=null)
{
var iotsJSON = null;
$.post("DashboardServlet", {loadIotPanel: "true"}, function(response)
     {
        iotsJSON = response;

        callback(response, variable);
     });

loadIotQuickView（）函数:(这是我相信我遇到问题的地方）

var loadIotQuickView = function(iotsJSON, iotName)
{
var currentIoT = null;

for(var iot in iotsJSON)
{
    if(iotsJSON[iot].appID = iotName)
        currentIoT = iotsJSON[iot];

}
if(currentIoT == null)
    return;
$('.iot-value[name="iot-name"]').attr("value",currentIoT.appId);


};

我尝试了很多jquery选择器，但表单中的输入字段值都不会改变。我已经完成了代码，我的所有变量都有正确的值，它只是最后一行没有执行我想要的。我不确定我的jquery选择器是否存在问题，或者是否存在其他问题。提前谢谢！

更新：我尝试了以下选择器：

$('.iot-value[name="iot-name"]')
$('input[name="iot-name"]')
$('.iot-value')
$('#connect-iot-modal').find('input[name="iot-name"]')

我还尝试添加＆＃34; edit-iot-name＆＃34;到我的输入栏：

$('#edit-iot-name')
$('#connect-iot-modal #edit-iot-name')

但这些都没有奏效，这让我相信它一定不是我选择器的问题。

更新：

我还尝试将.val(currentIoT.appID)与之前的所有选择器一起使用。仍然没有工作。

Answer 1

我不确定原因，但是将我的表单所在的模式的ID（#quick-view-iot-modal）添加到我的选择器中。但是出于某种原因，它仅在我使用.val()时有效，而在我使用.attr()时无效。所以最终的结果是：

$('#quick-view-iot-modal #edit-iot-name').val(currentIoT.appID);

我不确定为什么需要添加模态的ID，我不确定为什么它不会像这样工作：

$('#quick-view-iot-modal #edit-iot-name').attr("value",currentIoT.appID);

但它有效！如果有人知道为什么它只适用于这种组合，请告诉我！

Answer 2

尝试：

$('.iot-value[name="iot-name"]').val(currentIoT.appId);

你的选择器也很奇怪。为什么不直接通过名称引用输入？

$('input[name="iot-name"]').val(currentIoT.appId);

在引导模式中使用jquery更改表单输入字段值

2 个答案: