Question

我已经阅读了几篇提出类似问题的帖子，但我仍然很难完成工作。我真的只是希望我的模态有动态数据。这就是我目前所拥有的：

使用数据填充表格的功能：

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();
    }
);

}

模态

        <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">&times;</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 );
});

我相信我必须将数据传递给onClick一些如何？但是我无法完成工作。

注意：表的其余部分正确加载，并且还为每行创建了一个模式按钮。就在我点击打开模态时，信息错误

从ajax调用将数据传递给bootstrap模式

0 个答案: