CODEWITHSUNDEEP
phpjqueryajaxtwitter-bootstrapbootstrap-modal
abetwothree
abetwothree

Reputation: 577

How to send an ID through AJAX to a PHP file and display the result in a Bootstrap Modal

I have a table where the rows are displayed dynamically based on the database records.

What I am trying to do is that when I click on one of the rows that it loads the Bootstrap modal with all of the information from the database for that specific record.

This is the code for each row that gets displayed and when I click it it displays the modal but the modal is empty without any data.

Initial file

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" <?php echo "id='" . $row['Issue_ID'] . "'"; ?> >

So I am trying to take this dynamic ID value and pass it to a file named issueDisplayModal.php to make the query and then display the details on the modal. Here is the query in the other file.

code that should receive the ID

$issueID = $_POST['record_id']
issueQue ="SELECT * FROM Issues WHERE Issue_ID = $issueID";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

After this I do a series of echoes to print out the information on the modal which I got working (thankfully!).

This is the JQuery code that I'm trying to get to work to send the HTTP request to display the issueDisplayModal.php code on the modal based on the ID that I send it.

AJAX that should call the file and send the ID variable

$('#myModal').on('show.bs.modal', function (e) {
   var $invoker = $(e.relatedTarget);
   var issue_id = $invoker.attr('id');

   $.ajax({
      type : 'post',
       url : 'issueDisplayModal.php', // in here you should put your query 
      data : 'post_id='+ issue_id, // here you pass your id via ajax .
                 // in php you should use $_POST['post_id'] to get this value 
   success : function(r)
       {
          // now you can show output in your modal 
         $('#mymodal').show();  // put your modal id 
         $('.something').show().html(r);
       }
   });

})

This is the modal that should display the result from issueDisplayModal.php

<!-- Modal -->
<div class="modal fade" id="myModal" 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">Issue Details:</h4>
      </div>

      <div class="modal-body">

        <div class="something">

         **results should be displayed here**

        </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">Create Task</button>
        <button type="button" class="btn btn-primary">Close</button>
      </div>

    </div>
  </div>
</div>

Upvotes: 1

Views: 11529

Answers (2)

Shehary
Shehary

Reputation: 9992

There are couple of errors in your approach and unnecessary code 

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" <?php echo "id='" . $row['Issue_ID'] . "'"; ?> >

Change <?php echo "id='" . $row['Issue_ID'] . "'"; ?> to data-id="<?php echo $row['Issue_ID'];?>"

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['Issue_ID'];?>" >

Then in bootstrap modal events you can fetch id in one variable, no need to define 2 variables 

var $invoker = $(e.relatedTarget);
var issue_id = $invoker.attr('id');

you can get id like this;

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

down the road, in Ajax method, success: function is all wrong, you don't need to show the modal again $('#mymodal').show(); and again don't need to show the div something $('.something').show().html(r); so success: function should be

$.ajax({
   type: 'post',
   url: 'issueDisplayModal.php', // in here you should put your query 
   data: 'post_id=' + invoker, // change issue_id to invoker .
   // in php you should use $_POST['post_id'] to get this value 
   success: function (r) { //Change
       // now you can show output in your modal 
       //$('#mymodal').show(); // Don't need this
       $('.something').html(r); // Don't need .show() Here
   }
});

PHP

In Ajax, data is post_id but you are fetching $_POST['record_id'], it should be $_POST['post_id'];

$issueID = $_POST['post_id'];
issueQue ="SELECT * FROM Issues WHERE Issue_ID = '$issueID'";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

To get the result in modal

echo $numResults;

SideNote: Make sure the script is DOM ready.

$(document).ready(function(){
   //Put your script Here
});

That's all and it will work out of the box.

Edit

Final Script looks like

$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (e) {
        var invoker = $(e.relatedTarget).data('id');
        alert(invoker);
        $.ajax({
           type: 'post',
           url: 'issueDisplayModal.php',
           data: 'post_id=' + invoker,
           success: function (r) {
               $('.something').html(r);
           }
        });
    });
});

Upvotes: 2

bingo
bingo

Reputation: 2308

Because you have the data-toggle options selected, you are probably binding more than one click event on the tr element.

If you are not getting a success response, then the only reason the modal is popping is because of these attributes.

If you want to trigger the ajax call on the same click event use the build in modal events

$('#myModal').on('show.bs.modal', function (e) {
    var $invoker = $(e.relatedTarget);
    var issue_id = $invoker.attr('id');
   // now do the $.ajax() call and test for a response
 })

Here's a working example of this kind of thing: http://www.bootply.com/WTgjFfxWSl#

Upvotes: 0

Related Questions