Button data-id değerini Modal içindeki değişkene atama

02-02-2019, 20:15:53

#1

fatihbozkurt

Kimlik doğrulama veya yönetimden onay bekliyor.

Php sayfamda bulunan butonlara tıklayınca aynı sayfada bulunan modal divi açılıyor. Button data-id değerini modal içindeki değişkene nasıl aktarabilirim?

<button type="button" class="btn btn-primary btn-sm" data-id="<?php echo $cikti["id"]; ?>" data-toggle="modal" data-target="#myModal">Düzenle</button>

Yukarıdaki buttona ait data-id değerini aynı sayfadaki #myModal divi içindeki $kod değişkenine aktarmak istiyorum.

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Başlığı</h4>
</div>
<div class="modal-body">

<?php
$kod = ..... button data-id.......
?>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
02-02-2019, 20:35:31

#2

metin_nn

PHP - WORDPRESS - YAZILIM

bu şekilde sanıyorum ki ancak javascript ike yapalirsiniz hocam yada değeri ajax ile post edeceksiniz içerde işlem yapacaksınız.
02-02-2019, 21:31:06

#3

fatihbozkurt

Evet ajax ile nasıl button data-id değerini #myModal div ine post edeceğim? Madaldan bu post değerini değişkene atamam gerekiyor.
03-02-2019, 20:59:13

#4

metin_nn

PHP - WORDPRESS - YAZILIM
fatihbozkurt adlı üyeden alıntı: mesajı görüntüle

Evet ajax ile nasıl button data-id değerini #myModal div ine post edeceğim? Madaldan bu post değerini değişkene atamam gerekiyor.

Merhabalar alıntılayıp cevap vermeniz işe yarayabilir o zaman bildirim düşüyor. Yazdığınızı görmediğim için geç cevap vermek durumunda kaldım Örnek Kodlama Aşağıdaki gibidir.

Öncelikle Buttona Bir ID verin örneğin duzenle olsun.
```
$(document).on('click', '#duzenle', function() {
    var data-id= $(this).attr("data-id"); // Bu Kısımda data-id Versini Aldık.
        $.ajax({
            url: "post.php",
            method: "POST",
            data: {
                data-id: data-id
            },
            success: function(data) {
              $('.modal-body').html(data);
            }
    }
});
```
post.php
```
<?php
  $deger = $_POST['data-id'];
  echo $deger;
?>
```
Edit Nedeni : ";" işaretini unutmuşum.

03-02-2019, 21:57:32

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

Öncelikle Buttona Bir ID verin örneğin duzenle olsun.

$(document).on('click', '#duzenle', function() {
    var data-id= $(this).attr("data-id"); // Bu Kısımda data-id Versini Aldık.
        $.ajax({
            url: "post.php",
            method: "POST",
            data: {
                data-id: data-id
            },
            success: function(data) {
              $('.modal-body').html(data);
            }
    }
});

post.php

<?php
  $deger = $_POST['data-id'];
  echo $deger;
?>

Edit Nedeni : ";" işaretini unutmuşum.

Kodlarım yukarıdaki gibi data-target ile modalı çağırıyorum. Burada siz farklı bir sayfaya (post.php) post işlemi yapmışsınız. Button ve modal aynı sayfada olunca bu işlemi nasıl yapabiliriz?

03-02-2019, 23:36:12

metin_nn

PHP - WORDPRESS - YAZILIM

Bir kısım açıklama yapmış idim fakat sayfayı yenileyince silindi. Direk sayfa yapısına uygun örnek ile aşağıya ekliyorum.

1) Ajax Post Yöntemi ile.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
<body>


<button type="button" id="duzenle" class="btn btn-primary btn-sm" data-id="1"  data-toggle="modal" data-target="#myModal">Düzenle</button>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal içeriği-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Başlığı</h4>
</div>
<div class="modal-body">


</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script>
$("#duzenle").click(function(e) {
    var id= $(this).attr("data-id");
    $.ajax({
        type: "POST",
        url: "post.php",
        data: {
            id:  id,
        },
        success: function(result) {
              $('.modal-body').html(result);
        },

    });
});
</script>

</body>
</html>

<?php
  $deger = $_POST['id'];
  echo $deger;
?>

2 ) Ajax Post Etmeden

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>

    <button type="button" id="duzenle" class="btn btn-primary btn-sm" data-id="1" data-toggle="modal" data-target="#myModal">Düzenle</button>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal içeriği-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Modal Başlığı</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <script>
        $(document).on('click', '#duzenle', function() {

            var id = $(this).attr("data-id");              
            $('.modal-body').html(id);

        });
    </script>

</body>

</html>

Anlamadığınız yer olursa sorabilirsiniz.

04-02-2019, 01:13:16

fatihbozkurt

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

