Modal won't work in php echo

Question

I'm trying a modal to my php page so when the form is submitted a modal would be triggered, but it doesn't work here's my code:

<?php 
if(isset($_POST['add'])){

    $genre=$_POST['genre'];
    $desc_genre=mysqli_real_escape_string($cnxn,$_POST['desc_genre']);

    $sql = "INSERT INTO genres (genre, desc_genre) VALUES ('".$genre."', '".$desc_genre."')";
    if(mysqli_query($cnxn, $sql)){
        echo "<script> 
     $('#myModal').modal('show');
 </script>";
    }
?>
<div id="myModal" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-body">
        <p>This Genre Has Been Added Successfully</p>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
        <button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
    </div>
</div>

<div class="login-page">
    <?php }else{ ?>
    <div class="form">
        <form class="login-form" name="f1" method="post" action="" enctype="multipart/form-data">
            <input required name="genre" type="text" placeholder="Add Genre"/>
            <textarea required name="desc_genre" type="text" placeholder="Description of the Genre"></textarea>
            <button type="submit" name="add">ADD</button>
        </form>
    </div>

ps: everything is running fine except for the modal showing

I tried this too but no luck echo ""; – El Foulki Mbarek Oct 25 '16 at 00:31 — El Foulki Mbarek, Oct 25 '16 at 00:31
Are there any errors in the console logs? – Jay Hewitt Oct 25 '16 at 00:35 — Jay Hewitt, Oct 25 '16 at 00:35
No, there are no errors – El Foulki Mbarek Oct 25 '16 at 11:13 — El Foulki Mbarek, Oct 25 '16 at 11:13

score 0 · Answer 1 · answered Oct 25 '16 at 00:34

0

This will be running before jQuery has loaded. You need it to run after the library has loaded:

<script>
    $(function() {
        $('#myModal').modal('show');
    });
</script>

answered Oct 25 '16 at 00:34

Jay Hewitt

1,116
8
16

jQuery loads first because I put the link to it in the head not at the bottom, and I tried it at the bottom too but didn't work. – El Foulki Mbarek Oct 25 '16 at 11:26
Without seeing the code, this looks correct. Another article suggests either bootstrap loaded multiple times, or multiple jQuery instances causing conflicts – Jay Hewitt Oct 25 '16 at 15:31
http://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery – Jay Hewitt Oct 25 '16 at 15:31
I can't see what's wrong! jQuery doesn't load twice. – El Foulki Mbarek Oct 25 '16 at 17:21
Is the Twitter Bootstrap JS being loaded too? Also, there are definitely no errors in the browser console - Inspect > Console – Jay Hewitt Oct 25 '16 at 22:38

Modal won't work in php echo

1 Answers1