PHP variable in bootstrap modal via Ajax

Question

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'>";
  ?>

OK so think of the page I am trying to make as an email inbox. on that inbox type php / mysql page I have a listing of message names and message id's which I am pulling from a database. Thats all good and well. Now I also have a button on each row that essentially will open a Twitter Bootstrap Modal window where I intend to display the message the user clicked on in. So I need a way when you click the link I have in my message above to use ajax to get the value of data-id in my a href link into my modal window — Jayreis
– Jayreis, Commented Feb 21, 2016 at 19:45
I am still looking for suggested solutions to this issue anyone :( — Jayreis
– Jayreis, Commented Feb 24, 2016 at 14:42
Can you use jsfiddle or jsbin to create a minimal, complete, verifiable example? stackoverflow.com/help/mcve I think that would help everyone understand the problem. It sounds like you could create this example without PHP by mocking up the HTML that PHP is creating. — Matt
– Matt, Commented Feb 24, 2016 at 14:47
the error has to be somewhere else. i just rebuilt this setup and everything works fine here. you should try to debug your code. for example after var rowid = $(e.relatedTarget).data('id'); do alert(rowid); to see if you get the rowid from your javascript code. or in your PHP code change $id = $_POST['rowid']; to $id = $_REQUEST['rowid'];. then open it in your browser, passing the variable in the url: fetch_comment_id.php?rowid=1234 and see what the PHP script returns. — low_rents
– low_rents, Commented Feb 25, 2016 at 20:25

Err · Accepted Answer · 2016-02-26 03:27:26Z

2

+50

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/

edited Feb 26, 2016 at 3:27

answered Feb 26, 2016 at 3:19

Err

9502 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shivani P · Accepted Answer · 2016-02-22 06:57:22Z

-1

Try this:

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

 data-id='<?php echo $scommentid; ?>'

answered Feb 22, 2016 at 6:57

Shivani P

4162 silver badges10 bronze badges

1 Comment

Jayreis Over a year ago

Thanks for the suggestion Shivani Patel however the line that data-id='' is wrapped in a <?php echo""; ?> tag. So the data-id= does contain the correct value when I view the pages source. My issue is the fetch_comment_id.php file does not seem to me getting the value of the data-id so I am not sure if it is my javascript/ajax that is wrong or the fetch_comment_id.php file

Collectives™ on Stack Overflow

PHP variable in bootstrap modal via Ajax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related