v2.5.2
Giriş yap

Ajax ile modal içerisinde dinamik düzenleme sayfası oluşturma

mutluol
1,101 defa görüntülendi

Merhabalar,

bazı verilerin listelendiği bir tablom var, datatables.net'den yararlanarak hazırladım, çok hızlı ve phpden daha fazla imkan sunduğu için hoşuma gitmedi değil. her neyse, javascript bilgim yok. şunu yapmak istiyorum, bu tabloya çektiğim verileri düzenleyebileceğim bir dinamik modal alanı. ama yetersiz olduğum için, nasıl yapacağım konusunda sadece varsayım üretebiliyorum : )

basitçe kod ile anlatmaya çalışırsam, kafa karıştırmadan bir html sayfa düşünelim, tabi bilgileri ajax ile php bir sayfadan alıyorum.

<a data-toggle="modal" data-target="#duzenle?id=id">duzenle</a> basıldığında verilen id değerini modal ekranına nasıl nasıl gönderebilirim?

<script>
$(document).ready(function() {

$('#yeni').DataTable( {
        "language": {"url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Turkish.json"},
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tam"]],
        "responsive": true,
        "stateSave": true,
        "ajax": "../1.php",
        "scrollY": 600,
        "scrollCollapse": true,
        "columns": [
        { "data": "adsoyad" },
        { "data": null,
        "render": function format ( d ) { 
        if ( d.eposta !== '') { return'<a class="btn btn-default btn-sm" href="tel:+9'+d.telefon+'" data-toggle="tooltip" title="Aramak için tıkla"><i class="fas fa-phone" style="color:#6f42c1"></i></a>&nbsp;<a class="btn btn-default btn-sm" href="https://wa.me/9'+d.telefon+'?text='+d.mesaj+'" data-toggle="tooltip" title="Whatsapp mesajı göndermek için tıkla"><i class="fab fa-whatsapp" style="color:#00e676"></i></a>&nbsp;<a class="btn btn-default btn-sm" href="sms:+9'+d.telefon+'?body='+d.sms+'" data-toggle="tooltip" title="Sms göndermek için tıkla"><i class="fas fa-sms" style="color:#6f42c1"></i></a>&nbsp;<a class="btn btn-default btn-sm" href="mailto:'+d.eposta+'" data-toggle="tooltip" title="E-posta göndermek için tıkla"><i class="fas fa-at" style="color:#6f42c1"></i></a>';}else{return'<a class="btn btn-default btn-sm" href="tel:+9'+d.telefon+'" data-toggle="tooltip" title="Aramak için tıkla"><i class="fas fa-phone" style="color:#6f42c1"></i></a>&nbsp;<a class="btn btn-default btn-sm" href="https://wa.me/9'+d.telefon+'?text='+d.mesaj+'" data-toggle="tooltip" title="Whatsapp mesajı göndermek için tıkla"><i class="fab fa-whatsapp" style="color:#00e676"></i></a>&nbsp;<a class="btn btn-default btn-sm" href="sms:+9'+d.telefon+'?body='+d.sms+'" data-toggle="tooltip" title="Sms göndermek için tıkla"><i class="fas fa-sms" style="color:#6f42c1"></i></a>';}} 
        },
        { "data": "yas" },
        { "data": "boy" },
        { "data": "kilo" },
        { "data": null, "render": function format ( d ) { return '<p style="width:150px">'+d.notu+'</p>'; } },
        { "data": "yer" },
        { "data": "tarih" },
        { "data": "anket" },
        { "data": null,"render": function format ( d ) { return '<div class="card collapsed-card"><div class="card-header"><h3 class="card-title">Soruları Görmek İçin Genişletin</h3><div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i> </button></div></div><div class="card-body"><table class="table table-sm"><thead><tr><th>Sorular</th><th>Cevaplar</th></tr></thead><tbody><tr>'+d.cevap1+'</tr></tr>'+d.cevap2+'</tr></tr>'+d.cevap3+'</tr></tr>'+d.cevap4+'</tr></tr>'+d.cevap5+'</tr></tr>'+d.cevap6+'</tr></tr>'+d.cevap7+'</tr></tr>'+d.cevap8+'</tr></tr>'+d.cevap9+'</tr></tr>'+d.cevap10+'</tr></tr>'+d.cevap11+'</tr></tr>'+d.cevap12+'</tr></tbody></table></div></div>'; } },
        /*{ "data": null, "render": function format ( d ) { return '<button href="duzenle?id='+d.id+'">duzenle</button>'; } }*/
    ],
    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
    
} );

} );
</script>

kolonlarda çalıştırabileceğim basit bir fonksiyon gerçekten çok işimi görürdü.

Cevap yaz
Cevaplar (1)
mutluol
1748 gün önce

uyumadan sorunumu çözeyim istedim şöyle bir kaynak buldum https://github.com/felixivance/Bootstrap-Modal-with-Dynamic-MySQL-Data-using-Ajax-PHP denemedim ama gayet mantıklı gözüküyor