jQuery経由でdivからmodalへデータを取得

Question

データベースからデータを取得したdivを生成しました。それらのすべては一意のIDを持っています。私は選択されたdivからデータを取得する必要があります（これはコード化されています）、IDを介してこのdivのデータをモーダルにすることになっています。

MODAL：アウトモーダル呼び出します

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <form class="form-horizontal" id="edit-form"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label for="add-firstname" class="col-sm-2 control-label">Imie</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="add-pesel" class="col-sm-2 control-label">Telefon</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="b" class="col-sm-2 control-label">Płeć</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="d" class="col-sm-2 control-label">Typ Konta</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required> 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button> 
      <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

が機能：複数のdivの

function edit(){ 
    $('#edit-modal').modal('show'); 
} 

1：

<div class="panel panel-kol" mid="4"><div class="panel-body profile white"> 
    <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div> 
    <div class="profile-data"> 
    <div class="profile-data-name" style="font-weight: bold;">Krzysztof Marczewski</div> 
    <div class="profile-data-title">Recepcjonista</div> 
    </div> 
</div>         
<div class="panel-body">          
    <div class="contact-info text-center" style="margin-top: -20px;"> 
    <p><small>Telefon komórkowy</small><br>997998999</p> 
    <p><small>Od - Do</small></p> 
    <div class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-4"> 
      <div class="input-group"> 
      <input type="text" class="form-control" value="00:00:12"> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="input-group"> 
      <input type="text" class="form-control" value="00:00:19"> 
      </div> 
     </div> 
     <div class="col-md-2"></div> 
     </div>    
    </div> 
    </div> 
</div> 

"ミッド" はPHPによって生成されたすべてのDIVに割り当てられた固有のIDです。 。

SS v2の：私はちょうどモーダル

SSにすでに生成されたdiv要素からデータを取得する必要があります。

Answer 1

私が正しい理解場合は、これを見て...

$(document).ready(function(){ 
 
function edit(){ 
 
      $('#edit-modal').modal('show'); 
 
     } 
 
function insertData(mid){ 
 
    var panel = $('.panel[data-mid="'+mid+'"]'), 
 
     fullName = panel.find('.full-name').text(), 
 
     arrName = fullName.split(" "), 
 
     modal = $('#edit-modal'); 
 
\t \t \t \t 
 
    modal.find('#add-firstname').val(arrName[0]); 
 
    modal.find('#add-nazwisko').val(arrName[1]); 
 
    modal.find('#add-pesel').val(panel.find('.phone').text()); 
 
    modal.find('#g').val(panel.find('.start-time').val()); 
 
    modal.find('#t').val(panel.find('.end-time').val()); 
 
} 
 
\t \t \t \t 
 
\t \t \t \t edit(); 
 
\t \t \t \t insertData(4); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label"> 
 
     <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <form class="form-horizontal" id="edit-form"> 
 
       <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button> 
 
       <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <div class="form-group"> 
 
         <label for="add-firstname" class="col-sm-2 control-label">Imie</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="add-pesel" class="col-sm-2 control-label">Telefon</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="b" class="col-sm-2 control-label">Płeć</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="d" class="col-sm-2 control-label">Typ Konta</label> 
 
         <div class="col-sm-10"> 
 
          <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button> 
 
       <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button> 
 
       </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
\t \t 
 
\t \t <div class="panel panel-kol" data-mid="4"><div class="panel-body profile white"> 
 
           <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div> 
 
           <div class="profile-data"> 
 
            <div class="profile-data-name full-name" style="font-weight: bold;">Krzysztof Marczewski</div> 
 

 
            <div class="profile-data-title">Recepcjonista</div> 
 
           </div> 
 
          </div>         
 
          <div class="panel-body">          
 
           <div class="contact-info text-center" style="margin-top: -20px;"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <p><small>Telefon komórkowy</small><br><span class="phone">997998999</span></p> 
 
            <p><small>Od - Do</small></p> 
 
            <div class="row"> 
 
            <div class="col-md-2"></div> 
 
            <div class="col-md-4"> 
 
             <div class="input-group"> 
 
              <input type="text" class="form-control start-time" value="00:00:12"> 
 
             </div> 
 
            </div> 
 
            <div class="col-md-4"> 
 
             <div class="input-group"> 
 
              <input type="text" class="form-control end-time" value="00:00:19"> 
 
             </div> 
 
            </div> 
 
            <div class="col-md-2"></div> 
 
           </div>    
 
         </div> 
 
        </div> 
 
       </div>

Answer 2

私は問題が何であるかを間違って理解している場合、私を許してください。 var divValue = $("div[mid='4']").val()を試してモーダルにプッシュしてください:) HereのjQueryのドキュメンテーションは、選択と同じです。

Answer 3

modalの入力をdivのデータに割り当てるには、必要な情報を持つノードごとにdata-*属性を設定することをお勧めします。例えば：

<div class="profile-data-name" style="font-weight: bold;"> 
    <span data-imie="firstname">Krzysztof</span> 
    <span data-nazwisko="lastname">Marczewski</span> 

それはモーダルから関連する入力用name属性と等しくなければなりません。

、その後、edit()機能で、あなたはすべての入力を反復処理しなければならないと、関連するデータとその値を設定します。

function edit(mid){ 
    var inputs = $('#edit-modal').find('.modal-body').find('input); 
    inputs.forEach(function(input) { 
    $(input) 
     .val($("div[mid='" + mid + "']") 
     .find('[data-name="' + $(input).attr('name') + '"]).text()) 
    }) 
    $('#edit-modal').modal('show'); 
}