AJAX引导模式未显示

AJAX Bootstrap Modal Not Showing

本文关键字：显示 模式 AJAX      更新时间：2023-09-26

我试图展示以下模态，其中主体是数据库驱动的。但是，该数据不会出现在引导模式中。我已经看了太久了，看不出这个问题！

模态

<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 ?>">

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

与其在模式显示的事件中填充它，不如在<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); 
    } 
  });  
})

将其保存为"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");
        }
    }); 
});

EDIT：之所以只显示模式头，是因为<?php echo $postcodeFull ?>正在完成AJAX请求。

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

相关文章：