使用 Rails UJS 加载内容时指定微调器
我正在使用 Rails UJS 根据我单击的链接将部分加载到容器中。我已经一切正常(请参阅我对问题的回答此处 代码)但我想在加载内容时添加一个微调器。我该怎么做呢?我在 Simone Carletti 的 UJS 上的帖子中找到了一个简短的示例 但似乎无法正确实施。
这是生成的 HTML:
<div id="tabs">
<ul id="infoContainer">
<li><a href="/profiles/1/profile_reviews" class="active" data-remote="true" id="profile_loader">Reviews</a></li>
<li><a href="/profiles/1/profile_about" class="inactive" data-remote="true" id="profile_loader">About</a></li>
<li><a href="/profiles/1/profile_credits" class="inactive" data-remote="true" id="profile_loader">Credits</a></li>
<li><span id="loading">Loading...</span></li>
</ul>
<div id="tabs-1">
# load data from partials here
</div>
</div>
有人能帮我吗?
I'm using Rails UJS to load partials into a container depending on the link I click. I've got everything working (see my answer to my question here for code) but I'd like to add a spinner while the content is loading. How can I go about doing this? I found a brief example in Simone Carletti's post on UJS but can't seem to implement it properly.
Here's the HTML generated:
<div id="tabs">
<ul id="infoContainer">
<li><a href="/profiles/1/profile_reviews" class="active" data-remote="true" id="profile_loader">Reviews</a></li>
<li><a href="/profiles/1/profile_about" class="inactive" data-remote="true" id="profile_loader">About</a></li>
<li><a href="/profiles/1/profile_credits" class="inactive" data-remote="true" id="profile_loader">Credits</a></li>
<li><span id="loading">Loading...</span></li>
</ul>
<div id="tabs-1">
# load data from partials here
</div>
</div>
Can anyone help me out?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
请参阅此答案以获取更多信息,但最简单的方法是绑定到用于显示/隐藏微调器的
ajax:before
和ajax:after
事件。是通过
javascript_event_tag
还是通过绑定外部 JS 文件来执行此操作是一个不同的问题。See this SO answer for more info, but the easiest thing to do is to bind to the
ajax:before
andajax:after
events to show/hide the spinner.Whether to do this via the
javascript_event_tag
or by binding in an external JS file is a different issue.