同じページのさまざまなモーダルウィンドウ

Question

同じページに2つのモーダルウィンドウがありますが、属性：data-target='#change'のボタンをクリックすると、モーダルウィンドウの変更は表示されません。

<div class="pull-left btn-group"> 
        <button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button> 
<button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button> 

<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
         <h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>  
        </div> 
        <div class="modal-body"> 
         <div class=" text-center"> 
          <div class="btn-group-vertical"> 

           <div class="btn-group"> 
            <button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button> 
           </div> 

           <div class="btn-group"> 
            <button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button> 
           </div> 

           <div class="btn-group"> 
            <button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>  
           </div> 

           <div class="btn-group"> 
            <button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button> 
           </div> 

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

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
        <h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3> 
      </div>    
     </div> 
    </div> 
</div> 


/* EDIT MODAL WINDOW */ 

$('#edit').on('show.bs.modal', function (event) { 

     var $button = $(event.relatedTarget) // Button that triggered the modal 
     var row = $button.closest("tr"), // edit button is in the same row as data you want to change 
     $tds = row.find("td"); // get all table cells in that row 

     $.each($tds, function(index,value) { 

     var field = $(this).data("field"); 

     console.log($(this).text()); 

     $('[name="' + field +'"]').val($(this).text()); //input name in the modal window 
     }); 

    var src_value = $tds.closest("td").find('img').attr('src'); 
    $('[name="imagen"]').attr("src",src_value); 

}); 

/* CHANGE MODAL WINDOW */ 

$('#change').on('show.bs.modal', function (event) { 

    alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections'))); 

}); 

ヘルプ私にしてください：私はjsファイルについては経験していない

私はコードとその問題だろうか？

Answer 1

ページ内のid changeを持つdiv要素がありますので、属性data-target='#change'とボタンが正常に動作しますが、あなたはそこに未定義の変数$tableを持っているので、ちょうどshow.bs.modalイベント内でアラートをコメントをしました。 属性がコードに存在しない#edit要素を参照しているため、2番目のボタンは機能しません。

これが役に立ちます。

$('#edit').on('show.bs.modal', function (event) { 
 

 
    var $button = $(event.relatedTarget) // Button that triggered the modal 
 
    var row = $button.closest("tr"), // edit button is in the same row as data you want to change 
 
     $tds = row.find("td"); // get all table cells in that row 
 

 
    $.each($tds, function(index,value) { 
 

 
    var field = $(this).data("field"); 
 

 
    console.log($(this).text()); 
 

 
    $('[name="' + field +'"]').val($(this).text()); //input name in the modal window 
 
    }); 
 

 
    var src_value = $tds.closest("td").find('img').attr('src'); 
 
    $('[name="imagen"]').attr("src",src_value); 
 

 
}); 
 

 
/* CHANGE MODAL WINDOW */ 
 

 
$('#change').on('show.bs.modal', function (event) { 
 

 
    //alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections'))); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="pull-left btn-group"> 
 
    <button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button> 
 
    <button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button> 
 

 
    <div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
 
      <h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>  
 
     </div> 
 
     <div class="modal-body"> 
 
      <div class=" text-center"> 
 
      <div class="btn-group-vertical"> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button> 
 
       </div> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button> 
 
       </div> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>  
 
       </div> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button> 
 
       </div> 
 

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

 
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
 
     <h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3> 
 
     </div>    
 
    </div> 
 
    </div> 
 
</div>