web-dev-qa-db-ja.com

PHP variable to bootstrap modal

Whileループを使用して作成されたボタンがあります。そのため、whileループはmysqlテーブルの各行に対してテーブル行を作成します。

テーブルの行ごとに再度作成されたボタンのコードが1行あり、各ボタンはそのレコードのidに基づいて異なる値を持っています。

$order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>';

問題は、それを使用したいということです$row['ID']とモーダルで表示して、mysqliクエリを使用して同じIDのレコードを取得できるようにします。

モーダルのコードは次のとおりです。

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit Data</h4>
                </div>
                <div class="modal-body">
                    i want to save the id in a variable here so i can use it in a php script for this modal
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
phpjquerymysqltwitter-bootstrap
7
Rajbir

もし正しければ。

$row['ID']付きのモーダルトリガーボタン

$order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>';

Ajaxメソッドで$row['ID']値を取得するブートストラップモーダルイベント

$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (e) {
        var rowid = $(e.relatedTarget).data('id');
        $.ajax({
            type : 'post',
            url : 'fetch_record.php', //Here you will fetch records 
            data :  'rowid='+ rowid, //Pass $id
            success : function(data){
            $('.fetched-data').html(data);//Show fetched data from database
            }
        });
     });
});

モーダルHTML

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Data</h4>
            </div>
            <div class="modal-body">
                <div class="fetched-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

最後にfetch_record.phpを作成し、レコードを取得してモーダルで表示します

<?php
//Include database connection
if($_POST['rowid']) {
    $id = $_POST['rowid']; //escape string
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>
17
Shehary

これをループの中に入れてください

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>

<div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <?php echo $row['id'];?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
17
Mark Gerryl Mirandilla

ループにモーダルを追加すると、本当に必要でないときにhtmlコンテンツが自動的に複製されます！ループ内の各項目にモーダルを追加することは、それが要求されたときにのみデータを呼び出すのは良い習慣ではありません！

これは、次のボタンをphpのループに追加する例です

<button data-id="<?php echo $note['id']; ?>"  onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click me </button>

モーダルでは、そのIDを使用してdbまたは任意のjsonにリクエストを送信することができます

showmodalと呼ばれるモーダルを使用している場合の例では、この情報を使用してデータベースに新しいリクエストを行うか、クラスまたは関数を要求します！

<?php $dataid = '<span id="dataid"/>'; echo $dataid; ?>

Echo $ dataidは、ループ内でクリックされたアイテムのIDが実際に機能することを示すためだけのものです。

ご覧のとおり、ループには1つのhtmlテンプレートのみを追加し、リクエストされたときにのみデータを呼び出しています。これにより、メモリが節約され、高速になります。

これが多くの人に役立つことを願っています

1
jerryurenaa