CSS Disaster!

Hey David,

That's not a CSS issue. This looks like the script that generates the Modal content has somehow broken, so instead of you getting the html property set to valid HTML, it's being set to something else (possible cause by an error). You need to be looking at the script that generates the content (modalphp if I remember correctly). Re-post that up here if you need us to cast an eye over it.

As a quick test, call that script directly in your browser and check the content of the html property

here you go..

<?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);

}

Select allOpen in new window

https://arise.plus/MODALPHP.php  Comes up blank

OK - nothing obvious in there. Call you code directly in the browser with an id querystring, and post up the response:

yourdomain.com/yourscript.php?id=123

Do youself a sanity check too. The reason I say that is because your screen shot indicates one title, but your code shows something different. In your code you have this:

$title = 'Click on picture to select your Therapist';

But if you look at your screen shot, that title includes the the word, plus a capital Y[our] and an exclamation mark.

Click on the picture to select Your Therapist!

This tells me that the code you've posted IS NOT the code that's being fired.

OK - just checked your link and that code is working fine, BUT it's not the code your modal is calling, for the reasons I've highlighted above.

To see the output in your browser directly from your script, you need to pass in an ID (to get around the if($id) part)

https://arise.plus/MODALPHP.php?id=5

This is the HTML that I have

<!----------------myTherapist Start------------------------------------------------>
<div class="modal fade" id="myTherapist" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"></h6>
            </div>
            <div class="modal-body">
            <form>
         <div class="container">
              <div class="row">
              </div>
         </div>
            </form>
            </div>
            <div class="modal-footer">
                <button id="PM" type="submit" class="btn3">Yes!&nbsp; I want a better me!</button>
            </div>
        </div>
    </div>
</div>
<!-----------------------------------------myTherapist End------------------------------->
<!-----------------------------------------myBio Start----------------------------------->
<div class="modal fade" id="myBio" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!-- 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------------------------------------------>   

Select allOpen in new window

and the JS

<script>
$('#myTherapist').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});
    });
});   

$('.openBtn').on('click',function(){
    $.ajax({
        url : 'MODALPHP.php',
        data : { id : 3 },
    })
    .done(function(resp) {
        $('#myTherapist .modal-title').html(resp.title)
        $('#myTherapist .modal-body').html(resp.html)
        $('#myTherapist').modal({show:true})
    })
    .fail(function(xhr) {
        alert(xhr.responseText)
    });
});
</script>

Select allOpen in new window

I see this in the console..

Yeah - there's nothing wrong with that. My point is that the code for MODALPHP.php that you posted and is stored here --> https://arise.plus/MODALPHP.php, doesn't appear to be the same code that the Modal from your Screenshot above is calling - it can't be ... the title is different.

Do you have a link where I can trigger the Modal that's broken to see what's going on

Sure...
https://arise.plus/Join-Us.php
Be sure to select United States, New York, Individual, Addiction

OK - well that just confirms what I've been saying - you're calling the wrong file. If you look at that console screenshot, you'll see that the output contains bioImage, bioName and bioDetails, but if you look at the $template from the working code above you'll see this:

<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>

Select allOpen in new window

There's no bioDetails in the code !!

I'm checking the server.  I only have one MODALPHP.php file.  Maybe it did not update?

Right - your modal is getting it's content from this file:

https://arise.plus/getTherapist.php?id=client_id

And this is how it's calling it:

success: function(response) {
    console.log(response);
    $('.modal-body').load('getTherapist.php?id=client_id',function(){
          $('#myTherapist').modal({show:true});
    })
},

Select allOpen in new window

So firstly, you're not calling the correct file, and secondly, you're not using the right Javascript (you're not using the AJAX call you showed in your script earlier). This means that you're not setting any content to the json properties (title / html)

This is the file on the server 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 a 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); 
}

Select allOpen in new window

Right - it looks like your button is triggering a Javacsript function called submitAnswers(), which in turn runs the code above to load and show the modal. It looks like you're calling the wrong code completely !

Your MODALPHP file is absolutely fine - you're just not calling it !

Okay did this.

 $.ajax({
        url: 'CLIENT/insert-answers.php',
        type: 'POST',
        data : dataObject,
        success: function(response) {
                console.log(response);
                $('.modal-body').load('MODALPHP.php?id=client_id',function(){
              $('#myTherapist').modal({show:true});
            })
         //$("#successreg").modal('show');

Select allOpen in new window

Okay I see now.

$('.openBtn').on('click',function(){
    $.ajax({
        url : 'MODALPHP.php',
        data : { id : 3 },
    })
    .done(function(resp) {
        $('#myTherapist .modal-title').html(resp.title)
        $('#myTherapist .modal-body').html(resp.html)
        $('#myTherapist').modal({show:true})
    })
    .fail(function(xhr) {
        alert(xhr.responseText)
    });
});

Select allOpen in new window

Problem is since I no longer have that button to call the script.  Ho do I call it?

I did this....

$('#severalquestions').modal('hide');

    $.ajax({
      url: 'CLIENT/insert-answers.php',
        type: 'POST',
        data : dataObject,
        success: function(response) {
                console.log(response);
                $.ajax({
                    url : 'MODALPHP.php',
                    data : { id : 3 },
                })
                .done(function(resp) {
                    $('#myTherapist .modal-title').html(resp.title)
                    $('#myTherapist .modal-body').html(resp.html)
                    $('#myTherapist').modal({show:true})
                })
          }, error: function (jqXHR, exception) {
                var msg = '';
                if (jqXHR.status === 0) {
                    msg = 'Not connect.\n Verify Network.';
                } else if (jqXHR.status == 404) {
                    msg = 'Requested page not found. [404]';
                } else if (jqXHR.status == 500) {
                    msg = 'Internal Server Error [500].';
                } else if (exception === 'parsererror') {
                    msg = 'Requested JSON parse failed.';
                } else if (exception === 'timeout') {
                    msg = 'Time out error.';
                } else if (exception === 'abort') {
                    msg = 'Ajax request aborted.';
                } else {
                    msg = 'Uncaught Error.\n' + jqXHR.responseText;
                }
                alert(msg);
            },
        });
        return false;
   }
</script> 

Select allOpen in new window

Cool - just tested it and it works fine now :)

Kinda. Sorta.

Not sure why the Header is blue...

The bio modal seems to be extended.......or off center.

as opposed to this..

Hey David,

The header is blue because you have this in your joinstyles.css:

.modal-header {
    background-color: #0297d7;
    ...
}

And your content is off-centre because you've added a col-sm style to the wrapper div:

<div class="col-sm bioData">
    <p class="bioName">Dr. Larry Nogood</p>
    <p class="bioDetails">...</p>
</div>

Did this and it's still lopsided .

Select allOpen in new window

$template = <<<EOT
    <div class='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;

You've edited the wrong file ! The template for the bio is coming from MODALBIO, not MODALPHP

Okay much better.  Thank you so much Chris...Have a happy Saturday night!