Using AJAX to call a PHP (through MSQL) and fill a bootstrap modal

Question

I have a user list on an HTML table, when I click an entry I have a modal loading through AJAX which should fill a form out with all the relevant information from that user. Information can then be changed and submitted via a change.

I cannot get past getting the modal to load and cannot get data to be loaded into the model.

Here is the script:

<script>
$('#editUserModel').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('userID')

         $(function () 
          {

            $.ajax({                                      
              url: 'getUser.php?id=',                          
              data: "recipient",                        

              dataType: 'json',                    
              success: function(data)          
              {
                var id = data[0];              //get id
                var firstName = data[1];       //get name etc...
                var lastName = data[2];
                var username = data[3];
                var password = data[4];
                var jobTitle = data[5];
                var TaskTeam = data[6];
                var admin = data[12];

                var modal = $(this)
                modal.find('.modal-body input').html(username)

              } 
            });
          }); 


    })
</script>

Here is the PHP which lists the users (this works and when I click the Edit button a modal loads however the modal is grayed out and shows no underlying data)

<?php 
include("dbconnect.php"); 

$dbQuery= mysql_query("SELECT * FROM users ORDER BY jobTitle ASC;"); 

while($dbRow = mysql_fetch_array($dbQuery))
{
$userID = $dbRow['id'];
$username = $dbRow['username'];
$firstName = $dbRow['firstName'];
$lastName = $dbRow['lastName'];
$jobTitle = $dbRow['jobTitle'];
$userteam = $dbRow['TaskTeam'];

echo '<tr>';
echo '<td>';
echo '<button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModel" data-userID='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button>';
echo '</td>';

echo '<td>'.$firstName.'</td>';
echo '<td>'.$lastName.'</td>';
echo '<td>'.$jobTitle.'</td>';
echo '<td>'.$userteam.'</td>';
echo '<td></td>';

/*
echo '<td>';



echo '</td>';
*/

echo '</tr>';
}

echo mysql_error();
mysql_close();

?>

Here is the modal div:

<div class="modal fade" id="editUserModel" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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="editModalLabel"></h4>
      </div>
      <div class="modal-body">
        <form>
            <div class="form-group">
                <label for="username" class="control-label">Username:</label>
                <input type="text" class="form-control" id="username">
            </div>
            <div class="form-group">
                <label for="password" class="control-label">Password:</label>
                <input type="text" class="form-control" id="password">
            </div>
            <div class="form-group">
                <label for="firstName" class="control-label">First Name:</label>
                <input type="text" class="form-control" id="firstName">
            </div>
            <div class="form-group">
                <label for="lastName" class="control-label">Surname:</label>
                <input type="text" class="form-control" id="lastName">
            </div>
            <div class="form-group">
                <label for="jobTitle" class="control-label">Job Title:</label>
                <input type="text" class="form-control" id="jobTitle">
            </div>
            <div class="form-group">
                <label for="TaskTeam" class="control-label">Task Team:</label>
                <input type="text" class="form-control" id="TaskTeam">
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit Changes</button>
      </div>
    </div>
  </div>
</div>

And here is the php file which retrieves the user data:

<?php
  $userID = intval($_GET['id']);
  include("dbconnect.php"); 

  $sql="SELECT * FROM users WHERE id = $userID";
  $result = mysql_query($sql);
  $array = mysql_fetch_row($result);    

  echo json_encode($array);

  mysql_close();
?>

I don't fully understand PDO, I'm not sure where the problem is.

Answer 1

Rahter than mysql use mysqli. Also, the problem is happening because you need to iterate through your rows result. Try this:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 


$userID = intval($_GET['id']);
$sql="SELECT * FROM users WHERE id = $userID";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $array = array();
    while($row = $result->fetch_assoc()) {
        array_push($array, $row);
    }
    echo json_encode($array);
} else {
    echo "0 results";
}
$conn->close();

Then in your JS, replace the contents of .success with this:

success: function(data) {
    var obj = JSON.parse(data);
        $.each(obj, function(key, val) {
            console.log(val);
            //add your functions here

            /*
             var id = data[0];              //get id
             var firstName = data[1];       //get name etc...
             var lastName = data[2];
             var username = data[3];
             var password = data[4];
             var jobTitle = data[5];
             var TaskTeam = data[6];
             var admin = data[12];

             var modal = $(this)
             modal.find('.modal-body input').html(username)
            * 
            */
        });
}