ブートストラップモーダル内でフォーム入力フィールドの値をjqueryに変更する

Question

私はブートストラップモーダル内にフォームを持っています。私は入力フィールドに、雲のデータベースから取得しているフォームに初めて入力したときに入力した過去の値を表示したいと思います。私はこれらの入力フィールドを編集可能にして、ユーザーが変更を加えてフォームを再送信できるようにしたいと思います。しかし、入力フィールドに過去の情報を表示しようとすると、私は立ち往生します。これらの入力フィールドの値が変更されていない理由はわかりません。

私のブートストラップリスト・グループに私のボタンを追加する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（）関数：varaibleパラメータがない場合、私は、コードの別の部分でそれを使用するため（それはヌル=可変パラメータを含みます。（私は問題を取得しています信じている場所です）

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); 


}; 

：使用されるこの方法は、IOTオブジェクトの配列で応答サーブレット、）

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

     callback(response, variable); 
    }); 

loadIotQuickView（）関数にAJAXポストを送ります

私は多数のjqueryセレクタを試しましたが、フォーム内の入力フィールドの値は変更されません。私はコードを踏んできました。すべての変数は正しい値を持っています。最後の行は、私が望むように実行していません。私のjqueryセレクタに問題があるか、それが何か他のものかどうかは不明です。前もって感謝します！

UPDATE： 私は、次のセレクタを試してみた：

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

私も私の入力フィールドに "編集-IOT-名" のIDを追加しようとしました：

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

しかしこれらのどれもうまくいきませんでした。それは私のセレクタに問題ではないと信じています。

UPDATE：

私は、以前のセレクタのすべてと.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);

Answer 3

：

$('.iot-value[name="iot-name"]') 

"iot-name"は文字列リテラルであり、それはあなたのiot-name変数の値に評価しません。

私はこのようになります。これは、あなたがあなたのセレクタに変数の値を使用するために探していることを推測している：

$('.iot-value[name="' + iot-name + '"]')