AJAX Bootstrap 模式不显示

Question

我正在尝试显示以下模式，其中正文是数据库驱动的。但是，此数据并未出现在 Bootstrap 模式中。我已经看这个太久了，看不到问题！

模态

<div class="modal fade" id="eventDetailsModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="memberModalLabel">Event Details</h4>
            </div>
            <div class="dash">

            </div>

        </div>
    </div>
</div>

AJAX

$('#eventDetailsModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever') // Extract info from data-* attributes
      var modal = $(this);
      var dataString = recipient;

        $.ajax({ 
            type: "GET", 
            url: "/getNearestPC.php", 
            data: {"foo": dataString}, 
            cache: false, 
            success: function (data) { 
                console.log(data); 
                console.log(dataString); 
                console.log(recipient); 
                $('.dash').html(data); 
            }, 
            error: function(err) { 
                console.log(err); 
            } 
        });  
})

getNearest.php

    //SQL Setup
    $PC = $_GET['foo']; 

<div class="modal-body center" style="background-color: #FFFFFF">
    <table id="preusertable" class="table table-striped table-hover table-curved" style="width: 100%;">
        <thead>
            <tr>
                <th style="color: #000000;">Event</th>
                <th style="color: #000000;">Postcode</th>
            </tr>
        </thead>
        <tbody> 
        <?php
            while ($row = $sData->fetch(PDO::FETCH_ASSOC)) {
                $school = $row['SchoolURL'];
                $postcodeFull = $row['Postcode'];
                ?>
                <tr>                    
                    <td style="font-size: 1.1em;"><?php echo $school ?></td>
                    <td style="font-size: 1.1em;"><?php echo $postcodeFull ?></td>
                </tr>
                <?php
            }
        ?>
        </tbody>
    </table>
</div>

模态触发器

<a data-toggle="modal" data-target="#eventDetailsModal" data-whatever="<?php echo $postcode ?>">

任何帮助都会很棒！它只显示模态标题但没有正文

Answer 1

不要在模式显示事件上填充它，而是尝试在<a> 的点击事件上执行此操作：

$('a').on('click', function (event) {
  var button = $(this); // Button that triggered the modal
  var recipient = button.data('whatever'); // Extract info from data-* attributes
  var modal = $("#eventDetailsModal");
  var dataString = recipient;

  $.ajax({ 
    type: "GET", 
    url: "/getNearestPC.php", 
    data: {"foo": dataString}, 
    cache: false, 
    success: function (data) { 
      console.log(data); 
      console.log(dataString); 
      console.log(recipient); 
      $('.dash').html(data); 
    }, 
    error: function(err) { 
      console.log(err); 
    } 
  });  
})

Answer 2

将此保存为您的“modal_template.html”：

<div class="modal-body center" style="background-color: #FFFFFF">
<table id="preusertable" class="table table-striped table-hover table-curved" style="width: 100%;">
    <thead>
        <tr>
            <th style="color: #000000;">Event</th>
            <th style="color: #000000;">Postcode</th>
        </tr>
    </thead>
    <tbody> 
        {TBODY}
    </tbody>
</table>

这应该是您的 AJAX 请求：

        <?php
        $PC = $_GET['foo']; 
        $tmpl = file_get_contents("modal_template.html");
        $replace = "";
        while ($row = $sData->fetch(PDO::FETCH_ASSOC)) {
            $school = $row['SchoolURL'];
            $postcodeFull = $row['Postcode'];
            $replace .=  '<tr><td style="font-size: 1.1em;">' . $school . '</td><td style="font-size: 1.1em;">' . $postcodeFull . '</td></tr>';
        }
        $tmpl = str_replace("{TBODY}", $replace, $tmpl);
        echo $tmpl;
    ?>

这样，您将获得一个清晰的模态模板。如果您已经发布了所有代码，这应该会对您有所帮助，并且您的 console.log(data) 应该记录您的“模态模板”。

编辑：

还稍微修改了您的 Jquery（发现一些缺失的“;”）：

$('#YOUR MODAL TRIGGER ID').on('click', function (event) {
event.preventDefault;
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
var modal = $(this);
var dataString = recipient;

$.ajax({ 
    type: "GET", 
    url: "/getNearestPC.php", 
    data: {"foo": dataString}, 
    cache: false
    }).done(function(data){
        if(data != ""){
            console.log(data); 
            console.log(dataString); 
            console.log(recipient); 
            $('.dash').html(data);
            $('#eventDetailsModal').modal("toggle");
        }
        else{
        console.log("error");
        }
    }); 
});

编辑：只显示您的模式标题的原因是因为<?php echo $postcodeFull ?> 正在完成您的 AJAX 请求。

Answer 3

$('a').on('click', function (event) {
  var button = $(this); // Button that triggered the modal
  var recipient = button.data('whatever'); // Extract info from data-* attributes
  var modal = $("#eventDetailsModal");
  var dataString = recipient;

  $.ajax({ 
    type: "GET", 
    url: "/getNearestPC.php", 
    data: {"foo": dataString}, 
    cache: false, 
    success: function (data) { 
      console.log(data); 
      console.log(dataString); 
      console.log(recipient); 
      $('.dash').html(data); 
    }, 
    error: function(err) { 
      console.log(err); 
    } 
  });  
})