How to echo id value as variable in bootstrap modal window?

Question

I thought this would be easy enough but it's giving me problems. I tried searching other answers to solve this­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­, but to no avail. I have a list of buttons where the id value is dynamic.­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

<a href="#" class="btn btn-defau­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­lt notesButton" data-id="<?php echo $id; ?>"
role="button">Notes</a>

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ Then have JavaScript where I want to opent the modal window and get the id as a variable that I can echo in the window or use in a query.­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

$(document).ready(function(){
    $(".notesButton").click(function(){
        $("#notesModal").modal();
        var myOrderId = $(this).data('id');
    });
});

Finally, I try to echo myOrderId in the modal, or use it in a query. But, it doesn't show.

<div id="notesModal" 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">Order Notes</h4>
        </div>
        <div class="modal-body">

          <?php echo $myOrderId; ?>              

        </div>
    </div>
    </div>
</div> <!-- end modal --> 

Once I'm able to echo this value, then it should be easy to use it in an sql query inside the window, but for now I can't get the value to echo in the modal window. Any suggestions please?

Answer 1

$("#notesModal").on("show.bs.modal", function(evt) {
    var $btn = $(evt.relatedTarget);
    var $modal = $(evt.target);
    var $content = $modal.find(".modal-body");

    $content.text( $btn.data("id") );
});

1. PHP is server side language, javascript is client-side language, so it is called afterwards.
2. var myOrderId is javascript, not PHP variable.

You can try it out here: jsfiddle

Learn more about Bootstrap Modals in documentation.

EDIT: Regarding SQL query:

If you want to use your id as a paramter in SQL query when modal shows, again, you do not do that client, but server side. According to varying modal content chapter of documentation, general approach is:

1. Store varying data in the element which shows modal (you already do that with your data-id)
2. Now you have two different approaches:
   • POST AJAX call to your server within .on('show.bs.modal', function(){}) second parameter, where you send the data you store in the button (data-id), query your DB server side and respond with required results, which you can use before modal shows in AJAX callback function;
   • prepare all the SQL data beforehand, render it as JSON document within element which show.bs.modal, as let's say data-sql, and then use it in the second parameter of .on('show.bs.modal', function(){})method, accessing it like: $(evt.relatedTarget).data("sql");