文档.Ready在使用下划线加载模板时再次调用
document.ready called again when loading template using underscore.js
我只是试图使用underscore.js
加载模板,但是当我点击登录按钮并在检索响应后向服务器发出请求时,我试图删除一个模板并显示其他模板,之后再次调用document.ready()导致重新渲染登录页面。
我很困惑是什么导致这种情况发生,任何帮助都是感激的。
下面是javascript代码:
$(document).ready(function(){
/* Login-Workflow-start*/
var loginTemplate = _.template($("#login-template").html());
$("#main-content").html(loginTemplate);
$("#btn_login").on('click', function(){
// when login is clicked.
var formData = $("#form_login").serialize()
console.log(formData);
var req= $.ajax({
type: "POST",
url: "http://localhost:3002/login",
data: {
"username": $('[name="username"]').val(),
"password": $('[name="password"]').val()
},
success: function(responseData,textStatus,jqXhr){
console.log("Response: " + responseData);
// show welcome page now
var welcomeTemplate = _.template($("#welcome-template").html());
$("#main-content").html(welcomeTemplate);
},
error: function(){
console.log("Error!!!");
}
});
});
/* Login-Workflow-end*/
});
更新:
welcome-template如下所示:
<script type="text/template" id="welcome-template">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
</div>
</script>
登录模板如下:
<script type="text/template" id="login-template">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#login" role="tab" data-toggle="tab">Login</a></li>
<li><a href="#register" role="tab" data-toggle="tab">Register</a></li>
<li><a href="#reset-password" role="tab" data-toggle="tab">Reset Password</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="login">
<form role="form" id="form_login">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Username</span>
<input type="text" class="form-control" name="username" placeholder="Enter Username here" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Password</span>
<input type="text" class="form-control" name="password" placeholder="Enter Password here" />
</div>
</div>
<button class="btn btn-wide btn-primary mrm" id="btn_login">Login</button>
</form>
</div>
<div class="tab-pane" id="register"> Register page loading..</div>
<div class="tab-pane" id="reset-password">Reset Password page Loading</div>
</div>
</div>
</script>
更新2 如果有人想查看整个/部分代码进行分析,请访问bitbucket上的这个仓库
找到解决方案了,
罪魁祸首是表单标签,在点击提交按钮时,表单标签也发出了自己的请求,这导致了文档。
解决方案:将form
标签转换为div
,因为我们正在处理自己的请求创建
相关文章:
- 使用同步ajax调用加载屏幕
- 调用加载的顺序函数会意外中断代码
- Requirejs:dist 失败,加载器插件没有在构建:文本中调用加载回调
- 使用 ajax 调用加载 php 文件并执行按钮单击事件
- jQuery函数在页面上调用加载和点击
- IMG 未使用 AJAX 调用加载图像
- 如何在 ag-grid 中从 http 调用加载动态列和行(列和记录都应该是动态的)
- 由 ajax 调用加载的页面文本框上的 Jquery 按键事件
- 在 ajax 调用加载的页面上隐藏多个
- 使用 Ajax 调用加载选项卡内容
- 调用/加载 Jquery 页面
- Ajax调用加载当前内容
- 如何在AngularJS Bootstrap模式中从AJAX调用加载JSON数据
- AngularJS-使用REST API调用加载图像
- 在angular js中通过ajax调用加载模板url
- 我正在做一个ajax调用加载内容到模态对话框;它似乎在所有其他浏览器上工作,而不是IE
- 尝试通过(jQuery)ajax调用加载Google图表
- 尝试通过jQuery ajax调用加载Google图表
- 从Javascript调用加载dll时出现java安全错误,但直接从applet调用时没有
- 通过Ajax调用加载元素后,单击事件不工作