We help IT Professionals succeed at work.
Troubleshooting Question

Adding a Modal to a Modal

David Schure
David Schure asked
21 Views
Last Modified: 2020-11-20
I am trying to open a modal from a modal...The "Read Bio" button would open the new modal.  The new modal would contain the Therapist name and the details(bio)
$sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, photo,details
   FROM tbl_answers_therapist
   JOIN tbl_answers
   JOIN tbl_therapist_type
   WHERE tbl_answers.client_id = 1
   AND tbl_answers_therapist.status = 'Yes'
   AND tbl_answers.type_id = tbl_therapist_type.type_id
   AND tbl_answers.practice_id = tbl_therapist_type.practice_id
   AND tbl_therapist_type.therapist_id = tbl_answers_therapist.therapist_id
   Limit 3   
EOT;
   
    $results = $db->query($sql);
    $records = $results->fetchAll();
    if (count($records)) {
        // we have some records
        $title = 'Click on picture to select Your Therapist';
       $html = '';

       $rows = array_chunk($records, 3);

    $template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class='btnT' onclick='myBio'>Read Bio</button>
   </div>
EOT;

    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
            $html .= sprintf($template, $item->photo, $item->therapist_name, $item->details, $item->therapist_id);
        }
        $html .= '</div>';
    }

    $html = sprintf('<div class="container">%s</div>', $html);


The HTML modal..
<!-----------------------------------------myBio Start-------------------------------->
<div class="modal fade" id="myBio" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!--button type="button" class="close" data-dismiss="modal">&times;</button-->
                <h6 class="modal-title"></h6>
            </div>
            <div class="modal-body">
         <div class="container">
              <div class="row">
                <!--div class="col-sm"></div>
                <div class="col-sm"></div>
                <div class="col-sm"></div-->
              </div>
         </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-----------------------------------------myBio End--------------------------------->
The link..
https://arise.plus/MODALHELPER.html
Comment
Watch Question

Added this to the MODALHELPER.php page
<script>
$('.openBio').on('click',function(){
    $('.modal-body').load('content.html',function(){
        $('#myBio').modal({show:true});
      $.ajax({
        url : 'MODALBIO.php',
        data : { id : 316 },
    })
    });
});
</script>
And this file.  MODALBIO.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$id = $_GET['id'] ?? null;

if ($id) {

    // connect to your DB
    // build your query
   $dbHost = 'localhost'; 
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    //$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName); 
    
   $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );

$options = [
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
];

$db = new PDO($dsn, $dbUsername, $dbPassword, $options);
   
   $sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, details
   FROM tbl_answers_therapist
   JOIN tbl_answers
   JOIN tbl_therapist_type
   WHERE tbl_answers.client_id = 1
   AND tbl_answers_therapist.status = 'Yes'
   AND tbl_answers.type_id = tbl_therapist_type.type_id
   AND tbl_answers.practice_id = tbl_therapist_type.practice_id
   AND tbl_therapist_type.therapist_id = tbl_answers_therapist.therapist_id
   Limit 3   
EOT;
   
    $results = $db->query($sql);
    $records = $results->fetchAll();
    if (count($records)) {
        // we have some records
        $title = '';
       $html = '';

       $rows = array_chunk($records, 3);

    $template = <<<EOT
    <div class='col-sm bioData'>
        <img class='bioImg' src='/resources/images/Therapist/%s'>
        <p class='bioName'>%s</p>
      <p class='bioName'>%s</p>
      <button class='btnT' onclick='openBio'>Close</button>
   </div>
EOT;

    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
            $html .= sprintf($template, $item->therapist_name, $item->details, $item->therapist_id);
        }
        $html .= '</div>';
    }

    $html = sprintf('<div class="container">%s</div>', $html);

    } else {

        // we don't have any records
        $title = 'Therapist does not have a bio';
        $html = '';

    }

    $response = [
        'title' => $title,
        'html' => $html,
    ];
   header('Content-Type: application/json');
    echo json_encode($response);

}


However I don't think I need the if statement.  In any case the modal is not opening.
Francisco IgorSoftware Developer
CERTIFIED EXPERT
Change the button attributes in the main modal to set the class "openBio" (not onclick)

<button class="btnT" class="openBio" >Read Bio</button>

And modify this code to make it work (also make sure content.html or the bio content is there)

