passing data to a bootstrap modal from an ajax call
-
05-06-2023 - |
Вопрос
I have read several posts asking the similar question, but I am still having a hard time getting the job done. I really just want my modal to have dynamic data. This is what I currently have:
Function to populate the table with data:
function getHitch(){
$.getJSON(
"..localhost/HitchBoard/test.txt",
function(data) {
var table = "<thead><tr><th><span>Flight Date</span></th><th><span>Flight Time</span></th><th><span>From</span></th><th><span>To</span></th>"+
"<th><span>Aircraft</span></th><th><span>Pets</span></th><th><span>Children</span></th></tr></thead><tbody>";
$.each(data, function(i,item) {
var date = new Date(item.flight.flightDate);
table += '<tr>';
table += '<td id="">'+date.toDateString()+'</td>';
table += '<td>'+date.toTimeString()+'</td>';
table += '<td>'+item.flight.fromAirport.name+'</td>';
table += '<td>'+item.flight.toAirport.name+'</td>';
table += '<td>'+item.flight.requestedAircraft.typeName+'</td>';
table += '<td>'+item.petsAllowed+'</td>';
table += '<td>'+item.childrenAllowed+'</td>';
table += '<td><button class="open-AddBookDialog btn btn-primary" data-toggle="modal" data-target="#myModal">Accept Flight</button></td>';
table += '</tr>';
});
table += '</tbody>';
$("#keywords").append(table).tablesorter();
}
);
}
modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h2 class="modal-title" id="myModalLabel">Flight: From: KHPN - To: KHPN</h2>
</div>
<div class="modal-body" id="modalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Message Member</button>
<button type="button" class="btn btn-primary">Accept Flight</button>
</div>
</div>
</div>
</div>
onClick
$(document).on("click", ".open-AddBookDialog", item, function () {
var modal=item.flight.fromAirport.name;
$("#modalBody").append( modal );
});
I believe I have to pass the data to the onClick some how? But I am having trouble trying to get the job done.
Note: the rest of the table loads properly and there is a button to the modal that is created for each row as well. Just when I click to open the modal, the info is wrong
Нет правильного решения
Не связан с StackOverflow