Bootstrap While Döngüsü

21-01-2017, 18:35:54

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba,

Tabloya döngü ile listelediğim verileri düzenle butonu vasıtasıyla bootstrap model'de görüntüleyip işlem yaptırıyorum. Fakat modal'ı döngü içinde kullanıp ilk önce verileri çekiyorum. Haliyle fazla veri olduğunda db'yi yoruyor.

Özetle; modal verisini ilk önce döngüde kullanmayayım, butona basıldığında modal açılsın ve o anda db sorgusu yapsın. Bunu nasıl yapabilirim?

Şimdiden teşekkürler.

21-01-2017, 18:49:05

#2

yaramazca

Jquey kullanman lazım. Modal önceden yüklenmiş gidelim edilmiş bilgiyi gösterir normalde.

Sent from my Venus_V3_5070 using Tapatalk

21-01-2017, 19:32:50

#3

BerkPW

yaramazca adlı üyeden alıntı: mesajı görüntüle

Jquey kullanman lazım. Modal önceden yüklenmiş gidelim edilmiş bilgiyi gösterir normalde.

Sent from my Venus_V3_5070 using Tapatalk

Düz JS ile de yapılabiliyor. Ama haliyle daha uzun kodlar oluşuyor.

JQuery ajax üzerinden istediğiniz sorgunun bulunduğu php sayfasına post ya da get değeri göndereceksiniz. Sorgu safasında json formatında ya da isteğe bağlı olarak direk tablo formatındaki veri geri dönüş sağlayacak ve modelin içine basit bir js kodu ile yazılacak.

$("#model_ac").click(function() {
  $.ajax({
    url: 'sorgu.php', //Sorgunun yapılacağı php sayfası
    type: 'POST',
    success: function(data) {
      // Burası veri çekme işlemi başarılı ise olucak kodlar.
    },
    error: function(request, error) {
      alert("REQUEST HATASI: " + request);
    }
  });
});

21-01-2017, 21:52:55

#4

~~alihankoc~~

Üyeliği durduruldu

düzenle butonuna bir tane id vereceksiniz.
mesela düzenleyeceğiniz işlemin id numarası 3.
düzenle butonuna data-id="3" şeklinde data atayacaksınız.
Butonun da bir classı olacak mesela class="duzenlebutonu"

Daha sonra düzenle butonuna tıklandığında id si 3 olan veriyi modal a yazdırmak için şu işlemleri yapacaksınız.

$(document).ready(function(){
 $('.duzenlebutonu').click(function(){  // düzenle butonuna basıldığı zaman
    var id = $(this).data('id'); //bu butondaki id numarasını al
    $.ajax({ //ajax ile bu id ile ilişkili verileri okuyacağız.
       type:"post",
  		 url: "veriningelecegidosya.php",
  		 data:  "id="+id,
  		 dataType: "json",
  		 success: function(array){
  			 if(array.okey == true){
  				    $('#icerik').html(array.cevap);  // ajax ile gelen veriyi modal ın içinde id si icerik olan divin içine yazdır. 
              $('#acilacak').modal('show'); // içinde icerik div i olan modal'ı aç.
  				 }
  			 else {
  			      alert('Bir hata oluştu');
  				}
  		 }
    });
  });
 });

});

İçeriğin okunacağı php dosyasından veriyi json olarak döndürmeniz gerekmektedir.
okey değerimiz de true döndürdüğümüz zaman ajax fonksiyonu başarılı işlem olduğunu anlayacak ve içeriği yazdıracaktır.

okey değeri false dönerse ajax bir hata oluştu uyarısını verdirecektir.

modal ın içine yazdıracağınız veriyi bir değişkene atayıp o değişkeni json olarak yazdırabilirsiniz.

$degisken = array(
"okey"=>true;
"cevap" => "<div> daha fazla div ve içerik burada </div>");
echo json_encode($degisken);

mantık bu, gerisi sizde.

23-01-2017, 13:45:17

#5

MrNone

Vakit ayırarak cevap verdiğiniz için teşekkür ederim. Daha önce ajax'ı get/post işlemleri için kullandım. Fakat json hakkında bir bilgim yok. "İçeriğin okunacağı php dosyasından veriyi json olarak döndürmeniz gerekmektedir." cümlenizi biraz daha açabilirmisiniz? data-id deki veriyi nasıl json ile geri döndüreceğim?

Teşekkürler.

alihankoc adlı üyeden alıntı: mesajı görüntüle