$('.openBio').on('click',function(){
    $('#myBio .modal-body').load('content.html',function(){
        $('#myBio').modal({show:true});
    });
});




Changes made.  Still not opening....
$template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class="btnT" class="openBio" >Read Bio</button>
   </div>
EOT;
<script>
$('.openBio').on('click',function(){
    $('#myBio .modal-body').load('content.html',function(){
        $('#myBio').modal({show:true});
    });
});
</script>
Okay I switched from class to id.  It works from the MODALHELPER.php page but not from the MODALPHP.php page........
https://arise.plus/MODALHELPER.html

$template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class="btnT" id="openBio">Read Bio</button>
   </div>
EOT;
Francisco IgorSoftware Developer
CERTIFIED EXPERT
If you use id="openBio" instead of class, you can't use more than one button (There are 2 "Read Bio" buttons)
I recommend to use the class name and adding some data attribute to identify from whom you want to open the bio,

<button class="btnT" class="openBio" data-id="{therapist_id}" >Read Bio</button>

or use different IDs for each button to read a specific bio for each one.

<button class="btnT" class="openBio" id="openBio{id}" >Read Bio</button>
I only put the one at the bottom to show that it works.  When I remove the one at the bottom the Read Bio button under the photo still does not work.  AHH I see your point...
$template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class="btnT" class="openBio" data-id="{therapist_id}" >Read Bio</button>
   </div>
EOT;
Still not working..
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Hey David,

Because you're loading the content of your first modal dynamically, you can't just directly bind to the click event of the btnT class. The binding happens when you first load the page, and at that point, the buttons don't exist. You need to delegate the binding to an element that DOES exist when the page first loads, so I would suggest the #myModal. You do this with the on() method:

$('#myModal').on('click', '.btnT', function() {
    $('#myBio .modal-body').load('content.html',function() {
        $('#myBio').modal({show:true});
    });
});

Open in new window

Wow!  Just like that!  It works.  Question. Is the therapist_id tied to this?  I need the therapist_name and details to show up in the myBio modal....
$sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, details
   FROM tbl_answers_therapist
   JOIN tbl_answers
   JOIN tbl_therapist_type
   WHERE tbl_answers.client_id = 1
   AND tbl_answers_therapist.status = 'Yes'
   AND tbl_answers.type_id = tbl_therapist_type.type_id
   AND tbl_answers.practice_id = tbl_therapist_type.practice_id
   AND tbl_therapist_type.therapist_id = tbl_answers_therapist.therapist_id
   Limit 3   
EOT;
   
    $results = $db->query($sql);
    $records = $results->fetchAll();
    if (count($records)) {
        // we have some records
        $title = '';
       $html = '';

       $rows = array_chunk($records, 3);

    $template = <<<EOT
    <div class='col-sm bioData'>
        <img class='bioImg' src='/resources/images/Therapist/%s'>
        <p class='bioName'>%s</p>
      <p class='bioName'>%s</p>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
EOT;

    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
            $html .= sprintf($template, $item->therapist_name, $item->details, $item->therapist_id);
        }
        $html .= '</div>';
    }

    $html = sprintf('<div class="container">%s</div>', $html);

    } else {

        // we don't have any records
        $title = 'Therapist does not have a bio';
        $html = '';

    }

    $response = [
        'title' => $title,
        'html' => $html,
    ];
   header('Content-Type: application/json');
    echo json_encode($response);

}


I don't think I need an if statement though.
Probably more like tis?
$sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, details
   FROM tbl_answers_therapist
   WHERE tbl_answers_therapist.status = 'Yes'
   AND tbl_answers_therapist.therapist_id = $therapist_id
EOT;
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Hey David,

In your first modal that loads up, the HTML that's generated looks like this for each of the buttons:

<button class="btnT" data-id="{therapist_id}">Read Bio</button>

I'm guessing that {therapist_id} but should be an actual ID number:

<button class="btnT" data-id="123">Read Bio</button>

Then you can grab that in your click eventhandler and pass it along to a server-side script. Currently, the button click has this:

$('#myBio .modal-body').load('content.html',function() {
    $('#myBio').modal({show:true});
});

Open in new window

Firstly - you're not passing along the ID, and secondly, you're just loading up a static html page, rather than a server-side script, so it's not gonna dynamically generate any content. You probably want to replicate what you have on the first modal, so something like this maybe:

