Open a bootstrap modal

JavaScript
1

I have a modal

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="ModalLabel">Thank you for submitting a review.</h4>
        </div>
        <div class="modal-body">
    <center><img src="images/thanks/84565257.jpg" class='img-thumbnail img-responsive' /></center>
        </div>    
    </div>
</div>
</div>

is there a way to open it at a certain point in the page

try {

$sql = "INSERT INTO providers (
...);
...
...

//make the modal fire at this point

} catch(PDOException $e) {
echo "<h3>The email address ({$email}) is being used</h3>";
//  echo 'Error: ' . $e->getMessage{);
}

Thanks…

2

Do you mean when a user scrolls to a certain point on your page, or when a user has been on your page for a certain amount of time?

3

no, sorry but the page has a php try block in it (which outputs HTML if a mysql query is successful, aand Im trying to get a modal to only pop up if the query is a success

try {

$sql = "INSERT INTO providers (
...);
...
...

//make the modal fire at this point

} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage{);
}
4

Well just put the code to create the modal inside the try block, or am I missing something?

5

I can do that. It will open by default like…

<div id="modal" class="modal hide fade in" style="display:block;">
  <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
  <div class="modal-body"></div>
  <div class="modal-footer">footer</div>
is all I need?
6

PDOStatement->execute() returns true on success, so, you could do something like:

try {
  $sql = "INSERT INTO providers (...);
  $q = $conn->prepare($sql);
  if ($q->execute(...)){
    addModalToPage();
  }
} catch(PDOException $e) {
  echo 'Error: ' . $e->getMessage{);
}

Maybe there’s a better way (I don’t do enough PHP), but I would definitely tackle this on the server.

7

Replace this area with the following code:

//try block  above
?>

<script>
   $('#thankyouModal').modal('show');
</script> 

<?php
//catch block area

Since bootstrap modal is called at the client side, it can’t be called like PHP function. So, we have make such adjustments.

8

I have this in my try block and nothing happens

<script>
$('#thankyouModal').modal('show');
</script> 
<?php

echo '<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">';
echo '<div class="modal-dialog modal-lg">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
echo '<h4 class="modal-title">Thank you, please review your responses and email anything we missed to admin@houston-asp.com</h4>';
echo '</div>';
echo '<div class="modal-body">';
...
...
echo "</div>";
echo "<div claas='modal-footer'><button type='button' class='btn btn-primary' data-dismiss='modal'>Close</button></div>";
echo '</div><!-- /.modal-content -->';
echo '</div><!-- /.modal-dialog -->';
echo '</div><!-- /.modal -->';

shouldn’t the modal be showing?

9

Probably, but you haven’t really provided enough code to tell.
Could you post enough code that we can recreate your problem?

10

sorry, heres the try part

try {

$sql = "INSERT INTO providers (
....
) VALUES (
...
)";

$stmt = $dbh->prepare($sql);

$stmt->execute(array(
...
));

?>
<script>
$('#thankyouModal').modal('show');
</script> 
<?php
echo '<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">';
echo '<div class="modal-dialog modal-lg">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
echo '<h4 class="modal-title">Thank you, please review your responses and email anything we missed to admin@houston-asp.com</h4>';
echo '</div>';
echo '<div class="modal-body">';
echo '<table class="well table">';
echo "<tr><th width='15%'>Name</th><td width='20%'>{$name}<th width='15%'>Email</th><td width='25%'>{$email}</td><th width='10%'>Phone</th><td width='15%'>{$phone}</td></tr>";
echo "<tr><th>Contact Method</th><td>{$contact}<th>Age</th><td>{$age}</td><th>Rate</th><td>{$rate}</td></tr>";
echo "<tr><th>Height</th><td>{$feet} feet {$inches} inches<th>Weight</th><td>{$weight}</td><th>Cup</th><td>{$cup}</td></tr>";
echo "<tr><th>Ethnicity</th><td colspan='5'>{$ethnicity}</td></tr>";
echo "<tr><th>Introduction</th><td colspan='5'>{$intro}</td></tr>";
echo '<tr><th align="ceteer" colspan="6">Images...</th></tr>';
echo "</table>";
echo "</div>";
echo "<div claas='modal-footer'><button type='button' class='btn btn-primary' data-dismiss='modal'>Close</button></div>";
echo '</div><!-- /.modal-content -->';
echo '</div><!-- /.modal-dialog -->';
echo '</div><!-- /.modal -->';
} catch(PDOException $e) {
...

when the try block is executed (the INSERT thing happens…)
All I get is a blank page, the modal doesn’t open

11

That closing ?> before the <script> tag doesn’t look right.

Try: 

$sql = "INSERT INTO providers (
....
) VALUES (
...
)";

$stmt = $dbh->prepare($sql);

$stmt->execute(array(
...
));

echo "<script>$('#thankyouModal').modal('show');</script>";
echo '<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog" aria-
...
12

got it, thx

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.