ajax使用jquery

Question

我想在bootstrap 4中使用ajax / PHP响应显示完整的div模式。我有一个包含#ofTheLinkCallAction

的PHP代码

<a href="#demoModal" data-toggle="modal" data-target="#demoModal" class="modal-action btn"   data-id_projet="'.$contents_brand[ 'id_projet' ].'"><p class="post-content  white-text btn-2">' . $contents_brand[ 'detail_projet' ] . '</p></a>

这是我的action.js

     function urlId() {
    //id of url
    $('.post .modal-action').click(function (e) {
        e.preventDefault();
        var id_projet = $(this).data('id_projet');
        var $hidennDiv = $('#' + id_projet);
        //inject id url ajax

        $.ajax({
            url: 'core/libs/contents-services.php?action=getModal&id=' + id_projet,
            type: "get",
            dataType: "html",
            success: function (reponse) {
                $('#demoModal').html(reponse);
                id_projet = reponse.id_projet;
            }
        });

        function ss_takeover_modal() {
            if ($('.modal.takeover').length) {
                $('.modal.takeover').each(function () {
                    takeoverModal(this);
                });
            }
        }

        function takeoverModal(el) {
            $(el).on('show.bs.modal', function (e) {
                var animateaction = $(el).find('.modal-dialog').data('animateaction');
                $(el).find('.modal-dialog').attr('class', 'modal-dialog  ' + animateaction + ' animated');
            });
            $(el).on('hide.bs.modal', function (e) {
                var animateaction = $(el).find('.modal-dialog').data('animateaction');
                $(el).find('.modal-dialog').attr('class', 'modal-dialog  ' + animateReverse(animateaction) + ' animated');
            });
        }

        function animateReverse(action) {
            //Add Animate options w/reverse (close) setting here
            if (action === 'slideInDown') {
                return 'slideOutUp';
            }
            if (action === 'slideInRight') {
                return 'slideOutRight';
            }
        }

        $(document).ready(function () {

            ss_takeover_modal();
            // End takeover modal 
        });

    });

}

urlId();

我的PHP包含返回操作：

      function modal() {
require( "./connexion.php" );
$sql_print = 'SELECT * FROM projets AS P LEFT JOIN images AS I ON P.id_projet=I.fk_projet_id WHERE P.id_projet=' . $_GET[ 'id' ];
$req = mysqli_query( $connexion, $sql_print )or die( mysqli_error( $connexion ) );
//4
$return = "";   
global $data_projet, $data_nom_projet, $data_detail_projet, $data_type_projet, $data_youtube;

while ( $data = mysqli_fetch_array( $req ) ) {

    $data_projet = $data[ 'nom_projet' ];
    $data_detail_projet = $data[ 'detail_projet' ];
    $data_type_projet = $data[ 'type_projet' ];
    $data_youtube = $data[ 'youtube' ];         
}   
$dir = '../../00_sources/images/mockups/'.$data_projet.'/';
if ($data_type_projet == 6){

        echo'
            <a class="btn-floating btn-medium waves-effect waves-light red modal-action modal-close right"><i class="material-icons">close</i></a>

            <div class="container-fluid center">
                <div class="row col s8">
                    <div class="caption color-secondary-2-4 center-align">
                        <h3>'.$data_projet.'</h3>
                        <h5 class="primary-text-color">'.$data_detail_projet.'</h5>

                        <div class="video-container">
                            <iframe width="560" height="315" src="'.$data_youtube.'" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
                        </div>

                    </div>
                </div>'
                ;
}else{

    $images = glob($dir."*");

echo'

<div class="modal fade takeover demo" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true">
<div class="modal-dialog container" role="document" data-animateaction="slideInDown">

    <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
        <div class="row mx-auto">
            <div class="col-xl-8 col-lg-10 col-md-12 mx-auto">
                <div class="modal-content pt-4">
                    <div class="modal-header border-0 pb-3 px-0">
                        <h5 class="modal-title mx-auto bb b-light text-center text-white" id="demoModalLabel">
              Title
              </h5>
                    </div>
                    <div class="modal-body p-0 bg-light">
                        Content
                    </div>
                </div>
            </div>
        </div>
            </div>
          </div>
        </div>
               ';

        foreach($images as $image) {
            echo'
              <div class="row  col d-flex align-items-center">
            <img class="img-fluid" src="'.$image.'"></div>
             </div> 
        ';
          } 

              }

模态显示什么都没有，动作似乎不起作用。可能是我想念一些东西，但我真的不知道在哪里。我想在我的行动中。我有些不对劲。 任何人都可以帮我恳求吗？

Answer 1

我找到了解决方案。在我的回归中，我写了两次模态的div的id。因此，浏览器并不了解要显示哪一个。