$('#myModal').on('click', '.btnT', function() {
    let id = $(this).data('id'); // get the ID from the data-id attribute of the clicked button
    $.ajax({
        url : 'getBio.php',
        data : { id : id },
    })
    .done(function(resp) {
        // now update the second modal with the content of resp
        ...
        // and show the modal
        $('#myBio').modal({show:true});
    })
});

Open in new window

Your getBio.php will now received the id as part of the GET array - $_GET['id'] so you can use it in your SQL to selected the correct info from your DB, and generate a response.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Actually, thinking about it, you can still use the load() method and pass data along:

$('#myModal').on('click', '.btnT', function() {
    let id = $(this).data('id'); // get the ID from the data-id attribute of the clicked button
    $('#myBio .modal-body').load('getBio.php', { id: id }, function() {
        $('#myBio').modal({show:true});
    });
});

Open in new window

Bit more concise that a full AJAX request, but fundamentally doing the same thing :)
Okay so on the MODALHELPER.php page I have this..
$('#myModal').on('click', '.btnT', function() {
    let id = $(this).data('id'); // get the ID from the data-id attribute of the clicked button
    $('#myBio .modal-body').load('getBio.php', { id: id }, function() {
        $('#myBio').modal({show:true});
    });
});
Then on the MODALPHP.php page I have this...
 $template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class="btnT" data-id="{therapist_id}" >Read Bio</button>
   </div>
EOT;
And Finally on the MODALBIO.php file I have...
$sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, details
   FROM tbl_answers_therapist
   WHERE tbl_answers_therapist.status = 'Yes'
   AND tbl_answers_therapist.therapist_id = $therapist_id
EOT;
   
    $results = $db->query($sql);
    $records = $results->fetchAll();
    if (count($records)) {
        // we have some records
        $title = '';
       $html = '';

       $rows = array_chunk($records, 3);

    $template = <<<EOT
    <div class='col-sm bioData'>
        <img class='bioImg' src='/resources/images/Therapist/%s'>
        <p class='bioName'>%s</p>
      <p class='details'>%s</p>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
EOT;

    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
            $html .= sprintf($template, $item->therapist_name, $item->details, $item->therapist_id);
        }
        $html .= '</div>';
    }

    $html = sprintf('<div class="container">%s</div>', $html);

    } else {

        // we don't have any records
        $title = 'Therapist does not have a bio';
        $html = '';

    }

    $response = [
        'title' => $title,
        'html' => $html,
    ];
   header('Content-Type: application/json');
    echo json_encode($response);

}
Nothing coming up on the MODALPHP.php page.  I will also need to get rid of that IF statement.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Right. In your MODALPHP.php file, you need to be outputting the therapist_id. Currently in the $template you have this:

<button class="btnT" data-id="{therapist_id}" >Read Bio</button>

You need to change that to a placeholder

<button class="btnT" data-id="%d" >Read Bio</button>

