PHP + JS Modal - zeige Wert in modal

Question

Ich suche nach Daten aus einer MySQL - Abfrage und versuche nun, sie in <input> Felder in meinem Modal anzuzeigen, indem ich JS es dorthin legen lasse, aber aus welchen Gründen auch immer kann ich das nicht übergeben Variablen in das Modal. Ich habe ehrlich gesagt keine Ahnung von Javascript, daher vermute ich ein Problem dort.

PHP generierten HTML-Taste:

<td><button type=\"button\" class=\"btn btn-block btn-primary btn-xs\" data-toggle=\"modal\" data-target=\"#edit\" data-id=\"$id\" data-date=\"$date\">Edit</button></td> 

Modal:

<!-- Modal --> 
<div class="modal fade" id="edit" tabindex="-1" 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 Details</h4> 
     </div> 
     <div class="modal-body"> 
     <table class="table"> 
      <tr> 
       <?php 
       echo " 
        <td>ID No.: </td><input name=\"dataID\" value=\"\" /></td> 
        <td>Date: </td><input name=\"dataDate\" value=\"\" /></td>"; 
       ?> 
      </tr> 
     </table> 
     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- /.Modal --> 

Javascript:

<script> 
$('#edit').on('show.bs.modal', function(e) { 
    var dataID = $(e.relatedTarget).data('id'); 
    $(e.currentTarget).find('input[name="dataID"]').val(dataID); 
    var dataDate = $(e.relatedTarget).data('date'); 
    $(e.currentTarget).find('input[name="dataDate"]').val(dataDate); 
}); 
</script> 

Dank viel

Answer 1

Ihr Javascript-Code funktioniert für mich, bitte rechts Klick -> "view sourse" sicher, $ id und $ date zu machen sind an gedruckt:

data-id=\"$id\" data-date=\"$date\" 

$('#edit').on('show.bs.modal', function(e) { 
 
    var dataID = $(e.relatedTarget).data('id'); 
 
    $(e.currentTarget).find('input[name="dataID"]').val(dataID); 
 
    var dataDate = $(e.relatedTarget).data('date'); 
 
    $(e.currentTarget).find('input[name="dataDate"]').val(dataDate); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 

 
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#edit" data-id="abcabc" data-date="12-03-2014">Edit</button> 
 

 

 

 
<!-- Modal --> 
 
          <div class="modal fade" id="edit" tabindex="-1" 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 Details</h4> 
 
            </div> 
 
            <div class="modal-body"> 
 
            <table class="table"> 
 
             <tr> 
 
              <td>ID No.: </td><input name="dataID" value="" /></td> 
 
              <td>Date: <input name="dataDate" value="" /></td> 
 
             </tr> 
 
            </table> 
 
            </div> 
 

 
            <div class="modal-footer"> 
 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
            <button type="button" class="btn btn-primary">Save changes</button> 
 
            </div> 
 
           </div> 
 
           </div> 
 
          </div> 
 
          <!-- /.Modal -->