Bir kısım açıklama yapmış idim fakat sayfayı yenileyince silindi. Direk sayfa yapısına uygun örnek ile aşağıya ekliyorum.

1) Ajax Post Yöntemi ile.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
<body>


<button type="button" id="duzenle" class="btn btn-primary btn-sm" data-id="1"  data-toggle="modal" data-target="#myModal">Düzenle</button>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal içeriği-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Başlığı</h4>
</div>
<div class="modal-body">


</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script>
$("#duzenle").click(function(e) {
    var id= $(this).attr("data-id");
    $.ajax({
        type: "POST",
        url: "post.php",
        data: {
            id:  id,
        },
        success: function(result) {
              $('.modal-body').html(result);
        },

    });
});
</script>

</body>
</html>

<?php
  $deger = $_POST['id'];
  echo $deger;
?>

2 ) Ajax Post Etmeden

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>

    <button type="button" id="duzenle" class="btn btn-primary btn-sm" data-id="1" data-toggle="modal" data-target="#myModal">Düzenle</button>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal içeriği-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Modal Başlığı</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <script>
        $(document).on('click', '#duzenle', function() {

            var id = $(this).attr("data-id");              
            $('.modal-body').html(id);

        });
    </script>

</body>

</html>

Anlamadığınız yer olursa sorabilirsiniz.

1. Ajax post ile verdiğiniz ilk bölümde "post.php" sayfasına data-id değerini post ederek değişkene aktarıyorsunuz ama benim button ile modal aynı sayfada bulunuyor. post.php adlı bir dosyamı oluşturacağım. Modal ile post.php arasında nasıl bağlantı kuracağım? Modal divi içinde veritabanı işlemleri yaptıracağım için, yani bu post php sayfasına yolladığınız değişkeni modal içinde kullanmam gerekiyor.

2. Ajax post etmeden olan kısmı denediğimde data-id değerini modal-body içine direk yazıyor. Bu ekrana yazılan değeri değişkene nasıl atayacağım?

04-02-2019, 01:22:51

#8

metin_nn

PHP - WORDPRESS - YAZILIM
fatihbozkurt adlı üyeden alıntı: mesajı görüntüle

1. Ajax post ile verdiğiniz ilk bölümde "post.php" sayfasına data-id değerini post ederek değişkene aktarıyorsunuz ama benim button ile modal aynı sayfada bulunuyor. post.php adlı bir dosyamı oluşturacağım. Modal ile post.php arasında nasıl bağlantı kuracağım? Modal divi içinde veritabanı işlemleri yaptıracağım için, yani bu post php sayfasına yolladığınız değişkeni modal içinde kullanmam gerekiyor.

2. Ajax post etmeden olan kısmı denediğimde data-id değerini modal-body içine direk yazıyor. Bu ekrana yazılan değeri değişkene nasıl atayacağım?

Örneklerle anlatmaya çalıştım aslında sizin mantıkta 2.numaralı işlem işinizi görmeyecektir o halde, Modalı Sadece listeleyeceğiniz sayfada yukarıda anlattığım gibi kuracaksınız.

Modal içinde yapacağınız işlemi ise;

Post.php içinde yapacaksınız Kodları örnek veriyorum.
```
include("baglanti.php"); // Php Veritabanı Arasındaki bağlantı dosyalarınız. (Dizininiz ne bilmiyorum tahminen baglanti.php yazdim.)

$id = $_POST['id']; // ajax post ile gelen button id'miz.
$query = mysqli_query($conn, "SELECT * FROM tablo_adiniz id='$id'"); // sql sorgu yaptığımız fonksiyonumuz
$row = mysqli_fetch_array($query); // Yukarıdaki id'mize ilişkin tablo_adiniz tablosundan gelen verimizi sorguluyorum.
$fiyat = $row['fiyat']; // diyelim ki o tabloda fiyat diye bir sutunum var ve ben o fiyatı yazdırmak istiyorum. bir değişkene atıyorum.
echo $fiyat; // yazdırıyorum.
```
Ne yaptık şimdi ? butona tıkladığımda o id'nin verilerini veritabanına sordum, veritabanından onunla ilgili bir fiyat sutunum olduğunu varsaydım ve yazdırdım, artık modal-body içine fiyatı yazdıracaktır.

ek olarak matematiksel bir işlemde yapabilirsiniz, farklı bilgileride yazdırabilirsiniz karar tamamen sizin ama asıl olay, post.php'de yapılan kısımdır orada ne yaparsanız modal içinde onu göreceksiniz
04-02-2019, 01:31:34

#9

fatihbozkurt

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

asıl olay, post.php'de yapılan kısımdır orada ne yaparsanız modal içinde onu göreceksiniz

Tamam şimdi anladım dediğiniz gibi yaptım çalıştı çok teşekkür ederim. Kusura bakmayın biz böyle yolun başında olunca öğrenmemiz kolay olmuyor