And then when you sprintf() it, you pass the Therapist ID in (can't remember how you did this previously):

sprintf($template, ... pass your placehodler values in here);

Now in your MODALBIO file, you need to read in the GET['id'] value and pass that to your query. Best way to do this is with a parameterised query. Also you're only selecting 1 bio so no need to loop

$sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, details
    FROM tbl_answers_therapist
    WHERE tbl_answers_therapist.status = 'Yes'
    AND tbl_answers_therapist.therapist_id = :therapist_id
    LIMIT 1
EOT;

$id = $_GET['id'] ?? null;
   
$stmt = $db->prepare($sql);
$stmt->execute([ 'therapist_id => $id ]);

if ($therapist = $stmt->fetch()) {

    // we have a therapist
    $template = <<<EOT
    <div class='col-sm bioData'>
        <p class='bioName'>%s</p>
        <p class='details'>%s</p>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
EOT;

    printf($template, $therapist->therapist_name, $therapist->details);

} else {

    // no therapist
    echo 'Therapist does not have a bio';

}

Open in new window

Have this on MODALPHP.php
    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
            $html .= sprintf($template, $item->photo, $item->therapist_name, $item->details, $item->therapist_id);
        }
        $html .= '</div>';
    }


Still not showing the Therapist name nor the details.
HainKurtSr. System Analyst
CERTIFIED EXPERT
looks like this is redundant

delete that one, since you have

and you load
https://arise.plus/getBio.php
which is not there
and you post ID=0
which is not correct!
Good catches!  still not loading the last modal
HainKurtSr. System Analyst
CERTIFIED EXPERT
actually id is posted 0 all the time, because you set data-id="0" for all buttons
you need to fix this first...
should be like this

so, on each click, getBio.php should be called with different id...
HainKurtSr. System Analyst
CERTIFIED EXPERT
now you call
https://arise.plus/MODALBIO.php
> no such page...

and is is set to 0 for all
fix these ones too...
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Hey David,

Post up the code for your MODALPHP.php - something in there is not quite right as you're not passing the therapist_id into the $template correctly.

Also, there's a problem with your MODALBIO.php page as that's returning a 500 Server Error.
MODALPHP.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$id = $_GET['id'] ?? null;

if ($id) {

    // connect to your DB
    // build your query
   $dbHost = 'localhost'; 
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    //$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName); 
    
   $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );

$options = [
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
];

$db = new PDO($dsn, $dbUsername, $dbPassword, $options);
   
   $sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, photo,details
   FROM tbl_answers_therapist
   JOIN tbl_answers
   JOIN tbl_therapist_type
   WHERE tbl_answers.client_id = 1
   AND tbl_answers_therapist.status = 'Yes'
   AND tbl_answers.type_id = tbl_therapist_type.type_id
   AND tbl_answers.practice_id = tbl_therapist_type.practice_id
   AND tbl_therapist_type.therapist_id = tbl_answers_therapist.therapist_id
   Limit 3   
EOT;
   
    $results = $db->query($sql);
    $records = $results->fetchAll();
    if (count($records)) {
        // we have some records
        $title = 'Click on picture to select your Therapist';
       $html = '';

       $rows = array_chunk($records, 3);

    $template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class="btnT" data-id="%d" >Read Bio</button>
   </div>
EOT;

    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
            $html .= sprintf($template, $item->photo, $item->therapist_name, $item->details, $item->therapist_id);
        }
        $html .= '</div>';
    }

    $html = sprintf('<div class="container">%s</div>', $html);

    } else {

        // we don't have any records
        $title = 'We are busy selecting the best therapist for you';
        $html = '<p>Please continue to the payment screen.  Thank you.</p>';

    }

    $response = [
        'title' => $title,
        'html' => $html,
    ];
   header('Content-Type: application/json');
    echo json_encode($response);

}
MODALBIO.PHP
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$id = $_GET['id'] ?? null;

if ($id) {

    // connect to your DB
    // build your query
   $dbHost = 'localhost'; 
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    //$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName); 
    
   $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );

$options = [
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
];

$db = new PDO($dsn, $dbUsername, $dbPassword, $options);
   
   $sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, details
    FROM tbl_answers_therapist
    WHERE tbl_answers_therapist.status = 'Yes'
    AND tbl_answers_therapist.therapist_id = :therapist_id
    LIMIT 1
EOT;

$id = $_GET['id'] ?? null;
   
$stmt = $db->prepare($sql);
$stmt->execute([ 'therapist_id => $id ]);

if ($therapist = $stmt->fetch()) {

    // we have a therapist
    $template = <<<EOT
    <div class='col-sm bioData'>
        <p class='bioName'>%s</p>
        <p class='details'>%s</p>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
EOT;

    printf($template, $therapist->therapist_name, $therapist->details)

} else {

    // no therapist
    echo 'Therapist does not have a bio';

}
Just so you have the full picture..
MODALHELPER.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MODAL HELPER</title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Bootstrap library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>   
<style>
/* HIDE RADIO */
         #myModal [type=radio] { 
           position: absolute;
           opacity: 0;
           width: 0;
           height: 0;
         }

         /* IMAGE STYLES */
         #myModal [type=radio] + img {
           cursor: pointer;
         }

         /* CHECKED STYLES */
         #myModal [type=radio]:checked + img {
           outline: 2px solid #f00;
         }
         
         .tphoto{
            margin-right:10px; 
            padding-bottom:10px;
            float:left;
         }
         .Su {
            color:white;
         }   
   
   
</style>
   
   
   
