在bootstrap模式中将javascript ID转换为PHP变量

Question

I have users clicking on a button to popup a bootstrap modal and i'm passing a javascript variable into said modal. I'd like the variable to be a PHP variable so I can query the variable to show photos in the modal once a user clicks the button. Now, I understand PHP is server side and javascript client side which is where i'm lost. I figure it maybe needs some ajax, which is not my area.

Currently I'm using this javascript:

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

In the modal, the following is used and it shows the correct ID in the text box:

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

Answer 1

For Ajax solution, assuming that

open modal button is;

id="bookid" is the image dynamic id you have to pass to Ajax method to fetch images.

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

Ajax Should be

$('.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);
       }
    });
});

and Modal HTML should be

<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>

and in last 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="" />';
    }
?>

Note: If you are opening modal with default behaviour data-attributes then use modal event listener and replace the click function as follow

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

show event listener

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