在引導模式下將javascript ID轉換為PHP變量

Question

我有用戶單擊按鈕以彈出引導程序模式，並且我將javascript變量傳遞給所述模式。 我希望該變量是一個PHP變量，因此一旦用戶單擊按鈕，我就可以查詢該變量以在模式中顯示照片。 現在，我知道PHP是服務器端和javascript客戶端，這是我迷路的地方。 我認為它可能需要一些ajax，這不是我的專長。

目前，我正在使用以下javascript：

$(document).on("click", ".open-AddBookDialog", function () {
 var myBookId = $(this).data('id');
 $(".modal-body #bookId").val( myBookId );});

在模式中，使用以下內容，並在文本框中顯示正確的ID：

<input type="text" name="bookId" id="bookId" value="">

Answer 1

對於Ajax解決方案，假設

打開模式按鈕是；

id="bookid"是您必須傳遞給Ajax方法以獲取圖像的圖像動態ID。

<a class="btn btn-primary btn-xs" class="open-modal" href="" id="bookid">Open Modal</a>

Ajax應該是

$('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'fetchimage.php', //Here you should put your query 
      data :  'imageid='+ id, //Here you pass your image id via ajax .
      success : function(data){
          // Open modal and show output data from file.php 
          $('#imagebox').show('show');
         $('#imged').html(data);
       }
    });
});

和模式HTML應該是

<div class="modal fade" id="imagebox" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div id="imged"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

在最后的fetchimage.php

<?php
//Database Connection
    if(isset($_POST['imageid'])){  
        $image = $_POST['imageid']; //Escape the string if you like.
        //Run Query to fetch image from database;
        //This will show the image into modal body
        echo '<img src="path-to-image/'. $row["image"] .'" alt="" />';
    }
?>

注意：如果要使用默認行為data-attributes打開模式，則使用modal event listener並替換click function ，如下所示

<a class="btn btn-primary btn-xs" data-id="bookid" data-target="#myModal" data-toggle="modal">Open Modal</a>

show事件監聽器

$(document).ready(function(){
    $('#imagebox').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id'); //image id
       // Can run Ajax Method here
     });
});

Answer 2

您確實確實需要使用Ajax並將id作為參數傳遞。

$.get('/URL-to-get-posts', {
    bookId: theBookId
}).done(function (data) {
    // code to populate your modal
});

這會將Ajax請求發送到您指定的URL。 您還應該用存儲的ID代替圖書ID。 您可以將其放在單擊中，然后以這種方式填充模式。 我確定打開模型時還會有特定於引導程序的事件-在這種情況下，我不會在模式本身上使用隱藏的輸入，但可能會使用數據屬性。

該URL可以呈現XML或JSON，您可以使用它們使用JS / jQuery呈現帖子。 您還可以預渲染PHP中的HTML並將其呈現給Ajax調用，以便您的JS代碼更簡單。

希望這可以幫助。

Answer 3

如果要從PHP獲取值，則需要ajax請求。 使用jQuery，您可以輕松地將其存檔：

$.ajax({url: "{path_to_php_file}", success: function(response){

        $('#bookId').val(response);
}});

通常，您會收到一個json響應，並可以指定所需的內容，例如：“ response.bookId”。