ajax return response with jquery - php

Question

i want to display a full div modal in bootstrap 4 with ajax/PHP response. I have a php code that contains the #ofTheLinkCallAction
<p class="post-content white-text btn-2">' . $contents_brand[ 'detail_projet' ] . '</p>
This is my 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();
And my PHP that contains the return action :
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>
';
}
}
The modal is showing nothing, the action at seems to not works. May be i miss something but i really don't see where. I think in my action.js i have something wrong.
Can anyone help me pleas ?

Answer 1

I find the solution. In my php's return, i was writing twice the id's of the modal's div. So the browser doesn't understand which one to show.