我正在尝试使用一个表单,允许用户检查数据库中的状态,并在提交时我想写入我们的数据库,然后返回一个bootstrap css模式,其信息来自查询数据库中的另一个表。一切都很好,除了模态,它只是加载div而不创建弹出面板。我假设我没有加载它需要但仍在学习的依赖库,因此我认为我会看到对我的代码和任何可能的解决方案的反馈。
我的代码是:
<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>
答案 0 :(得分:0)
感谢@Mogsdad将html模式从NATIVE切换到IFRAME是解决方案,并且匹配样式css和引导脚本匹配:
不工作:
<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>
工作
<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>