Verschiedene modale Fenster auf der gleichen Seite

Question

Ich habe zwei modale Fenster in der gleichen Seite, aber wenn ich auf den Knopf mit der Attribution: data-target='#change' das Ändern MODALFENSTER nicht anzeigen.

Ich habe nicht über js erfahren kann ich das Problem mit dem Code sein:

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

}); 

mir bitte helfen?

Answer 1

Die Schaltfläche mit dem Attribut data-target='#change' wird gut funktionieren, weil es ein div mit der auf Ihrer Seite change id ist, haben Sie nur die Warnung innerhalb show.bs.modal Ereignis zu kommentieren, weil Sie eine undefinierte Variable $table dort haben.

HINWEIS: Die zweite Schaltfläche wird nicht funktionieren, weil das data-target Attribut #edit Element beziehen, die nicht in Ihrem Code vorhanden ist.

Hoffe, das hilft.

$('#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>