codeIgniter Javascript alert with success message on click ok page refresh

Question

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.

Answer 1

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">&times;</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; ?>

Answer 2

I'm not sure this is possible with a standard alert box, you can do it with a confirm.

eg

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.