Wert von Seite in modal erhalten

Question

Ich habe Tabelle mit Namen, wenn ich auf Namen klicke, muss ich modal öffnen und den Namen setzen, den ich dort klickte. Wie kann ich es tun? Vielen Dank im Voraus

meldung.php

Taste:

<a href='#ReportModal' data-id='1' data-toggle='modal'>Open</a></td> 

modal:

<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">asd</h4> 
     </div> 
     <div class="modal-body"> 
     //HOW TO PRINT HERE? 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

Skript

<script> 
$(document).ready(function() { 
    $(document).on("click",".get-data"function(){ 
     var val = $(this).attr("data-id");  
     $.ajax({ 
      url: "../dist/scripts/report.userinfo.php", 
      type: "POST", 
      dataType: "HTML", 
      async: false, 
      success: function(data) { 
       $('.modal-body').html(data);   
      } 
     }); 

    }); 
}); 
</script> 

report.userinfo.php

Answer 1

Sie sind fast da, jetzt müssen Sie nur den Code ausführen, der den Elementen mit der Klasse get-data zugewiesen ist - um dies zu erreichen, können Sie die Klasse zu Ihrem Anker hinzufügen.

$(document).ready(function() { 
 

 
    $("#ReportModal").dialog(); 
 

 
    $(document).on("click", ".get-data", function() { 
 

 
    var val = $(this).attr("data-id"); 
 

 
    // for the sake of testing we assume your AJAX call works 
 
    // and then you can remove the following line and handle it 
 
    // in the success handler as shown in the comment below 
 
    $('.modal-body').html("You clicked: " + val); 
 

 
    /* 
 
    $.ajax({ 
 
     url: "../dist/scripts/report.userinfo.php", 
 
     type: "POST", 
 
     dataType: "HTML", 
 
     async: false, 
 
     success: function(data) { 
 
     $('.modal-body').html(data); 
 
     } 
 
    });*/ 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<a href='#ReportModal' data-id='1' data-toggle='modal' class="get-data">Open</a> 
 

 
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">asd</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     //HOW TO PRINT HERE? 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>