Question

I am using the script code below to get results from my database based on the ID of a button when the user clicks it. The database results return fine in the form alert(msg) I am testing as an output. Could someone please help as to how I might return in the results in a modal window instead? I am using bootstrap for my application which uses bootstrap-modal.js, I can’t figure out how I might integrate the two scripts.

<script type="text/javascript">
   $(document).ready(function() {
     $(function() {
       $('.ajax-link').click( function() {
        $.get( $(this).attr('href'), function(msg) {
          alert(msg);
        });
        return false; // don't follow the link!
      });
    });
  });
</script>

Example of a bootstrap modal call:

<script>
  $(function() {
    $('#userGuide').modal({
    backdrop: true;
  });
});
</script>

UPDATE: This is the code on the page I am trying to return the user #userGuide from using $.get based on the ID of the button clicked:

    <?php

    //MySQL Database Connect
    require 'config.php';

    $id = $_GET["id"];
    $stmt = $dbh->prepare('CALL sp_get_recipe_items(:id)');
    $stmt->bindParam(':id',$id,PDO::PARAM_INT,4000);
    $res = $stmt->execute();

    if ($res){
        while( $row = $stmt->fetchObject() ){
            echo "<div id='userGuide' class='modal hide fade'><div class='modal-body'>".$row->Ingredient."&nbsp;".$row->Quantity."&nbsp;".$row->UoM."&nbsp;</div></div>";
            }

    }else{
    $arr = $sth->errorInfo();
    echo "Execution failed with MYSQL: " . $arr[0] . "\n";
    die();
    }                      

?>

Answer 1

Try

$(document).ready(function() {
    $('.ajax-link').click(function(event) {
        $('#container').load($(this).attr('href'), function() {
            $('#container').modal({
                backdrop: true
            });
        });
        event.preventDefault();
    });
});​

This uses the .load() method to load content into the container element, so you need to add a new element on the page:

<div id="container" style="display:none"></div>

then uses the callback to show the dialog (.modal()) using the container. As you are returning multiple <div>s you need to add them to a container before making that the dialog.

Also added the event parameter to the click callback function and using preventDefault() instead of return false.

Note that

$(document).ready(function() {

and

$(function() {

do the same thing – the second is short hand for the first.

Update

If you look at the docs for the modal window you will see the markup needs to be

<div class="modal" id="myModal">
  <div class="modal-body">
   <div>Butter & nbsp; 45 & nbsp; grams & nbsp;</div>
   <div>Flour & nbsp; 12 & nbsp; grams & nbsp;</div>
  </div>
</div>

then you use $('#myModal').modal(options) to show the window ….

So i suggest you try this, first edit your PHP loop :

echo "<div class='modal-body'>";
while( $row = $stmt->fetchObject() ){
   echo "<div>".$row->Ingredient."&nbsp;".$row->Quantity."&nbsp;".$row->UoM."&nbsp;</div>";
}
echo "</div>";

this will create the body of the window … then already on your page have this :

<div id="modal-container" class="modal"></div>

and finally your JavaScript :

$(document).ready(function() {
    $('.ajax-link').click(function(event) {
        $('#modal-container').load($(this).attr('href'), function() {
            $('#modal-container').modal({
                backdrop: true
            });
        });
        event.preventDefault();
    });
});​

Then your not duplicating any ids and loading the content into an already existing container.