title: Bootstrap Modal + PHP + AJAX
body: <p>So I can attest that I am an idiot/newb/.
  I am looking for a simple way to have ajax transfer an ID to a modal.
  Which then takes that modal that has php and provides the necessary variables to be shown.</p>
  
  <p>Ex.</p>
  
  <p>Table</p>
  
  <pre><code>===============================
  
  [Button] | Data | Data | Data | 
  
  ===============================
  </code></pre>
  
  <p>[Click Button(ID)] -> Modal Pops up -> Name: Data , Email: Data, Username: Data</p>
  
  <p>I don't know if this kinda helps out.
  I was able to figure out how to have the modal add information to a database but I can't seem to figure out how to pull data from the ID to modal and populate it.</p>
  
  <p>Thanks for any help I can get!</p>
  
  <p>EDIT: (UPDATE)
  This is my index page that displays all phone inventory. The "View" pops up the modal but gives me random information, it is an active ID but not the one that is current to the order.</p>
  
  <p>Hope this helps. ( I'll take any help or criticism )  </p>
  
  <pre><code>    &lt;?php
          include "../includes/db_connect.php";
          $page = "chauffeur";
          $pdo = Database::connect();
          if($_SESSION['LoggedIn'] == 1){ }
          elseif($_SESSION['LoggedIn'] == "")
          {
              header("location: http://wcl-wamp/"); 
          }
       ?&gt;
       &lt;!doctype html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;title&gt;WCL WebApp&lt;/title&gt;
          &lt;link href="../css/bootstrap.css" rel="stylesheet"&gt;
          &lt;link href="../css/td/style.css" rel="stylesheet"&gt;
          &lt;style&gt;
              .body{margin: 0 40px; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;?php include('../nav.php'); ?&gt;
      &lt;div class="body"&gt;
              &lt;div class="row"&gt;
                  &lt;h3&gt;&lt;b&gt;Phone Inventory&lt;/b&gt;&lt;/h3&gt;
              &lt;div id="modal-results" &gt;&lt;/div&gt;
      &lt;?php
            try {
                      $stmt = $pdo-&gt;prepare('SELECT * FROM phone_inventory');
                      $stmt-&gt;execute();
                      $result = $stmt-&gt;fetchAll();
                      if(count($result)) {
                              foreach($result as $row){
                          }
                      }
                  } catch (Exception $e) {
                      echo 'ERROR: ' . $e-&gt;getMessage();
                  } ?&gt;
              &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
                &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h3 class="modal-title" id="myModalLabel"&gt;&lt;b&gt;Phone Profile - ID &lt;?= $row['id']; ?&gt;&lt;/b&gt;&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                      &lt;form class="test" role="form"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="phone_number"&gt;Phone #
                          &lt;input type="text" class="form-control" id="phone_number" name="phone_number" value="&lt;?= $row['phone_number']; ?&gt;"&gt;&lt;/label&gt;
                          &lt;label for="device_id"&gt;Device ID
                          &lt;input type="text" class="form-control" id="device_id" name="device_id" value="&lt;?= $row['device_id']; ?&gt;"&gt;&lt;/label&gt;
                          &lt;label for="device_manufacturer"&gt;Device Manufacturer
                          &lt;input type="text" name="device_manufacturer" id="device_manufacturer" class="form-control" value="&lt;?= $row['device_manufacturer']; ?&gt;" /&gt;&lt;/label&gt;
                          &lt;label for="device_model"&gt;Device Model
                          &lt;input type="text" name="device_model" id="device_model" class="form-control" value="&lt;?= $row['device_model']; ?&gt;"/&gt;&lt;/label&gt;
                          &lt;label for="phone_alias"&gt;Phone Alias
                          &lt;input type="text" name="phone_alias" id="phone_alias" class="form-control" value="&lt;?= $row['phone_alias']; ?&gt;"/&gt;&lt;/label&gt;
                          &lt;label for="chauffeur_number"&gt;Chauffeur #
                          &lt;input type="text" name="chauffeur_number" id="chauffeur_number" class="form-control" value="&lt;?= $row['chauffeur_number']; ?&gt;"/&gt;&lt;/label&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary" id="update"&gt;Check Out&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  &lt;div class="row"&gt;
              &lt;table class="table table-striped table-condensed table-hover"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;Phone #&lt;/th&gt;
                          &lt;th&gt;Device ID&lt;/th&gt;
                          &lt;th&gt;Device Manufacturer&lt;/th&gt;
                          &lt;th&gt;Device Model&lt;/th&gt;
                          &lt;th&gt;Phone Alias&lt;/th&gt;
                          &lt;th&gt;Chauffeur #&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                          &lt;?php $sql = 'SELECT * FROM phone_inventory ORDER BY id ASC';
                              foreach ($pdo-&gt;query($sql) as $row) {
                                  echo '&lt;tr&gt;';
  echo '&lt;td&gt;&lt;a class="btn btn-xs btn-primary" data-toggle="modal" data-id="'. $row['id'] .'" href="#myModal" &gt;View&lt;/a&gt;&lt;/td&gt;';
                                  echo '&lt;td&gt;'. $row['phone_number'] .'&lt;/td&gt;';
                                  echo '&lt;td&gt;'. $row['device_id'] .'&lt;/td&gt;';
                                  echo '&lt;td&gt;'. $row['device_manufacturer'] .'&lt;/td&gt;';                                                                                              
                                  echo '&lt;td&gt;'. $row['device_model'] .'&lt;/td&gt;';
                                  echo '&lt;td&gt;'. $row['phone_alias'] .'&lt;/td&gt;';
                                  echo '&lt;td&gt;'. $row['chauffeur_number'] .'&lt;/td&gt;';
                                  echo '&lt;/tr&gt;';
                          }
                              Database::disconnect();
                          ?&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
      &lt;?php include('../includes/js_scripts.php'); ?&gt;
      &lt;script&gt;
          $(document).ready(function() {
              $('.table').dataTable( {
              "sPaginationType": "bootstrap",
              "iDisplayLength": 10
              } );
          } );
      $(".device").click(function(){
          var id = $(this).attr('data-id');
          $("#myModal").find("#id").val(id);
          $("#myModal").dialog("open");
      })
  
  
      $(".alert").delay(200).addClass("in").fadeOut(4000);
  
       $(function() {
  //twitter bootstrap script
          $("button#update").click(function(){
                      $.ajax({
                      type: "POST",
                      url: "test.php",
                      data: $('form.test').serialize(),
                      success: function(msg){
                               $("#modal-results").html(msg)
                              $("#myModal").modal('hide');    
                           },
                  error: function(){
                      alert("failure");
                      }
                        });
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>