Converting javascript ID to PHP variable in bootstrap modal

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
     });
});

Answer 2

You do indeed need to use Ajax and pass the id as a parameter.

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

This will send an Ajax request to the URL you specify. You should also substitute the book ID with however you're storing the ID. You could place this in click and populate the modal that way. I'm sure there are also bootstrap-specific events for when the model is open - I wouldn't use a hidden input but perhaps a data attribute on the modal itself in this case.

The URL could render either XML or JSON, which you use to render the posts with JS/jQuery. You could also pre-render the HTML in PHP and render that to the Ajax call so your JS code is simpler.

Hope this helps.

Answer 3

If you want to get values from PHP you need an ajax request. With jQuery you can archive this easily:

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

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

Usually you get an json response and can specify what you want, like this: 'response.bookId'.