Modal won't work in php echo - php

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

Answer 1

This will be running before jQuery has loaded. You need it to run after the library has loaded:
<script>
$(function() {
$('#myModal').modal('show');
});
</script>