PHP ile Boostrap Modal Veri Düzenleme Mantığı

20-09-2021, 12:45:44

#1

eycreative

Merhaba arkadaşlar, konumu ziyaret ettiğiniz için teşekkür ederim.

Codeigniter 3 ile bir proje yapıyorum. Bir veriyi boostrap modal özelliği ile düzenletmek istiyorum ama düzenlenecek veriyi bir türlü modala çekemedim. Mantığı nedir bu işin? Konu hakkında bilgisi olan hocalarım yardımcı olur mu?

Şimdiden güzel cevaplarınız için teşekkür ederim.

Kabul Edilen Cevap

0 Beğeni

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

Merhaba arkadaşlar, konumu ziyaret ettiğiniz için teşekkür ederim.

Codeigniter 3 ile bir proje yapıyorum. Bir veriyi boostrap modal özelliği ile düzenletmek istiyorum ama düzenlenecek veriyi bir türlü modala çekemedim. Mantığı nedir bu işin? Konu hakkında bilgisi olan hocalarım yardımcı olur mu?

Şimdiden güzel cevaplarınız için teşekkür ederim.

foreach() döngüsü içine modali yerleştiriniz ve düzenle butonuna id atayınız her butonun kendine ait modali olması için #edit<?= $row->product_id ?> tarzında kullanınız , modal div idsinede bunu uygulayın.

Örnek kendi projemde kullandığım kod :

<td>
                                                        <div class="form-button-action">
                                                            <button type="button" data-toggle="modal" data-target="#edit<?= $row->id ?>" class="btn btn-primary btn-md mx-1">
                                                                <i class="fa fa-edit"></i> Düzenle
                                                            </button>
                                                            <div class="modal fade" id="edit<?= $row->id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h3 class="modal-title" id="exampleModalLongTitle">Sayfa Düzenle</h3>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form action="<?= base_url("Admin/pages/update/" . $row->id) ?>" method="POST">

                                                                                <div class="form-group">
                                                                                    <label>Sayfa Başlık</label>
                                                                                    <input type="text" value="<?= $row->title ?>" class="form-control" name="title" aria-describedby="helpId">
                                                                                </div>

                                                                                <div class="form-group mb-0">
                                                                                    <label>Sayfa İçerik</label>
                                                                                    <textarea id="summernote2" name="content"><?= $row->content ?></textarea>
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <button type="submit" class="btn btn-primary">Güncelle</button>
                                                                                </div>

                                                                            </form>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

20-09-2021, 12:55:58

#2

HelluvA

Çoklu verileri aynı sayfada tek modal üzerinden düzenleyebilmek için verileri jquery ile modala aktarabilirsin input valuelerini vb değiştirebilirsin.Diğer türlüsü ise modalı da verilerin döngüsüne sokup çoklu modal şeklinde yapabilirsin.
20-09-2021, 12:59:46

#3

canyucel

Genelde json(string hali) butonun data'sı üzerinde tutuluyor. Sadece id tutup tıklandığında getirtebilirsin sunucudan vs. Kaydedildiğindeyse sunucuya yeni datayı atıyorsun.

20-09-2021, 13:01:29

Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.

tasarimbey

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

<td>
                                                        <div class="form-button-action">
                                                            <button type="button" data-toggle="modal" data-target="#edit<?= $row->id ?>" class="btn btn-primary btn-md mx-1">
                                                                <i class="fa fa-edit"></i> Düzenle
                                                            </button>
                                                            <div class="modal fade" id="edit<?= $row->id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h3 class="modal-title" id="exampleModalLongTitle">Sayfa Düzenle</h3>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form action="<?= base_url("Admin/pages/update/" . $row->id) ?>" method="POST">

                                                                                <div class="form-group">
                                                                                    <label>Sayfa Başlık</label>
                                                                                    <input type="text" value="<?= $row->title ?>" class="form-control" name="title" aria-describedby="helpId">
                                                                                </div>

                                                                                <div class="form-group mb-0">
                                                                                    <label>Sayfa İçerik</label>
                                                                                    <textarea id="summernote2" name="content"><?= $row->content ?></textarea>
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <button type="submit" class="btn btn-primary">Güncelle</button>
                                                                                </div>

                                                                            </form>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

20-09-2021, 13:16:15

eycreative

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

<td>
                                                        <div class="form-button-action">
                                                            <button type="button" data-toggle="modal" data-target="#edit<?= $row->id ?>" class="btn btn-primary btn-md mx-1">
                                                                <i class="fa fa-edit"></i> Düzenle
                                                            </button>
                                                            <div class="modal fade" id="edit<?= $row->id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h3 class="modal-title" id="exampleModalLongTitle">Sayfa Düzenle</h3>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form action="<?= base_url("Admin/pages/update/" . $row->id) ?>" method="POST">

                                                                                <div class="form-group">
                                                                                    <label>Sayfa Başlık</label>
                                                                                    <input type="text" value="<?= $row->title ?>" class="form-control" name="title" aria-describedby="helpId">
                                                                                </div>

                                                                                <div class="form-group mb-0">
                                                                                    <label>Sayfa İçerik</label>
                                                                                    <textarea id="summernote2" name="content"><?= $row->content ?></textarea>
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <button type="submit" class="btn btn-primary">Güncelle</button>
                                                                                </div>

                                                                            </form>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

Çok teşekkür ederim hocam

önerdiğiniz gibi oldu.

20-09-2021, 13:23:57

VOGO

Her veri için modal çoğaltmak pek mantıklı değil gibi

Tercih ettiğim yapı:
Butonumuza data-id atarız:

<button data-id="{{ $item->id }}" data-toggle="modal" data-target="#showModal" class="btn btn-primary btn-sm">Göster</button>

Modal kodumuz

                              <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="showModal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="showModal">Hesap Bilgisi</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body" id="account_info">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

Ve bu açılan modal'a veri aktaran javascript kodumuz:

                              <script>
                                $(function () {
                                    $("#showModal").on('shown.bs.modal', function (event) {
                                        const button = $(event.relatedTarget);
                                        const btn_id = button.data('id');
                                        $.ajax({
                                            type:'POST',
                                            url:'/url-adresin',
                                            data:{id:btn_id},
                                            success:function(data){
                                                $('#account_info').html(data.account_info);
                                            }
                                        });
                                    });
                                    $('#showModal').on('hide.bs.modal', function () {
                                        $('#account_info').html('Yükleniyor...');
                                    })
                                })
                            </script>

20-09-2021, 14:12:05

#7

tasarimbey

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

Çok teşekkür ederim hocam önerdiğiniz gibi oldu.

rica ederim iyi kodlamalar başarılar dilerim.