Passing variable's value to modal box in PHP

Question

I want to pass a variable value to a modal box I call on the same page but have not been able to do it.

Code to open modal box is as below

<li style="font-style:bold" title="rate on skill" class="skill_rating">
<a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='<?php echo $skill_id2[$q]?>'>
<i class="fa fa-anchor" aria-hidden="true"></i>  </a><?php echo $skilltemp2[$q2] ?></li>

Modal Box code as below

<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><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">Search</h4>    
            </div>
            <div class="modal-body">
                <div class="form-group">
                <input type="text" name="bookId" id="bookId" value=""/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"><span>Search</span></button>
            </div>
        </div>
    </div>

Javascript before the closing body tag is as below

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

I saw a couple of answers at stackoverflow (like:Passing data to a bootstrap modal )but I have not been able to customize it as per my requirement.

Pardon me if its is too simple. I am a noob

Do you want to pass variable value to your modal box or you want to pass variable? — Govinda Rajbhar, Apr 04 '17 at 13:11
Your JavaScript is wrong. You have attached "click" event to document. So whenever you click on page the script will run. And you need to learn scoping of "this" in jQuery events. In your case "this" will represent "document" and hence your customization won't work. — Pratik Gaikwad, Apr 04 '17 at 13:12

score 2 · Answer 1 · answered Apr 04 '17 at 13:21

2

This is working in my case. Yes it is not in PHP but i have put static value for Data-Id.

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

Example JSFIDDLE

answered Apr 04 '17 at 13:21

Govinda Rajbhar

2,926
6
37
62

No, I want a variable value to be passed to the modal box – Zigsaw Consultancy Apr 04 '17 at 13:24
Now you can set any variable value in input just you need to pass that variable on behalf of myBookId variable. – Govinda Rajbhar Apr 04 '17 at 13:29

score 0 · Accepted Answer · answered Jun 12 '18 at 04:12

Javascript variables and modal box's value of bookId need to be re-defined. A possible use case as below.

Body Code

<a href="#" data-toggle="modal" data-target="#takeaction" class="btn btn-default"></a>

Modal Box

<div class="modal fade" id="takeaction" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">Display Apply Id in modal box in a dynamic way? </h4>    
    </div>
    <div class="form-inline container hidden-xs hidden-sm">
    <input type="number" value="<?php echo $apply?>" class="form-group" placeholder="Job Code"> 
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span>Confirm</span></button>
    </div>
    </div>
    </div>
    </div>

Javascript Code

<script type="text/javascript">
$('#takeaction').on('show.bs.modal', function(e) {
var apply = $(e.relatedTarget).data('apply');
$(e.currentTarget).find('input[name="apply"]').val(apply);
});
</script>

Passing variable's value to modal box in PHP

2 Answers2