<style>
.bioName{
font-weight:bold;
color: darkblue;
}
.bioDetails{
text-align:left
}
.bioData {
    text-align: center;
    /*display: flex;
    flex-flow: column;*/
}
   
.bioImg {
border: 1px dotted silver;
height: 200px;
/*width: 200px;*/
}
.btnT {
     margin-bottom: 0;
   border: 1px solid #2196F3;
   color: dodgerblue;
   background-color:transparent;
   font-size: 16px;
     cursor: pointer;
   text-align: center;
   }

.btnT:hover {
    background: #2196F3;
   color: white;
   }
</style>
   </head>
<body>
   <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-success openBtn">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!--button type="button" class="close" data-dismiss="modal">&times;</button-->
                <h6 class="modal-title"></h6>
            </div>
            <div class="modal-body">
         <div class="container">
              <div class="row">
                <!--div class="col-sm"></div>
                <div class="col-sm"></div>
                <div class="col-sm"></div-->
              </div>
         </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-----------------------------------------myBio Start--------------------------------------->
<div class="modal fade" id="myBio" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!--button type="button" class="close" data-dismiss="modal">&times;</button-->
                <h6 class="modal-title"></h6>
            </div>
            <div class="modal-body">
         <div class="container">
              <div class="row">
                <div class="col-sm"></div>
              </div>
         </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-----------------------------------------myBio End------------------------------------------>
<script>
$('#myModal').on('click', '.btnT', function() {
    let id = $(this).data('id'); // get the ID from the data-id attribute of the clicked button
    $('#myBio .modal-body').load('MODALBIO.php', { id: id }, function() {
        $('#myBio').modal({show:true});
    });
});   
//$('#myModal').on('click', '.btnT', function() {
    //$('#myBio .modal-body').load('content.html',function() {
        //$('#myBio').modal({show:true});
    //});
//});   
</script>   
   
   
<script>
$('.openBtn').on('click',function(){
    $.ajax({
        url : 'MODALPHP.php',
        data : { id : 3 },
    })
    .done(function(resp) {
        $('#myModal .modal-title').html(resp.title)
        $('#myModal .modal-body').html(resp.html)
        $('#myModal').modal({show:true})
    })
    .fail(function(xhr) {
        alert(xhr.responseText)
    });
});
</script>
   
<!--script>
$('.openBio').on('click',function(){
    $('#myBio .modal-body').load('content.html',function(){
        $('#myBio').modal({show:true});
    });
});
</script-->
   
   
<!--script>
$('.openBtn').on('click',function(){
    $('.modal-body').load('content.html',function(){
        $('#myModal').modal({show:true});
    });
});
</script>
<script>
$('.openBtn').on('click',function(){
    $('.modal-body').load('MODALPHP.php?id=316',function(){
        $('#myModal').modal({show:true});
    });
});
</script>
<script>
   function selBio(id){
  $('.modal-body').load('MODALPHP.php?id=316',function(){
        $('#myBio').modal({show:true});
      //alert("therapist with id=" + id + " is selected...");
  // more codes here
}
</script>   
<!--script src="../AVATAR/scripts.js"></script-->   
</body>
</html>


Hi Hainkurt..not sure why the message but all three pages have been uploaded to the server.

HainKurtSr. System Analyst
CERTIFIED EXPERT
your page is giving error
also, you do not set ID correctly
all are 0
maybe you should set it correctly first
then modalbio.php may work, maybe it is not liking 0!
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
OK.

In the ModalPhp, your template only has 3 placeholdesr - the image, the name and the id, so you only need to pass those 3 parameters into the sprintf() call:

foreach ($items as $item) {
    $html .= sprintf($template, $item->photo, $item->therapist_name, $item->therapist_id);
}

Open in new window

That should sort out the data-id property on your buttons.

In ModalBio, change line 6 to this:

$id = $_POST['id'] ?? null;

The jQuery load() method makes a POST request, not a GET request - my bad on that one :(

Uncomment line 16 !

Remove line 35

Missing quote on line 38:

$stmt->execute([ 'therapist_id' => $id ]);

Add a closing } right at the end of your script, so it finishes like this:

} else {

    // no therapist
    echo 'Therapist does not have a bio';

}

}

Open in new window

Run it again and see what you get :)
HainKurtSr. System Analyst
CERTIFIED EXPERT
you see, all ID's are 0
first correct this


CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Hi Hainkurt..not sure why the message but all three pages have been uploaded to the server.
Slight mistake from Hain. The modalphp was returning a 500, which is not the same as a 404 (Not Found) :)
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Sorry David - don't uncomment line 16
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
HainKurtSr. System Analyst
CERTIFIED EXPERT
i see something wrong here

$stmt->execute([ 'therapist_id => $id ]); 

maybe should be

$stmt->execute([ 'therapist_id' => $id ]); 

check this...
also give me a valid id to test...
Okay. All corrected....still nothing in the new modal.
HainKurtSr. System Analyst
CERTIFIED EXPERT
your php missing tags for php and } for if
also Line 28 is redundant!

try
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$id = $_GET['id'] ?? null;
if ($id) {
    // connect to your DB
    // build your query
    $dbHost = 'localhost'; 
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    //$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName); 
    $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );
    $options = [
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    ];
    $db = new PDO($dsn, $dbUsername, $dbPassword, $options);
    $sql = <<< EOT
        SELECT tbl_answers_therapist.therapist_id,therapist_name, details
            FROM tbl_answers_therapist
            WHERE tbl_answers_therapist.status = 'Yes'
            AND tbl_answers_therapist.therapist_id = :therapist_id
                LIMIT 1
                EOT;

    // $id = $_GET['id'] ?? null; // no need for this, it is already set at top

    $stmt = $db->prepare($sql);
    $stmt->execute([ 'therapist_id' => $id ]);
    if ($therapist = $stmt->fetch()) {
        // we have a therapist
        $template = <<<EOT
<div class='col-sm bioData'>
<p class='bioName'>%s</p>
<p class='details'>%s</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
EOT;
        printf($template, $therapist->therapist_name, $therapist->details);
    } else {
        // no therapist
        echo 'Therapist does not have a bio';
    }
}
?>
Valid ID is either 1 or 2
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
@Hain

If your PHP file only contains PHP, DON'T add a closing PHP ?> tag !!
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
David,

You've now got the IDs in the buttons, so it's just the modalphp to sort out. Post your edited modalphp and I'll double check it
ok MODALPHP.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$id = $_GET['id'] ?? null;

if ($id) {

    // connect to your DB
    // build your query
   $dbHost = 'localhost'; 
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    //$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName); 
    
   $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );

$options = [
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
];

$db = new PDO($dsn, $dbUsername, $dbPassword, $options);
   
   $sql = <<< EOT
    SELECT tbl_answers_therapist.therapist_id,therapist_name, photo,details
   FROM tbl_answers_therapist
   JOIN tbl_answers
   JOIN tbl_therapist_type
   WHERE tbl_answers.client_id = 1
   AND tbl_answers_therapist.status = 'Yes'
   AND tbl_answers.type_id = tbl_therapist_type.type_id
   AND tbl_answers.practice_id = tbl_therapist_type.practice_id
   AND tbl_therapist_type.therapist_id = tbl_answers_therapist.therapist_id
   Limit 3   
