Extract data from Database and display in Modal

Question

I have a small family tree website that I am creating. I have each persons information in a mysql database which I want to display inside a modal that pops up when a person clicks on any person.

No I have all the HTML and CSS up and running for the modal part. I also know some basic php to write a fairly easy script to extract information from the database which I did (pasted below). However im having 2 problems right now:

1. How do I write my sql statement such that the php extracts the information for that particular person only. I do not what to write a php script for every person in the database.

Every person on the tree is written as :

<a href="#" class="md-trigger" data-modal="modal-3">Tywin Lannister</a>

and my sql statement looks like:

select * from family_table where name = Tywin Lannister;

I would like to know how would I substitute hard coding the name to just make 1 php script work for all names which would display only their information.

1. I have a basic php script that extracts all the information for a person and displays it in a rather simple way. How do I display that information inside the modal which exactly the same styling and fonts etc, without being redirected to a new plain white page with the information displayed in a simple fashion. I have gone through answers given here but they deal with javascript and Ajax which I have zero knowledge about

My html for the names is already given above. My modal HTML is below:

<div class="md-modal md-effect-1" id="modal-3">
    <div class="md-content">
        <h3>Person Information</h3>
        <div>
            <ul>
                <li><strong>Name:</strong>Tywin Lannister.</li>
                <li><strong>DOB:</strong> 28th July 1994.</li>
                <li><strong>BirthPlace:</strong> Chicago.</li>
                <li><strong>Occupation:</strong> Student.</li>
                <li><strong>About:</strong> The Persons information will go here. Probably dynamic and deruved from a database.</li>
                <li><strong>Contact:</strong> Contact information with FB, twitter and email address.</li>
            </ul>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>

My php script is as follows:

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
  die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT * from family_table';

mysql_select_db('family');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
  die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
    echo "Name :{$row['Name']}  <br> ".
         "Nickname : {$row['Nickname']} <br> ".
         "Age : {$row['Age']} <br> ".
         "DOB : {$row['DOB']} <br> ".
         "About : {$row['About']} <br> ".
         "Contact : {$row['Contact Information']} <br> ".
         "--------------------------------<br>";
} 
echo "Fetched data successfully\n";
mysql_close($conn);
?>

Answer 1

There are two options for you: 1. When loading the page you need to load all of the modal windows of the people and just give them an I'd by what you decide. That was the easy method. 2. That is the harder but better method, You can use ajax to load the person info. You do that by creating a php file that receives a person id or something and than echo its information. Here is an example:

.ajax({
    url : "URL to post the data to",
    type: "POST",
    data : person_id,
    success: function(data)
    {
        //$('#id of a div inside the modal').html(data);
     }
});