[英]Javascript | Enter key first time should press a button, second time should press a label or url
[英]Spinner shows first time on button press, however fails to show when button is pressed second time?
我试图在按下按钮时显示“加载”微调器。 所以基本上当页面第一次加载时,微调器是隐藏的。 当用户填写表单并按下按钮时,会显示“加载”微调器,并向后端服务器发送一个发布请求。 在服务器发回响应后,随着页面重新加载,微调器再次隐藏,响应来自 POST 请求。 这按预期工作。 然而,现在问题的一部分来了。 如果用户再次填写表单并点击按钮,一切都会像以前一样发生,但是这次“加载”微调器没有出现。
这是 jquery:
$(document).ready(function()
{
console.log('ready');
// Hide spinner on document load
$("#spinner").hide();
$("#answer").css({
display: "block",
visibility: "visible"
});
// When form submit button is clicked check the form is valid. If form is valid show spinner.
$('#button-question').click( function(){
if ( $('#form-question')[0].checkValidity() ){
$("#answer").css({
display: "none",
visibility: "hidden"
});
$("#wiki-spinner").show();
}
});
})
相关的 html 元件如下所示:
<form action="{% url 'xyz' %}" method="POST" enctype="multipart/form-data" class="form-horizontal" id="form-question">
{% csrf_token %}
<div class="form-group">
<label for="name" class="control-label">Question</label>
<input type="text" class="form-control" id="question" name="question" aria-describedby="wikiHelp" placeholder="{{question}}" value="{{question}}" required>
<small id="wikiHelp" class="form-text text-muted small-text">Questions should be relevant to the article. </small>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
<button class="btn btn-success" id="button-question"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Ask Question</button>
</div>
</div>
</form>
<!-- {% if show_wiki_spinner %} -->
<div class = "row justify-content-center h-100 w-100" id="spinner">
<div class = "row justify-content-center h-100 w-100 d-table">
<div class = "col w-100 text-center d-table-cell align-middle">
<h1 class = "spinner-font">Loading!</h1>
<div class="spinner-border text-success" role="status">
</div>
</div>
</div>
</div>
<!-- {% endif %} -->
<div class="answer" id="answer">
</div>
我找到了答案。 我正在使用 Django 模板和 jinja2。 即使在注释掉 jinja2 变量之后仍然有效,这在 POST 请求重新加载后隐藏了微调器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.