I have a login page (login.html) that calls a php with POST method to valid login credentials, which works just fine. If the email an password are incorrect, then in my current implementation, an alert pops up and the page reloads. I would like to know how to activate a modal instead of said popup.
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body text-center">
<h4>Ooops!</h4>
<p>Something went wrong. File was not uploaded.</p>
<button class="btn btn-success" data-dismiss="modal">Try Again</button>
</div>
</div>
</div>
</div>
Complete PHP File:
<?php
$email = $_POST['email'];
$pwd = $_POST['pwd'];
$conn = new mysqli('localhost','root','','rm');
if($conn->connect_error){
die('Connection Error: '.$conn->connect_error);
}
else{
$sql = "select * from superfan where email='".$email."' and password='".$pwd."' ";
$result = mysqli_query($conn,$sql);
$records = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
if ($records==0)
{
echo '<script type="text/javascript">';
echo '$(document).ready(function() {';
echo '$("#myModal").modal("show");';
echo '});';
echo '</script>';
}
else
{
header('location:index.html');
}
mysqli_close($conn);
}
?>
Related
well, in my js files, i'm trying to display success-ms or error-msg. I don't understang why my div #error-msg or #success-msg doesn't appear.
Here my js code. If user clicks on confirm, data are sent to process.php to insert the keyword in my mysql table
$(function()
{
$('#alert-change').click(function(event){
$("#error-msg12").html('');
$("#success-msg12").html('');
event.preventDefault();
$.post('include/process.php',$('#alert-change-form').serialize(),function(resp)
{
if (resp['status'] == true)
{
$("#success-msg12").html(resp['msg']+"");
$("#success-msg12").show();
}
else
{
var htm = '<button data-dismiss="alert" class="close" type="button">×</button>';
$.each(resp['msg'],function(index,val){
htm += val+" <br>";
});
$("#error-msg12").html(htm);
$("#error-msg12").show();
}
},'json');
});
});
My form
<div id="myModal_alert" class="modal fade">
<div class="modal-dialog modal-login1">
<div class="modal-content">
<form name="alert-change-form" id="alert-change-form" method="post">
<div class="modal-header">
<h4 class="modal-title">Add a keyword.</h4>
<div class="alert" id="error-msg12">
</div>
<div class="alert alert-success" id="success-msg12">
</div>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="process" name="process" value="4">
<input type="hidden" id="first_name" value ="<?= $_SESSION['name']?>" class="form-control" name="first_name" minlength="3" maxlength="10" placeholder="" class="login" />
<div class="form-group">
<div class="clearfix">
<label>add a keywordt.</label>
</div>
<input type="text" id="kw" class="form-control" name="alert" placeholder="" class="kw" required />
</div>
</div>
<div class="modal-footer">
<button class="button btn btn-primary btn-large" id="alert-change">Confirmer</button>
</div>
</form>
</div>
</div>
</div>
and my process.php file
if ($_POST['process'] == '4') {
$error = array();
$res = array();
$success = "";
$alert = mysql_real_escape_string($_POST['alert']);
echo $_POST['first_name'];
echo $alert;
// errors
if (!preg_match("#^[a-z0-9_]+$#", $alert))
{
$error[] = 'error 1';
}
if (strlen($alert) < 2)
{
$error[] = 'error 2';
}
$sql = "SELECT * FROM users_alert WHERE user = :user AND kw = :alert";
$req = $bdd->prepare($sql);
$req->bindParam(':user', $_POST['first_name'], PDO::PARAM_STR);
$req->bindParam(':alert', $alert, PDO::PARAM_STR);
$req->execute();
$resultat = $req->fetchAll();
if (count($resultat))
{
$error[] = 'error 3';
}
if(count($error)>0)
{
$resp['msg'] = $error;
$resp['status'] = false;
echo json_encode($resp);
exit;
}
// on exécute
$sqlQuery = "INSERT INTO users_alert (user,kw) VALUES (:user,:kw)";
$run = $bdd->prepare($sqlQuery);
$run->bindParam(':user', $_POST['first_name'], PDO::PARAM_STR);
$run->bindParam(':kw', $alert, PDO::PARAM_STR);
$run->execute();
$resp['msg'] = "success1";
$resp['status'] = true;
echo json_encode($resp);
exit;
}
I've tried 4/5 things, in vain.
Somebody has an idea ?
Can you delete them in the process.php file and try again?
echo $_POST['first_name'];
echo $alert;
If this is not working, you should capture the post values you sent to the process.php file and go step by step.
in my application there is an inquiry form. My task is when i submit the inquiry form it send an email and if email is sent successfully I have to show a success message in a modal. I am writing my sendemail code inside index.class.php file. I have to show the modal in services.php file. How can I do that. I tried it by header location but it doesn't work. I didnt know whether it was right or not.
Here is my code:
index.class.php
case "submitservceEnquiryMedical":
$mcpage = "services.php";
if($this->sendMedicalservceenquiryEmail()) {
$flmsg="success";
}
else {
$flmsg="fail";
}
header("Location: services.php?flMsg=$flmsg");
exit();
break;
Services.php
if(!EMPTY($_REQUEST['flmsg']))
{
$flmsg=$_GET['flmsg'];
if($flmsg=='success')
{
echo '<script> $("#Service-Enquiry").modal("show"); </script>';
}
else{
echo '<script> $("#Service-Enquiry").modal("show"); </script>';
}
}
<div class="modal fade" id="modal-success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Success</h4>
</div>
<div class="modal-body">
<p>You have succesfully submitted</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Can anyone please help me
In my opinion here there are differents problems you can't use header location in that way and you are doing javascript injection inside php that really in this case no need.
My solution, or better what i do in my site it's this:
I do an ajax call to the PHP method(page, function, method it's the same), that sends the email, passing all the value from ajax and print an answer to the client/ajax in case the mail was sent or not...so OK or KO(in my case 00 is OK) and in the success of the ajax call i manage the answer 00 so ok etc....In your way you must do an ajax call to this
sendMedicalservceenquiryEmail()
Return the flag and after in ajax at the success, if flag is success then modal show...I try to attach you my code if can be of help, just to look the architecture.
Code PHP where i do the ajax call, passing name, message, object of the email and destinatario is the recipient:
setlocale(LC_TIME, 'it_IT');//Settiamo il timezone per l'orario
date_default_timezone_set("Europe/Rome");
$data = date("d-m-Y");
$ora = date('G:i:A');
/**
* SESSION
*/
$datiUtente = $_SESSION['datiUtente'];
$utente = $datiUtente['username'];
$profilo = $datiUtente['profilo'];
$email = $_REQUEST['destinatario'];
$nome = $_REQUEST['nome'];
$to = $email;
$messaggio = trim($_REQUEST['messaggio']);
$oggetto = trim($_REQUEST['oggetto']);
$mittente = 'YOUR ACCOUNT#MAIL';
if (filter_var($email, FILTER_VALIDATE_EMAIL) === false){
$msg = '88'.'|';
$error='background: url("../img/error.png") no-repeat scroll left top #ffd0dc;
border: 1px solid #ac343d;
margin: 5px 0 15px;
padding: 5px 5px 5px 40px;';
$msg .= ("<div style='$error'>Formato Email non valido</div>");
$msg = str_replace('\n', '', $msg);
$msg = str_replace('\r', '', $msg);
print $msg;
exit;
}
$message = "Email in arrivo da server <b>$mittente</b><br/>
Inviata da : <b>$nome </b><br/>
Profilo utenza : <b>$profilo </b><br/><br/><br/>
$messaggio ";
$subject = $oggetto;
$menof = "'-f" . trim($mittente) . "'";
if (strtoupper(substr(PHP_OS,0,3)=='WIN')) {
$eol="\r\n";
} elseif (strtoupper(substr(PHP_OS,0,3)=='MAC')) {
$eol="\r";
} else {
$eol="\n";
}
$now = rand();
$headers = 'From: YOUR NOME YOURSURNAME<YOUR ACCOUNT MAIL>'.$eol;
$headers .= 'Reply-To: YOUR NOME YOURSURNAME<YOUR ACCOUNT MAIL>'.$eol;
$headers .= 'Return-Path: YOUR NOME YOURSURNAME<YOUR ACCOUNT MAIL>'.$eol; //risposta a...
$headers .= "Message-ID:<".$now." TheSystem#".$_SERVER['SERVER_NAME'].">".$eol;
$headers .= "X-Mailer: PHP v".phpversion().$eol; //Per non andare nello spam
$mime_boundary=md5(time());
$headers .= 'MIME-Version: 1.0'.$eol;
$headers .= "Content-Type: text/html; boundary=\"".$mime_boundary."\"".$eol;
if (mail(trim($to), trim($subject), wordwrap(trim($message)), trim($headers),trim($menof))){
$msg = '00'.'|';
$msg .= ("L'email è stata inviata correttamente");
$msg = str_replace('\n', '', $msg);
$msg = str_replace('\r', '', $msg);
print $msg;
exit;
}
else{
$msg = '99'.'|';
$msg .= ("Invio Email FALLITO!!!");
$msg = str_replace('\n', '', $msg);
$msg = str_replace('\r', '', $msg);
print $msg;
exit;
}
At the click of the button send mail i invoke this function that does the call at the php over
function inviaEmailCliente(){
var nome = $('#nomeMail').val();
var messaggio = $('#messaggioMail').val();
var oggetto = $('#oggettoMail').val();
var destinatario = $('#destinatarioMail').val();
if (oggetto == false){
$('#contenutoInserimentoAna').html('Oggetto Obbligatorio');
$('#modalAnagrafica').modal('show');
$('#modalAnagrafica').on('hidden.bs.modal', function(){
$('#modalVarAnagrafica').modal('hide');
});
return;
}
if (messaggio == false){
$('#contenutoInserimentoAna').html('Messaggio Obbligatorio');
$('#modalAnagrafica').modal('show');
$('#modalAnagrafica').on('hidden.bs.modal', function(){
$('#modalVarAnagrafica').modal('hide');
});
return;
}
if (nome == false){
$('#contenutoInserimentoAna').html('Nome Obbligatorio');
$('#modalAnagrafica').modal('show');
$('#modalAnagrafica').on('hidden.bs.modal', function(){
$('#modalVarAnagrafica').modal('hide');
});
return;
}
$.ajax({
type: "POST",
url: "../index.php",
dataType: "html",
data : { azione : 'inviaEmailCliente',
messaggio : messaggio,
oggetto : oggetto,
destinatario : destinatario,
nome : nome },
success:function(data){
dati = data.replace(/(\r\n|\n|\r)/gm,"");
if (dati.length > 0){
dati = dati.split('|');
if (dati[0] == '00'){
$('#contenutoInserimentoAna').html(dati[1]);
$('#modalAnagrafica').modal('show');
$('#modalAnagrafica').on('hidden.bs.modal', function(){
$('#modalAnagrafica').modal('hide');
$('#nomeMail').val('');
$('#messaggioMail').val('');
$('#oggettoMail').val('');
location.reload();
});
}
if (dati[0] == '88'){
$('#contenutoInserimentoAna').html(dati[1]);
$('#modalAnagrafica').modal('show');
$('#modalAnagrafica').on('hidden.bs.modal', function(){
$('#modalVarAnagrafica').modal('hide');
});
}
if (dati[0] == '99'){
$('#contenutoInserimentoAna').html(dati[1]);
$('#modalAnagrafica').modal('show');
$('#modalAnagrafica').on('hidden.bs.modal', function(){
$('#modalAnagrafica').modal('hide');
});
}
}
},
error:function (){
alert ('Errore di comunicazione con il server');
}
});
}
Html form of insert email, i don't paste the css...but hit is the form..
<input type="hidden" id="destinatarioMail" value="WRITE HERE THE ADRESS WHERE SENDS THE EMAIL{email} TO#EXAMPLE.COM" >
<div class="containerBorder padding3">
<div class="alert-warning">
<p><b>L'email sarà inviata a {email}</b></p>
</div>
<div class="row">
<div class="input-group">
<span class="input-group-addon testoBlu" id="nomeInvioMail">Nome *</span>
<input type="text" id="nomeMail" class="form-control" aria-describedby="nomeInvioMail" />
</div>
<div class="input-group">
<span class="input-group-addon testoBlu" id="oggettoInvioMail">Oggetto *</span>
<input type="text" id="oggettoMail" class="form-control" aria-describedby="oggettoInvioMail" />
</div>
<div class="input-group">
<span class="input-group-addon testoBlu" id="messaggioEmailCli">Messaggio Mail *</span>
<textarea class="form-control" id="messaggioMail" aria-describedby="messaggioEmailCli" style="max-width: 724px; max-height: 130px;"> </textarea>
</div>
</div>
<br>
<div align="center">
<input type="button" class="btn btn-danger" value="Invia" id="inviaEmailCli" onclick="inviaEmailCliente()" />
</div>
</div>
And this is the html for the modal
<div class="modal fade" id="modalAnagrafica" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabelAnagrafica">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h4 class="modal-title modalHeaderText" id="myModalLabelAnagrafica"><b>Anagrafica</b></h4>
</div>
<b><div class="modal-body" id="contenutoInserimentoAna">
</div></b>
<div class="modal-footer justify-content-center">
<div align="center">
<button class="btn btn-success btn-xs" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
i created an article and using modal i can view the article but the problem is when i tried to view the article only the first article is being shown. not specifically the one that i clicked.. i noticed that the variable that i declared only gets the first id.
<?php
include_once('../model/articles.php');
$database = new Database();
$conn= $database->getConnection();
$db= new articles($conn);
$output = $db->viewAllarticles();
$articleid ='';
$artname = '';
$artpublished = '';
$arttitle= '';
$artbody = '';
foreach ($output as $key) {
$articleid = $key['art_id'];
$artpublished = $key['date_published'];
$arttitle = $key['art_title'];
$artbody =$key['art_body'];
if($key['art_isSaved'] == '0'){
?>
<style>
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<div id="article" class="col-lg-4" style="background:#f9f9f9;width:218px;margin-right:10px;">
<strong class="font-1"><?php echo $key['firstname'].' '.$key['lastname'] ?></strong><br>
<?php echo $key['art_body']?><br>
<?php
<i class="fa fa-eye"></i> <?php echo $key['art_seen']?>
<span class="pull-right"><span style="color:#59960b;" data-toggle="modal" data-target="#myModal">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"> </span>
</div>
<?php
}
}
?>
what i wanted to do is when i clicked read more the id of the one that i clicked will be sent to the modal.
<div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
<div class="modal-dialog">
<?php
$output = $db->viewArticle($articleid);
foreach ($output as $key):
if($key['art_id'] == $articleid){
?>
<!--view Modal content-->
<div id="articlepost" class="modal-content-article">
<div class="modal-header-article">
<input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
<button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">×</button>
</div>
<img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
<div class="modal-body">
<div align="center" style="color:#222;">
<strong class="font-2" id="title"><?php echo $arttitle ?></strong>
<br>
</div>
<?php }?>
</div>
</div>
i tried to use javascript to get the id of the article and it works but the problem is i dont know how to use the variable from javascript to declared it to my php if condition...do you have any idea on how can i get the id of the specific article so when i click the article the one that i click will be the one to shown???
This is happen because you are using repeated modal id. You have to make Modal Id unique like this:
<span class="pull-right" id="artid"><span style="color:#59960b;" class="read" data-id="myModal_<?php echo $articleid; ?>">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"> </span>
<div class="modal fade margin-top-70" id="myModal_<?php echo $articleid; ?>" role="dialog" style="margin-left:-50px;">
<div class="modal-dialog">
<?php
$output = $db->viewArticle($articleid);
foreach ($output as $key):
if($key['art_id'] == $articleid){
?>
<!--view Modal content-->
<div id="articlepost" class="modal-content-article">
<div class="modal-header-article">
<input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
<button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">×</button>
<img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
</div>
<?php }?>
</div>
</div>
jQuery for Modal Open:
$("body").on("click",".read",function(){
var id = $(this).data('id');
('#'+id).modal('toggle');
});
You have to use AJAX with PHP. Because each click you have to fetch data from database depend on you article id.kindly read through about ajax.
Now i just try to solve you problem .
First add jquery library in your file
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js'></script>
Replace you read more button with this
<span class='pull-right'><span style='color:#59960b;' data-toggle='modal' data-id='<?php echo $articleid; ?>' data-target='#myModal'>Read more..</span><span>
Change your modal like below
<div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
<div class="modal-dialog">
</div>
</div>
Add this script below to your page
<script>
$(document).ready(function(){
$(document).on('click','span[data-toggle=modal]',function(){
var articleID=$(this).data('id');
$.ajax({
'url':'../model/read_more_articles.php',//create a page and give the url
'data':{id:articleID},//pass id into read_more_articles.php page using method post
'method':'POST',
success: function (data) { //data contain return of the read_more_articles.php
$('.modal-dialog').html(data);//put generate html of the modal-dialog div
}
})
});
})
</script>
Create a page like read_more_articles.php. Here get details of crrosponding article id and populate html .
<?php
$output="";
$articleid=$_POST['id'];//receive article id which is sent by ajax.
$output = $db->viewArticle($articleid);
foreach ($output as $key){
if($key['art_id'] == $articleid){
$output .="<div id='articlepost' class='modal-content-article'>
<div class='modal-header-article'>
<input type='hidden' name='aid' id='aid' value='".$articleid."'/>
<button type='button' style='padding-left:1155px;position:fixed;' class='close' data-dismiss='modal'>×</button>
</div><img src='".$key['art_cphoto']."' style='margin-left:100px;'/>
<div class='modal-body'>
<div align='center' style='color:#222;'>
<strong class='font-2' id='title'>".$arttitle."</strong><br></div>"
}
}
echo $output;
?>
i finally found a way how to do it.. so here is what i did.. first i change my span to button
<button type="button" class="btn openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $articleid;?>">Read More....</button>
and then
my modal div
<div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
<div class="modal-dialog">
</div>
</div>
then created a jquery script to get the id from the button and send it to another page where my html content is and return it and display it in modal-dialog.
<script type="text/javascript">
$('.openModal').click(function(){
var id = $(this).attr('data-id');
alert(id);
$.ajax({url:"../controller/displayarticle.php?id="+id,cache:false,success:function(result){
$(".modal-dialog").html(result);
}});
});
</script>
after sending the id to another page i use $_GET to get the id that is being sent.
$artid = '';
if ( !empty($_GET['id'])) {
$artid = $_GET['id'];
}else{
header("Location: home.php");
}
after sending the id i use for loop to display the data from database in a modal based on the id that is being sent.
$output = $db->viewArticle($artid);
foreach ($output as $key):
<div id="articlepost" class="modal-content-article">
<div class="modal-header-article">
<input type="hidden" name="aid" id="aid" value="<?php echo $artid ?>"/>
<img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
</div>
<div class="modal-body">
<img src="./<?= $key['image'];?>" style="border-radius:50%;margin-top:10px;" width="5%" height="5%" />
</div>
<?php
foreach ($db->countarticlecomment($artid) as $value) {
?>
<i class="fa fa-comment" style="color:#59960b;"></i> <span style="color:gray;"><b><?php echo $value['comments']?></b></span>
</div
<?php endforeach ?>
These buttons are echo out from the database,
When the user clicks onto the button, the user will get to see a pop out before submitting it.
This is my code,
$con = getDbConnect();
$day = date("l");
if (mysqli_connect_errno($con)) {
"Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'");
while ($schedule = mysqli_fetch_array($result)) {
?>
<div class="col-md-3">
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal" schedule="
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>">
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Insert Today's Activity</h4>
</div>
<div class="modal-body">
<p class="activity"></p>
<p>Click on the submit button if the above infomation is correct.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary btn-ok">Submit</a>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('schedule', $(e.relatedTarget).attr('schedule'));
$('.activity').html('You have selected: <strong>' + $(this).find('.btn-ok').attr('schedule') + '</strong>');
});
</script>
<?php
}
mysqli_close($con);
}
?>
</div>
Once the user click onto the submit button, the "academicInstitution" and "duration" will be entered into a database called, "myRecord".But I do not know how to connect the submit button to the database.
If you need to stay on the same page, make an ajax post call to a server side php script: http://api.jquery.com/jquery.post/
This way you will be able to execute the query you want on the server
If you can accept to reload the page, you may simply use an html form
This question may be useful for you: jQuery Ajax POST example with PHP
Note that you don't necessarily need the form element if you choose the ajax post approach
I have a code like this:
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<?php
$message = "Your Upload was successful";
if((isset($message))&&($message!='')){
echo '<script> alert("'.str_replace(array("\r","\n"), '', $message).'"); </script>';
}
redirect($this->uri->uri_string()); //refresh page
?>
I want to show this success alert message and then if the user click on OK it will refresh the browser. In my case it is just refreshing the browser.
What will be the best way to do it.
Thanks a lot in advance.
To make your code work as expected, you have to write the refresh function in Javascript instead of using PHP redirect function like the below:
<?php
$message = "Your Upload was successful";
if ((isset($message)) && ($message != '')) {
echo '<script>
alert("'.str_replace(array("\r","\n"), '', $message).'");
location.reload(true);
</script>';
}
?>
If you want to use Bootstrap modal, try this:
<?php
$message = "Your Upload was successful";
if ((isset($message)) && ($message != '')):
?>
<div class="modal" id="alert-dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Alert</h4>
</div>
<div class="modal-body">
<?php echo $message; ?>
</div>
<div class="modal-footer">
<button data-dismiss="modal" type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#alert-dialog').modal('show').on('hidden.bs.modal', function () {
location.reload(true);
});
});
</script>
<?php endif; ?>
I'm not sure this is possible with a standard alert box, you can do it with a confirm.
e.g.
var con = confirm('Are you sure');
if (con == true) {
//means the user clicked on `OK`
//refresh the page
} else {
//means the user clicked `Cancel`
}
Alternatively you could use a customized alert box, to find a suitable one just search on google.