EOT;
   
    $results = $db->query($sql);
    $records = $results->fetchAll();
    if (count($records)) {
        // we have some records
        $title = 'Click on picture to select your Therapist';
       $html = '';

       $rows = array_chunk($records, 3);

    $template = <<<EOT
    <div class='col-sm bioData'>
        <label>
      <input type="radio" name="mychoice" value="small">
      <img class='bioImg' src='/resources/images/Therapist/%s'>
      </label>
        <p class='bioName'>%s</p>
      <button class="btnT" data-id="%d" >Read Bio</button>
   </div>
EOT;

    foreach ($rows as $row => $items) {
        $html .= '<div class="row">';
        foreach ($items as $item) {
           $html .= sprintf($template, $item->photo, $item->therapist_name, $item->therapist_id);
        }
        $html .= '</div>';
    }

    $html = sprintf('<div class="container">%s</div>', $html);

    } else {

        // we don't have any records
        $title = 'We are busy selecting the best therapist for you';
        $html = '<p>Please continue to the payment screen.  Thank you.</p>';

    }

    $response = [
        'title' => $title,
        'html' => $html,
    ];
   header('Content-Type: application/json');
    echo json_encode($response);

}
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Sorry David - I meant the modalbio page :(
MODALBIO.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$id = $_POST['id'] ?? null;

if ($id) {

    $dbHost = 'localhost';
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 

    $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );

    $options = [
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    ];

    $db = new PDO($dsn, $dbUsername, $dbPassword, $options);
   
    $sql = <<< EOT
        SELECT tbl_answers_therapist.therapist_id,therapist_name, details
        FROM tbl_answers_therapist
        WHERE tbl_answers_therapist.status = 'Yes'
        AND tbl_answers_therapist.therapist_id = :therapist_id
        LIMIT 1
EOT;

    $stmt = $db->prepare($sql);
    $stmt->execute([ 'therapist_id' => $id ]);

    if ($therapist = $stmt->fetch()) {

        // we have a therapist
        $template = <<<EOT
        <div class='col-sm bioData'>
            <p class='bioName'>%s</p>
            <p class='details'>%s</p>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
EOT;

        printf($template, $therapist->therapist_name, $therapist->details)

    } else {

        // no therapist
        echo 'Therapist does not have a bio';
    
    }
}
HainKurtSr. System Analyst
CERTIFIED EXPERT
try this
may have issues with EOT
my online php tools says so :)

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$id = $_GET['id'] ?? null;
if ($id) {
    // connect to your DB
    // build your query
    $dbHost = 'localhost'; 
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    //$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName); 
    $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );
    $options = [
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    ];
    $db = new PDO($dsn, $dbUsername, $dbPassword, $options);
    $sql = <<<EOT
        SELECT tbl_answers_therapist.therapist_id,therapist_name, details
            FROM tbl_answers_therapist
            WHERE tbl_answers_therapist.status = 'Yes'
            AND tbl_answers_therapist.therapist_id = :therapist_id
                LIMIT 1
EOT;

    // $id = $_GET['id'] ?? null; // no need for this, it is already set at top

    $stmt = $db->prepare($sql);
    $stmt->execute([ 'therapist_id' => $id ]);
    if ($therapist = $stmt->fetch()) {
        // we have a therapist
        $template = <<<EOT
<div class='col-sm bioData'>
<p class='bioName'>%s</p>
<p class='details'>%s</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
EOT;
        printf($template, $therapist->therapist_name, $therapist->details);
    } else {
        // no therapist
        echo 'Therapist does not have a bio';
    }
}
?>
HainKurtSr. System Analyst
CERTIFIED EXPERT
did you delete something from code?
anyways, still missing } and ;
fixed it
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$id = $_POST['id'] ?? null;
if ($id) {
    $dbHost = 'localhost';
    $dbUsername = ''; 
    $dbPassword = ''; 
    $dbName = ''; 
    $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $dbHost, $dbName );
    $options = [
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    ];
    $db = new PDO($dsn, $dbUsername, $dbPassword, $options);
    $sql = <<<EOT
        SELECT tbl_answers_therapist.therapist_id,therapist_name, details
            FROM tbl_answers_therapist
            WHERE tbl_answers_therapist.status = 'Yes'
            AND tbl_answers_therapist.therapist_id = :therapist_id
                LIMIT 1
EOT;
    $stmt = $db->prepare($sql);
    $stmt->execute([ 'therapist_id' => $id ]);
    if ($therapist = $stmt->fetch()) {
        // we have a therapist
        $template = <<<EOT
<div class='col-sm bioData'>
<p class='bioName'>%s</p>
<p class='details'>%s</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
EOT;
        printf($template, $therapist->therapist_name, $therapist->details);
    } else {
        // no therapist
        echo 'Therapist does not have a bio';
    }
}
?>
No I did not.  Where is the missing }?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
There is not a missing }, and you absolutely SHOULD NOT be adding a closing PHP tag. Trust me on this ;)
HainKurtSr. System Analyst
CERTIFIED EXPERT
I see ID is set and passed correctly now...
it is sending 1 and 2...
now, fix the bio page code...
it should work...
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Just spotted one final problem - you're missing a closing semi-colon on this line:

printf($template, $therapist->therapist_name, $therapist->details);
HainKurtSr. System Analyst
CERTIFIED EXPERT
Just spotted one final problem - you're missing a closing semi-colon on this line: 

I already fixed that one above :)
Okay. It's working!  Finally!  Thank you Chris and Hain I appreciate you all helping me!
HainKurtSr. System Analyst
CERTIFIED EXPERT
finally :)


CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Nice one David :)