benim şöyle bir kodum var buna tıklayınca normalde aşağıda vereceğim modal açılıyor
Kodum bu
Menü Açılan kod bu
wpuzman bilimokur hsntngr hocalarım yardımlarınızı bekliyorum
bilgisi olan bakabilir mi? bu js veya php kodu lazım |
9 Mesajlar | 804 Okunma | ||
- Üyelik 27.06.2018
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci
- Konum Mersin
- Ad Soyad Z** Z**
- Mesajlar 307
- Beğeniler 15 / 32
- Ticaret 0, (%0)
Arkadaşlar söyle bir js veya php kodu lazım normalde sayfayı görüntüle diyince eklediğim bütün kodlar gözüküyor buda çok fazla html satırı oluyor sayfa yavaş yükleniyor ben bu modal'ı saklayıp sadece js ye veya php' kodu yardımı ile butona tıklayınca göstermesini istiyorum, display none tarzı şeyler işe yaramıyor yinede gözüküyor.. nasıl yapabilirim?
benim şöyle bir kodum var buna tıklayınca normalde aşağıda vereceğim modal açılıyor
Kodum bu
Açılan kod bu
wpuzman bilimokur hsntngr hocalarım yardımlarınızı bekliyorum
benim şöyle bir kodum var buna tıklayınca normalde aşağıda vereceğim modal açılıyor
Kodum bu
Açılan kod bu
wpuzman bilimokur hsntngr hocalarım yardımlarınızı bekliyorum
- Üyelik 21.09.2016
- Yaş/Cinsiyet 31 / E
- Meslek Full Stack Developer
- Konum İstanbul Avrupa
- Ad Soyad H** T**
- Mesajlar 1155
- Beğeniler 99 / 327
- Ticaret 3, (%100)
Şö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.
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);
}
- Üyelik 13.01.2017
- Yaş/Cinsiyet 33 / E
- Meslek Yazılım
- Konum Trabzon
- Ad Soyad B** M**
- Mesajlar 2771
- Beğeniler 293 / 949
- Ticaret 33, (%100)
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');
- Üyelik 27.06.2018
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci
- Konum Mersin
- Ad Soyad Z** Z**
- Mesajlar 307
- Beğeniler 15 / 32
- Ticaret 0, (%0)
Şö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