Twitter Bootstrap Question posted in

PHP variable in bootstrap modal via Ajax – Twitter bootstrap

I have a php page that lists a bunch of id’s from a database. I then have a button next to each id that will open a Twitter Bootstrap modal window in the page and I need to pass the php variable to that model window so that I can do a mysql query in it.

My issue is the model window is just displaying the textbox I setup that should be showing the unique id. However instead it is showing the textbox with just a “null” in it.

My code is below
The link used to trigger the Modal window. Note I confirmed that the link below does show the value for the php variable.

<a href='#switch_modal' class='btn btn-default btn-small' data-toggle='modal' data-id='$scommentid'>REPLY</a>

Ajax code to get the php variable into the Modal window

 <!-- get the unique comment id to use in the modal window -->
  <script>                     
       $(document).ready(function(){
          $('#switch_modal').on('show.bs.modal', function (e) {
                var rowid = $(e.relatedTarget).data('id');                                                                                                  
                $.ajax({
                          type : 'post',
                          url : 'fetch_comment_id.php', //Here you will fetch records 
                          data :  'rowid='+ rowid, //Pass $id
                          success : function(data)
                            {
                                 $('.fetched-data').html(data);//Show fetched data from database
                            }
                         });
                     });
                  });
  </script>

This is my modal window code

<div class="modal fade" id="switch_modal" role="dialog">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit Data</h4>
        </div>
        <div class="modal-body">
            <div class="fetched-data"></div>  
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Below is my fetch_comment_id.php file

  <?php
    $id = $_POST['rowid']; //I know I need to clean this variable
    echo "# <input type='text' name='acommentid' value='$id'>";
  ?>
Tags:

2

Answers


  1. 0

    Try this:

    Replace data-id attribute assigned in anchor tag with following :

     data-id='<?php echo $scommentid; ?>'
    Login or Signup to reply.
  2. 0

    Change

    var rowid = $(e.relatedTarget).data('id');

    to

    var rowid = $(e.relatedTarget).attr('data-id');

    Your code should look like this:

      $('#switch_modal').on('show.bs.modal', function (e) {
    var rowid = $(e.relatedTarget).attr('data-id');
    $.ajax({
      type : 'post',
      url : 'fetch_comment_id.php', //Here you will fetch records 
      data :  'rowid='+ rowid, //Pass $id
      success : function(data) {
        $('.fetched-data').html(data);//Show fetched data from database
      }
    });
  });

    You can see a demo of this working below. Please note that I passed the rowid to the html() instead of data to show that it is correctly passing the value.

    https://jsfiddle.net/29wtk0gu/2/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search