Bootstrap modal not showing when called

Question

So on one of the pages, I have: (First Page)

if (isset($_SESSION['isSuspend'])){
    echo '<script>$("#SuspendModal").modal("show");</script>';
    unset($_SESSION['isSuspend']);
}

On the same page I have the modal:

<div class="modal" tabindex="-1" role="dialog" id="SuspendModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Suspension System</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><?php echo $_SESSION['isSuspend']; ?></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
            </div>
        </div>
    </div>
</div>

and on another page: (Second Page)

if ($conn->query($sql) === TRUE){
        $_SESSION['isSuspend'] = "You have suspended ".$user_id."!";
        header("Location: ../admin/edit.php?user=$user_id");
    } else {
        echo "DEBUG: Error: ".$sql."<br>".$conn->error;
    }

My problem is that on the first page when I click the button suspend, it will direct to the suspend.php which is the second page if it succeeds in adding it to the database it will set the session var to said string. But when it goes back to the first page, the bootstrap modal does not open despite it being called. What am I doing wrong?

open console tab and see what type errors over there. I think this code is more clean and readable. you can try it. '; — Rahul, Aug 24 '18 at 09:37

Ronnie Oosting · Accepted Answer · 2018-08-24T09:54:33.853

You can do this with jQuery.

HTML

<div class="modal" tabindex="-1" role="dialog" id="SuspendModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Suspension System</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>asd</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
            </div>
        </div>
    </div>
</div>

jQuery

<script>
    $(document).ready(function(){
        $("#SuspendModal").modal();
    });
</script>

Code above will open your modal once the page is loaded.

You can do a couple of checks to like adding requirements on when to open a modal:

Example

<?php if($_SESSION['something'] == 'something'): ?> // You can also do it on $_POST / $_GET / $array / $string etc.
<script>
    $(document).ready(function(){
        $("#SuspendModal").modal();
    });
</script>
<?php endif; ?>

Extra note

Personally I prefer to stop PHP instead to echo your script and content.

So instead of:

if (isset($_SESSION['isSuspend'])){
    echo '<script>$("#SuspendModal").modal("show");</script>';
    unset($_SESSION['isSuspend']);
}

I would have done this:

<?php if (isset($_SESSION['isSuspend'])): ?>
    <script>
        $("#SuspendModal").modal("show");
    </script>
    <?php unset($_SESSION['isSuspend']);
endif; ?>

Because for me, it is a lot easier to read the code and eventually to debug/improve my scripts. (ATLEAST in PHPStorm)

Extra note 2

Another thing you might want to know for your modal is this:

What's the tabindex="-1" in bootstrap for

It could happen some CSS settings are not being parsed correctly. I (finally) managed to fix that, by deleting tabindex="-1". Just a small note :-).

Documentation:

https://getbootstrap.com/docs/3.3/javascript/#modals <-- Bootstrap v3
https://getbootstrap.com/docs/4.0/components/modal/ <-- Bootstrap v4
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

Awesome! I've added an 'Extra note', could be helpful for you. — Ronnie Oosting, Aug 24 '18 at 09:51

score 1 · Answer 2 · answered Aug 24 '18 at 09:44

I think the problem of your script is it doesn't get called on load To execute the script on load, you need to do this

if (isset($_SESSION['isSuspend'])){
    echo '<script>$(window).on("load",function(){ $("#SuspendModal").modal("show"); }</script>';
    unset($_SESSION['isSuspend']);
}

This way, the show modal script will be executed once the page is loaded.

score 1 · Answer 3 · answered Aug 24 '18 at 09:46

may be you are writing this php code on the start of page

if (isset($_SESSION['isSuspend'])){
   echo '<script>$("#SuspendModal").modal("show");</script>';
   unset($_SESSION['isSuspend']);
}

That time DOM will not be loaded fully, so better you write this code in the script as

<script>
    $(document).ready(function(){
        var session='<?php echo $_SESSION['isSuspend']; ?>'
        if(session){
            $("#SuspendModal").modal("show");
        }
    });
</script>

Bootstrap modal not showing when called

3 Answers3