I am trying to show Bootstrap alerts after a successful page redirect across multiple areas of my application, however I cannot get them to show, at all. Here are a few examples of areas where I am using them, and the code being used to initialise. I'm thinking that the solution for one may be the solution for all, as they all share very similar display scenarios.
Example 1 - show alert after successfully deleting a list
I have a Bootstrap modal on watchlists.php to delete a specific Watchlist and, on the successful deletion of the Watchlist, I am redirecting users back to profile.php. I want to set a successful alert message at the top of profile.php, to provide visual feedback to users that their Watchlist has been deleted. I should mention that the Watchlist itself does delete perfectly, it's just the successful alert on profile.php which isn't showing.
Code on watchlists.php
// Delete Watchlist
if ($submit == 'Delete Watchlist') {
require_once("db_connect.php");
$deleteWatchlist_bad_message = '';
if ($db_server) {
$purge_watchlist_query = "DELETE FROM watchlist_films WHERE watchlist_id = " . $watchlist_id;
mysql_query($purge_watchlist_query) or die("Delete failed. " . mysql_error() . "<br />" . $purge_watchlist_query);
$delete_watchlist_query = "DELETE FROM watchlists WHERE watchlist_id = " . $watchlist_id ;
mysql_query($delete_watchlist_query) or die("Delete failed. " . mysql_error() . "<br />" . $delete_watchlist_query);
} else {
$deleteWatchlist_bad_message = '<div class="alert alert-error">Error: could not connect to the database.</div>';
}
require_once("db_close.php");?>
<script type="text/javascript">
window.location = "profile.php"
</script><?php
$deleteWatchlist_good_message = '<div class="alert alert-success">Watchlist successfully deleted</div>';
}
Code on profile.php to show the alert (edited to just show section where $deleteWatchlist_good_message is being shown)
<body>
<div class="container"><?php
require_once ("header.php");
require_once("profile-controller.php");?>
<?php echo $deleteWatchlist_good_message; ?>
<div class="well main-content">
<p class="page-title">Hello, <span class="bold"><?php echo $profile_info['first_name']; ?></span>. Here's your Screening profile.</p>
Example 2 - show alert on modal refresh
I am attempting to show both query successful and query failure alerts, as appropriate, on page reload after a user updates their profile information. Currently, profile information updates exactly as it should, but the Bootstrap modal doesn't reinitialise, and the alert messages are not shown, after the page has reloaded.
Code on profile.php to handle profile updating
//Clean
$submit = clean_string($_POST['submit']);
$id = $profile_info['id'];
$db_password = $profile_info['password'];
//Update account details
if ($submit == 'Save changes') {
$first_name = clean_string($_POST['first-name']);
$last_name = clean_string($_POST['last-name']);
$email = clean_string($_POST['email']);
$current_password = clean_string($_POST['current-password']);
$new_password = clean_string($_POST['new-password']);
$confirm_new_password = clean_string($_POST['confirm-new-password']);
//Output variables
$updateProfile_bad_message = '';
$updateProfile_good_message = '';
if ($db_server) {
if (!empty($first_name)) {
if ($first_name = clean_string($first_name)) {
$query = "UPDATE users SET first_name = '$first_name' WHERE id = '$id'";
mysql_query($query) or die("Insert failed. " . mysql_error() . "<br />" . $query);
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Sorry, something\'s gone wrong! Please try again later.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
}
if (!empty($last_name)) {
if ($last_name = clean_string($last_name)) {
$query = "UPDATE users SET last_name = '$last_name' WHERE id = '$id'";
mysql_query($query) or die("Insert failed. " . mysql_error() . "<br />" . $query);
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Sorry, something\'s gone wrong! Please try again later.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
}
if (!empty($email)) {
if ($email = clean_string($email)) {
$taken = mysql_query("SELECT email FROM users WHERE email='$email'");
$count = mysql_num_rows($taken);
if ($count > 0) {
$updateProfile_bad_message = '<div class="alert alert-error">The email you have entered is already associated with a Screening account. Please choose another.</div>';?>
<script type="text/javascript">
$(window).ready(function() {
$('#profileUpdate').modal('show');
});
</script><?php
} else if ($count = 0) {
$query = "UPDATE users SET email = '$email' WHERE id = '$id'";
mysql_query($query) or die("Insert failed. " . mysql_error() . "<br />" . $query);
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Sorry, something\'s gone wrong! Please try again later.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
}
}
if ($_FILES) {
$file_name = $_FILES['profile-image']['name'];
$file_size = $_FILES['profile-image']['size'];
$file_tmp_name = $_FILES['profile-image']['tmp_name'];
//Determine filetype
switch ($_FILES['profile-image']['type']) {
case 'image/jpeg': $ext = "jpg"; break;
case 'image/png': $ext = "png"; break;
default: $ext = ''; break;
}
if ($ext) {
//Check filesize
if ($file_size < 50000000000) {
//Process file - resize, clean up filename and move to safe location
$image = new SimpleImage();
$image->load($file_tmp_name);
$image->resizeToWidth(250);
$image->save($file_tmp_name);
$n = "$file_name";
$n = ereg_replace("[^A-Za-z0-9.]", "", $n);
$n = strtolower($n);
$n = "avatars/$n";
move_uploaded_file($file_tmp_name, $n);
$query = "UPDATE users SET image = '$n' WHERE id = '$id'";
mysql_query($query) or die("Insert failed. " . mysql_error() . "<br />" . $query);
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Please ensure your chosen file is less than 5MB.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Please ensure your image is of filetype .jpg or .png.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
}
if (!empty($current_password)) {
$current_password = clean_string($current_password);
if ($current_password = md5($db_password)) {
if ($new_password == $confirm_new_password) {
$new_password = clean_string($new_password);
$confirm_new_password = clean_string($confirm_new_password);
$new_password = md5($new_password);
$query = "UPDATE users SET password = '$new_password' WHERE id = '$id'";
mysql_query($query) or die("Insert failed. " . mysql_error() . "<br />" . $query);
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Your passwords did not match. Please check your spelling and try again.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Your current password is incorrect. Please check your spelling and try again.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
}
} else {
$updateProfile_bad_message = '<div class="alert alert-error">Error: could not connect to the database. Please try again shortly.</div>';?>
<script type="text/javascript">
$('a.account-update').trigger('click');
</script><?php
}
require_once("db_close.php");?>
<script type="text/javascript">
window.location = "profile.php"
</script>
<?php $updateProfile_good_message = '<div class="alert alert-success">Changes saved</div>'; ?>
<script type="text/javascript">
$(function () {
$('a.account-update').modal('show');
});
</script><?php
}
Code on profile.php to show modal construction
<div id="profileUpdate" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="profileUpdateLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="profileUpdateLabel" class="modal-title">Update your Screening account details</h3>
</div>
<form name="profile-update" class="profile-update" action="profile.php" method='POST' enctype="multipart/form-data">
<div class="modal-body">
<?php echo $updateProfile_bad_message; ?>
<?php echo $updateProfile_good_message; ?>
<input type="text" class="input-block-level" name="first-name" alt="first-name" placeholder="<?php echo $profile_info['first_name']; ?>">
<input type="text" class="input-block-level" name="last-name" alt="last-name" placeholder="<?php echo $profile_info['last_name']; ?>">
<input type="file" class="profile-picture-upload" name="profile-image" alt="profile-image">
<input type="email" class="input-block-level" name="email" alt="email" placeholder="<?php echo $profile_info['email']; ?>">
<input type="password" class="input-block-level" name="current-password" alt="current-password" placeholder="Current Password">
<input type="password" class="input-block-level" name="new-password" alt="new-password" placeholder="New Password">
<input type="password" class="input-block-level" name="confirm-new-password" alt="confirm-new-password" placeholder="Confirm New Password">
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-success" name="submit" value="Save changes">Save changes</button>
</div>
</form>
</div>
Apologies for the lengthy post, I'm just trying to give as much information as possible :)