2017-09-14 12 views
0

モーダルを使用して入力を変更する場合、変更されたデータは最後の入力です...クリックした対応するボタンではありません。ここでデータをモーダルに置き換えることができません

は私のコード(ある):

dashboard.php

<div id="modalPartID" class="modal fade" role="dialog"> 
    <div class="modal-dialog" style="width:70%;overflow-y: initial !important;"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Browse PartID</h4> 
     <br/> 
     <input type="text" class="form-control" id="searchPartID" placeholder="PartID"/> 
     </div> 
     <div class="modal-body" style="height: 300px; overflow-y: auto;"> 
     <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>PartID</th> 
      <th>PartName</th> 
      <th>OtherID</th> 
     </tr> 
     <tbody id="tbodyPartID"></tbody> 
     </thead> 
     </table> 
     </div> 
    </div> 
    </div> 
</div> 

dashboard.js

function addTableRowHasilProduksi() { 
    row = parseInt($('#tableRowHasilProduksi').val()) + 1; 
    $('#plusButtonHasilProduksi').remove(); 
    var html = ' \ 
    <tr id="rowTableHasilProduksi_' + row + '"> \ 
     <td> \ 
     <div class="input-group"> \ 
      <input id="typepartid_' + row + '" class="form-control ui-autocomplete" type="text" onchange="myFunction(' + row + ')" name="typepartid_' + row + '" >\ 
      <span class="input-group-btn">\ 
      <button type="button" class="btn btn-default glyphicon glyphicon-folder-open" name="button" id="buttonPartID' + row + '">\ 
      </button>\ 
      </span>\ 
     </div>\ 
     </td> \ 
     <td>\ 
     <select id="hasilproduksi_' + row + '" class="form-control" placeholder="select" onchange="hasilProduksiChage(' + row + ')" name="hasilproduksi_' + row + '"> \ 
     <option value="-">--Select--</option>\ 
     <option value="Good">Good</option>\ 
     <option value="Repair">Repair</option>\ 
     <option value="Reject">Reject</option>\ 
     </select> \ 
     </td> \ 
     <td><input id="qty_' + row + '" type="text" class="form-control" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);" name="qty_' + row + '" /> \ 
     </td> \ 
     <td id="tdTypeReject_' + row + '"> \ 
     <select id="typereject_' + row + '" class="form-control" name="typereject_' + row + '"> \ 
     ' + htmlTypeReject + ' \ 
     </select> \ 
     </td> \ 
     <td><input id="keteranganreject_' + row + '" type="text" class="form-control" name="keteranganreject_' + row + '"/></td> \ 
     <td><button type="button" class="btn btn-sm btn-default" onclick="deleteRowHasilProduksi(' + row + ')">x</button></td> \ 
    </tr> \ 
    <tr id="plusButtonHasilProduksi"> \ 
     <td colspan="6"><button type="button" class="btn btn-sm btn-default" style="width:100%" onclick="addTableRowHasilProduksi()">+</button></td> \ 
    </tr>'; 
    $('#tableHasilProduksi > tbody').append(html); 
    //variable row table add +1 
    $('#tableRowHasilProduksi').val(row); 
    $('#plusButtonHasilProduksi').attr('onclick', 'addTableRowDowntime()'); 
    //buttonPartID onBrowse 
    $('#buttonPartID' + row + '').click(function() { 
    browsePartID(0, 100, ''); 
    }); 
    $('#searchPartID'+ row + '').keyup(function(e) { 
    var filter = (e.target.value); 
    browsePartID(0, 100, filter) 
    }); 
} 

browse.js

$('#buttonPartID').click(function() { 
    browsePartID(0, 100, ''); 
}); 
$('#searchPartID').keyup(function(e) { 
    var filter = (e.target.value); 
    browsePartID(0, 100, filter) 
}); 
function browsePartID(start, limit, filter) { 
    $.ajax({ 
    async: false, 
    url: 'api/partid.php?start=' + start + '&limit=' + limit + '&filter=' + filter, 
    success: function(result) { 
     var data = result.result; 
     var trData = ''; 

     for (var i = 0; i < data.length; i++) { 
     trData += ' \ 
      <tr> \ 
      <td><a onclick="isiFormPartID(\'' + data[i].PartID + '\')">' + data[i].PartID + '</a></td> \ 
      <td><a onclick="isiFormPartID(\'' + data[i].PartID + '\')">' + data[i].PartName + '</a></td> \ 
      <td><a onclick="isiFormPartID(\'' + data[i].PartID + '\')">' + data[i].OtherID + '</a></td> \ 
      </tr> \ 
      '; 
     } 

     $('#tbodyPartID').html(trData); 
     $('#modalPartID').modal('show'); 
    } 
    }); 
} 

function isiFormPartID(PartID) { 
    $('input#typepartid_'+row).val(PartID); 
    $('#modalPartID').modal('hide'); 
} 

LAST たぶん、あなたは私のソリューション、CMIIWを与えることができます。申し訳ありませんが私の英語は悪いです。

この写真を見て、多分あなたは私が意味するものを理解するでしょう。私はその権利を得た場合

illustration

+0

はあなたを行います選択された入力に選択された 'partID'が表示されます。私はそうですか? –

+0

私が正しく理解していれば、最初のクリックはテーブル行のフォルダアイコンで行われます...これはajaxリクエストをトリガしてモーダルの部分を取得します。次に、そのパーツの情報をページのテーブルにコピーしますか? –

+0

はい選択されたpartIDが選択された入力に表示される –

答えて

0

わかりましたが...、問題はrow変数についてです。

私はあなたのコードをテストできませんので、私はちょうど以下のものを試してみることができます。
動作しない場合は、プロジェクトのように見えるCodePenを作成してください。あなたはajaxリクエストを行うことができないので、モーダルで静的なHTMLを使用してください。

ので、フォルダアイコンをクリックしてから:

$('#buttonPartID' + row + '').click(function() { 
    browsePartID(0, 100, ''); 
}); 

変更し、それに:

$("[id^='buttonPartID']").click(function() { 
    row = $(this).closest("tr").index();  // Keep the row number in variable. 
    browsePartID(0, 100, ''); 
}); 

使用第2のクリックハンドラで保存されてrow変数:

function isiFormPartID(PartID) { 
    $('input#typepartid_'+row).val(PartID);  // You were using is correctly here, but the value wasn't correct. 
    $('#modalPartID').modal('hide'); 
} 
+0

だから、html(dashboard.php)でモーダルを変更する必要がありますか? –

+0

私が "«に変更»の近くで提案しているチャージから始めてください:»。 –

+0

私はあなたの考えに従っていますが、モーダルは表示されません –

関連する問題