使用 Rails UJS 加载内容时指定微调器

发布于 2024-12-12 20:49:36 字数 1095 浏览 0 评论 0原文

我正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

红玫瑰 2024-12-19 20:49:36

请参阅此答案以获取更多信息,但最简单的方法是绑定到用于显示/隐藏微调器的 ajax:beforeajax: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 and ajax: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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文