Şöyle bir şey yapabilirsiniz hocam.
Doğrudan modali append etmiyoruz çünkü funksiyondan gelen string bir ifade. Önce bunu bir html objesine çevirmemiz gerekiyor. Bunun en pratik yolu ise bir html elementi olusturup içine innerHtml ile eklemek. Farklı yolları da var elbette ama bu daha pratik.
Daha sonra obje haline gelen modali ise htmle ekliyoruz.
HTML;
echo json_encode($html);
}
Doğrudan modali append etmiyoruz çünkü funksiyondan gelen string bir ifade. Önce bunu bir html objesine çevirmemiz gerekiyor. Bunun en pratik yolu ise bir html elementi olusturup içine innerHtml ile eklemek. Farklı yolları da var elbette ama bu daha pratik.
Daha sonra obje haline gelen modali ise htmle ekliyoruz.
var modal, convertToObject, parentDiv;
// modali içine koyacağımızbir parent element seçiyoruz.
parentDiv = document.querySelector("#mySweetModal");
// get modal
modal = getModal();
/**
* String htmli html objeye çevir
*/
convertToObject = document.createElement("div");
convertToObject.innerHTML = modal;
/**
* Obje haline gelen modali html'e ekle
*/
parentDiv.appendChild(convertToObject);
/**
* modali getir
* @return string
*/
function getModal() {
if (modal) return modal; // ikinci seferde ajax isteği atmasın
let xhr = new XMLHttpRequest();
xhr.open("GET", "url-veya-dosya-adresi?retrieveModal", false);
xhr.function () {
return JSON.parse(xhr.responseText);
}
xhr.send();
return xhr.onload();
}
/**PHP KISMI */
if(isset($_GET["retrieveModal"])){
$html = << HTML;
echo json_encode($html);
}
Boş kalan yeri ajax ile dolduracaksınız.
Önce bootstrap event lara bakıyoruz. https://getbootstrap.com/docs/4.0/components/modal/#events
$('#myModal').on('show.bs.modal', function (e) {
// do something...
})
show.bs.modal yani modal gözükünce eylem gerçekleştir demek.
Biz de modalımız ortaya çıkınca ajax ile html çağıracağız.
$('#abc').on('show.bs.modal', function (e) {
$.ajax({
type: 'POST',
url: 'https://site.com/wp-admin/admin-ajax.php',
data: { action: ajaxFonksiyonu },
beforeSend: function (xhr) {
},
error: function (request, status, error) {
},
success: function (response) {
$('.modal-body').html(response);
},
complete: function () {
},
});
})
Php tarafından html kodumuzu ajaxa gönderiyoruz.
function ajaxFonksiyonu() {
echo 'Html içeriği buraya';
exit();
}
add_action('wp_ajax_ajaxFonksiyonu', 'ajaxFonksiyonu');
add_action('wp_ajaxnopriv_ajaxFonksiyonu', 'ajaxFonksiyonu');
Hocalarım çok teşekkür ederim fakat çalıştıramadım, bilimokur hocam sizin dediğinizi yaptım