düzenle butonuna bir tane id vereceksiniz.
mesela düzenleyeceğiniz işlemin id numarası 3.
düzenle butonuna data-id="3" şeklinde data atayacaksınız.
Butonun da bir classı olacak mesela class="duzenlebutonu"

Daha sonra düzenle butonuna tıklandığında id si 3 olan veriyi modal a yazdırmak için şu işlemleri yapacaksınız.

$(document).ready(function(){
 $('.duzenlebutonu').click(function(){  // düzenle butonuna basıldığı zaman
    var id = $(this).data('id'); //bu butondaki id numarasını al
    $.ajax({ //ajax ile bu id ile ilişkili verileri okuyacağız.
       type:"post",
  		 url: "veriningelecegidosya.php",
  		 data:  "id="+id,
  		 dataType: "json",
  		 success: function(array){
  			 if(array.okey == true){
  				    $('#icerik').html(array.cevap);  // ajax ile gelen veriyi modal ın içinde id si icerik olan divin içine yazdır. 
              $('#acilacak').modal('show'); // içinde icerik div i olan modal'ı aç.
  				 }
  			 else {
  			      alert('Bir hata oluştu');
  				}
  		 }
    });
  });
 });

});

İçeriğin okunacağı php dosyasından veriyi json olarak döndürmeniz gerekmektedir.
okey değerimiz de true döndürdüğümüz zaman ajax fonksiyonu başarılı işlem olduğunu anlayacak ve içeriği yazdıracaktır.

okey değeri false dönerse ajax bir hata oluştu uyarısını verdirecektir.

modal ın içine yazdıracağınız veriyi bir değişkene atayıp o değişkeni json olarak yazdırabilirsiniz.

$degisken = array(
"okey"=>true;
"cevap" => "<div> daha fazla div ve içerik burada </div>");
echo json_encode($degisken);

mantık bu, gerisi sizde.

23-01-2017, 14:50:13

#6

~~alihankoc~~

Üyeliği durduruldu

MrNone adlı üyeden alıntı: mesajı görüntüle

Vakit ayırarak cevap verdiğiniz için teşekkür ederim. Daha önce ajax'ı get/post işlemleri için kullandım. Fakat json hakkında bir bilgim yok. "İçeriğin okunacağı php dosyasından veriyi json olarak döndürmeniz gerekmektedir." cümlenizi biraz daha açabilirmisiniz? data-id deki veriyi nasıl json ile geri döndüreceğim?

Teşekkürler.

Eposta adresinizi pm olarak gönderin size detaylarla birlikte bir dökümantasyon göndereyim.

24-01-2017, 23:16:10

#7

MrNone

alihankoc adlı üyeden alıntı: mesajı görüntüle

Eposta adresinizi pm olarak gönderin size detaylarla birlikte bir dökümantasyon göndereyim.

Teşekkür ederim. Postunuz ve gönderdiğiniz döküman ile bir çalışma yaptım. Peki modal'da düzenlemek için açtığım bir formun elemanlarının içini db den çekerej bu örnekte divin içini doldurduğumuz gibimi yapmalıyım? Yoksa sadece id yi json ile geri döndürüp html de sorgulayabilme imkanım varmı? Kısacası input seçicilerlemi

25-01-2017, 00:33:42

#8

~~alihankoc~~

Üyeliği durduruldu

MrNone adlı üyeden alıntı: mesajı görüntüle

Teşekkür ederim. Postunuz ve gönderdiğiniz döküman ile bir çalışma yaptım. Peki modal'da düzenlemek için açtığım bir formun elemanlarının içini db den çekerej bu örnekte divin içini doldurduğumuz gibimi yapmalıyım? Yoksa sadece id yi json ile geri döndürüp html de sorgulayabilme imkanım varmı?

Ne demek istediğinizi tam anlayamadım ama anladığım kadarına cevap vereyim.

Bir id atadığınız elemana tıklayınca o id'ye ait veritabanı bilgilerini güncellemek istiyorsunuz, bunu da şu şekilde yapıyorsunuz, id yi ajax ile bir php dosyasına gönderip orada o id'ye ait verileri çekip Json olarak html sayfamıza çağırıyoruz. Mesela id ye ait bilgiler kullanıcı adı, adres ve telefon olsun. Bu bilgileri aldık. Daha sonra modal ın içinde inputlarımız olacak bu 3 alan ile ilgili,

<div class="modal" id="modalbox">
<form method="post" action="#" id="formumuz">
<input type="text" name="kullaniciadi" value="" id="kullaniciadi">
<input type="text" name="adres" value="" id="adres">
<input type="text" name="telefon" value="" id="telefon">
<input type="hidden" name="id" value="" id="id">

