Using Bootstrap Modals in google apps script - google-apps-script

Question

I am trying to have a form that allows users to check a status in our DB, and on submit I want write to our db, and then return a bootstrap css modal that has their info from querying another table in the db. All works great except the modal, it just loads the div without creating the pop-up panel. I am assuming I am not loading a dependency library that it needs but still learning so figured I'd see feedback on my code and any potential solutions.
My code is:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
form { margin:0 auto; }
input { display:block; }
</style>
<div class="container-fluid">
<form id="LiRoForm">
<div class="page-header">
I have a an image header here
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name..">
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control validate[required,custom[email]]" id="email" name="email" placeholder="Enter your email..">
</div>
<div class="form-group">
<label>Application ID:</label>
<input type="text" class="form-control" id="appID" name="appID" placeholder="Please enter the full application ID">
</div>
<input type="submit" class="btn-primary btn-lg" id="submit-button" value="Check Status"
onclick="submitForm(); return false;">
</form>
</div>
<div id="dialog" title="Modal Title" class="modal fade" role="dialog" aria-labelledby="dialog" aria-hidden="true"></div>
<script>
function submitForm() {
var form = $('#LiRoForm')[0];
checkForm(function(){
$("#submit-button")[0].value = 'Checking Status...';
google.script.run
.withSuccessHandler(function onSuccess(data) {
var data = JSON.parse(data);
if (data == '') {
$("#dialog").html("<div>Our records indicate you have no data in the system</div>");
}
else {
$("#dialog").html("<div>Our system indicates you have the following data:</div>");
for(var x in data) {
$("#dialog").append("<div>"+data[x].FileType+"</div>");
}
}
$("#submit-button")[0].value = 'Check Status';
$("#dialog").modal('show');
})
.withFailureHandler(function(error) {
alert(error);
})
.checkStatus(form);
});
}
function checkForm(callback) {
var name = $('#name').val();
var email = $('#email').val();
var appID = $('#appID').val();
var emailPattern = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (name == '' || email == '' || appID == '' || fileType == '') {
alert("Please fill in all fields");
return;
}
else if (file == '') {
alert("Please select a file");
return;
}
else if (emailPattern.test(email) == false) {
alert("Please enter a valid email address");
return;
}
// Validate AppID
google.script.run
.withSuccessHandler(callback)
.withFailureHandler(function(error) {
alert(error);
})
.checkID(appID);
}
</script>

Answer 1

Thanks #Mogsdad switching the html mode from NATIVE to IFRAME was the solution, as well as matching up that the style css and bootstrap scripts matched up:
Not Working:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Working
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>