jQuery로 테이블 값을 전달하여 부트 스트랩 모달에 입력 값을 형성하는 방법은 무엇입니까?

Question

편집 : 마지막으로 .val()을 사용하여 값을 전달할 수 있었지만 입력 필드 이름과 ID를 동일하게 변경 한 후에 만 ​​작업했습니다.

내 부트 스트랩 모달 형식 입력란을 표의 값으로 채우는 방법을 모르겠다. 편집 기능을 만들려고하고있다. 따라서 편집 버튼을 누르면 양식이있는 모달 창과 현재 항목의 이미 채워진 필드가 열립니다.

console.log()을 사용 했으므로 값이 js로 전달됩니다. 내가 아직 확신 할 수없는 유일한 방법은 아이템 ID를 전달하는 방법입니다.

그러나 실제로 입력 필드에 이러한 값을 채우는 방법을 모르겠습니다. 내가 시도한 $('#frm_name').text(name) - 아무 일도 발생하지 않는다. 빈 필드가있는 양식이 열린다. $('#frm_name').append(name) - 양식이 빈 필드로 열리고 $('#frm_name').value(name) - 편집 버튼이 전혀 작동하지 않으며 모달을 열지 못했다.

모달 CODE

<div class="modal fade" id="myModal" role="dialog" aria labelledby="myModalLabel"> 
    <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="myModalLabel">Edit record</h4> 
      </div> 
      <div class="modal-body"> 
       <form id="" action="" method="POST" class="form"> 
       <div class="form-group"> 
        <label for="name1">Name</label> 
        <input type="text" class="form-control" name="name1" id="frm_name" value="test_value"> 
       </div> 
       <div class="form-group"> 
        <label for="ean1">EAN</label> 
        <input type="text" class="form-control" name="ean1" id="frm_ean" value=""> 
       </div> 
       <div class="form-group"> 
        <label for="price1">Price</label> 
        <input type="text" class="form-control" name="price1" id="frm_price" value=""> 
       </div> 
       <div class="form-group"> 
        <label for="date1">Date</label> 
        <input type="text" class="form-control" name="date1" id="frm_date" value=""> 
       </div> 
        <input type="hidden" name="id1" id="frm_id" value=""> 
        <input type="submit" name="submit" class="btn btn-primary btn-custom" value="Save changes"> 
      </form> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <div id="results"></div> 
     </div> 
    </div> 
</div> 

표 CODE

<div class="table-responsive"> 
    <table class="table table-bordered table-hover"> 
     <thead> 
      <tr> 
       <td class="text-left" >ID</td> 
       <td class="text-left" >Product name</td> 
       <td class="text-left">EAN</td> 
       <td class="text-left">Special price</td> 
       <td class="text-left">Date Added</td> 
       <td class="text-right">Action</td> 
      </tr> 
     </thead> 
     <tbody> 
      {% if prices %} 
      {% for price in prices %} 
      <tr> 
       <td class="text-left td_id">{{ price.id }}</td> 
       <td class="text-left td_name">{{ price.product_name }}</td> 
       <td class="text-left td_ean">{{ price.ean_code }}</td> 
       <td class="text-left td_price">{{ price.special_price }}</td> 
       <td class="text-left td_date">{{ price.date_added }}</td> 
       <td class="text-right"> 
        <button type="button" id="item_{{ price.id }}" data-toggle="tooltip" title="Edit" class="btn btn-primary editModal" data-dismiss="modal"><i class="fa fa-pencil"></i></button> 
        <a href="index.php?route=customer/customer/deletePrice&user_token={{ token }}&customer_id={{ customer_id }}&customer_price_id={{ price.id }}" data-toggle="tooltip" title="delete" class="btn btn-danger"><i class="fa fa-trash-o"></i></a> 
       </td> 
      </tr> 
      {% endfor %} 
      {% else %} 
      <tr> 
       <td class="text-center" colspan="5">{{ text_no_results }}</td> 
      </tr> 
      {% endif %} 
     </tbody> 
    </table> 
</div> 
<div class="row"> 
    <div class="col-sm-6 text-left">{{ pagination }}</div> 
    <div class="col-sm-6 text-right">{{ results }}</div> 
</div> 

JS 코드

0

Answer 1

당신은

<button data-toggle="modal" data-target="#view-modal" data-id="<?php echo $item_id; ?>" id="getUser" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-eye-open"></i> View</button> 


<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
      <div class="modal-dialog"> 
        <div class="modal-content"> 

         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
          <h4 class="modal-title"> 
           <i class="glyphicon glyphicon-user"></i> User Profile 
          </h4> 
         </div> 
         <div class="modal-body"> 

          <div id="modal-loader" style="display: none; text-align: center;"> 
          <img src="ajax-loader.gif"> 
          </div> 

          <!-- content will be load here -->       
          <div id="dynamic-content"></div> 

         </div> 
         <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 

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

모달 및 ITEM_ID이

$(document).ready(function(){ 

    $(document).on('click', '#getUser', function(e){ 

     e.preventDefault(); 

     var item_id= $(this).data('id'); // it will get id of clicked row 

     $('#dynamic-content').html(''); // leave it blank before ajax call 
     $('#modal-loader').show();  // load ajax loader 

     $.ajax({ 
      url: 'getitem.php', 
      type: 'POST', 
      data: 'id='+item_id, 
      dataType: 'html' 
     }) 
     .done(function(data){ 
      console.log(data); 
      $('#dynamic-content').html('');  
      $('#dynamic-content').html(data); // load response 
      $('#modal-loader').hide();  // hide ajax loader 
     }) 
     .fail(function(){ 
      $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...'); 
      $('#modal-loader').hide(); 
     }); 

    }); 

});