<input type="submit" value="Gönder">

</form>

</div>

Gördüğünüz gibi bir tane de gizli input ekledim. Buraya da id numaramızı yazdıracağız.

Ajax ile gelen json formatındaki veriyi array isimli bir değişkene atadık javascriptte. Daha sonra bu array değişkeninin içindeki değerleri inputlara value olarak yazdıracağız.

$('#kullaniciadi').val(array.kullaniciadi);
$('#adres').val(array.adres);
$('#telefon').val(array.telefon);
$('#id').val(array.id);

//sonra modalbox u açacağız.
$('#modalbox').modal('show');

Böylece modalımızın içindeki inputlar bizim çektiğimiz verilerle birlikte gelecek.

Daha sonra bu formun içindeki verilerde değişikliği inputlar aracılığıyla yapınca başka bir ajax fonksiyonu ile yine bir php dosyasına göndereceğiz.

form içindeki verileri şu şekilde alabilirsiniz.

$('#formumuz').submit(function (){
var gönderilecekdata=$('#formumuz').serialize();
//daha sonra burada ajax ile gönderme işlemi yapacağız. 
//ajax fonksiyonunun içindeki data alanına aşağıdaki şekilde form bilgilerini //ekleyebiliriz.
data=gonderilecekdata;
});

daha sonra bu verileri php tarafında şu şekilde alabilirsiniz.

$adres = $_POST['adres'];  //postun içindeki adres değeri inputun name attribute'sinden geliyor..

Umarım faydası dokunur.

25-01-2017, 08:25:45

#9

MrNone

alihankoc adlı üyeden alıntı: mesajı görüntüle

Ne demek istediğinizi tam anlayamadım ama anladığım kadarına cevap vereyim.

Bir id atadığınız elemana tıklayınca o id'ye ait veritabanı bilgilerini güncellemek istiyorsunuz, bunu da şu şekilde yapıyorsunuz, id yi ajax ile bir php dosyasına gönderip orada o id'ye ait verileri çekip Json olarak html sayfamıza çağırıyoruz. Mesela id ye ait bilgiler kullanıcı adı, adres ve telefon olsun. Bu bilgileri aldık. Daha sonra modal ın içinde inputlarımız olacak bu 3 alan ile ilgili,

<div class="modal" id="modalbox">
<form method="post" action="#" id="formumuz">
<input type="text" name="kullaniciadi" value="" id="kullaniciadi">
<input type="text" name="adres" value="" id="adres">
<input type="text" name="telefon" value="" id="telefon">
<input type="hidden" name="id" value="" id="id">

<input type="submit" value="Gönder">

</form>

</div>

Gördüğünüz gibi bir tane de gizli input ekledim. Buraya da id numaramızı yazdıracağız.

Ajax ile gelen json formatındaki veriyi array isimli bir değişkene atadık javascriptte. Daha sonra bu array değişkeninin içindeki değerleri inputlara value olarak yazdıracağız.

$('#kullaniciadi').val(array.kullaniciadi);
$('#adres').val(array.adres);
$('#telefon').val(array.telefon);
$('#id').val(array.id);

//sonra modalbox u açacağız.
$('#modalbox').modal('show');

Böylece modalımızın içindeki inputlar bizim çektiğimiz verilerle birlikte gelecek.

Daha sonra bu formun içindeki verilerde değişikliği inputlar aracılığıyla yapınca başka bir ajax fonksiyonu ile yine bir php dosyasına göndereceğiz.

form içindeki verileri şu şekilde alabilirsiniz.

$('#formumuz').submit(function (){
var gönderilecekdata=$('#formumuz').serialize();
//daha sonra burada ajax ile gönderme işlemi yapacağız. 
//ajax fonksiyonunun içindeki data alanına aşağıdaki şekilde form bilgilerini //ekleyebiliriz.
data=gonderilecekdata;
});

daha sonra bu verileri php tarafında şu şekilde alabilirsiniz.

$adres = $_POST['adres'];  //postun içindeki adres değeri inputun name attribute'sinden geliyor..

Umarım faydası dokunur.

Tekrar teşekkür ederim. Dün gece söylediklerinizi siz foruma cevap yazmadan yapmıştım. Sanırım ajax ve json ile biraz ilerleyebildim

Siz foruma cevap yazınca doğru yaptığımı da anlamış oldum.

Bu işlemler için tek bir eksiğim kalıyor şuan. Json ile geri dönen bilginin text inputunu value'sine işlenmesini zaten öğrendim. Select, radio, checkbox v.b. için detaylı bir çalışma yapmam gerekecek