CODEWITHSUNDEEP
javascriptphpjqueryhtml
Mr Boolean
Mr Boolean

Reputation: 103

Bootstrap modal not showing when called

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?

Upvotes: 1

Views: 1877

Answers (3)

Ronnie Oosting
Ronnie Oosting

Reputation: 1252

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:

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:

Upvotes: 3

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6006

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>

Upvotes: 1

Zendy
Zendy

Reputation: 774

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.

Upvotes: 1

Related Questions