Question

我目前在导航区域中有一个<ul>，其中包含一个<%= render :partial => "sessions/manager" %>，它基本上会调用另一个部分，具体取决于用户登录状态，可以呈现登录表单或欢迎声明。

我的登录部分由ajx提供支持，因此可以自动刷新。这是我正在使用的代码。

login.js

$(document).ready(function() {

  $('form#sign_in').bind('ajax:success', function(e, data, status, xhr) {
    console.log(data);
    if(data.success) {
      $('.user_nav').html(data.content);
    } else {
      $('.user_nav').prepend(data.errors.join('<br />'));
    }
  });

});

现在我希望我的页面上有另一个div，其中包含隐藏或显示的各种链接，具体取决于登录状态的用户。

目前我的代码就是这个。

<% if(signed_in?) %>
  <li><%= link_to "Clients", "/clients"  %></li>
  <li><%= link_to "Jobs", "/jobs"  %></li> 
<% else %>
<% end %>

但是，这并不像id那样有效。链接最初没有显示哪个很酷但是当我登录时链接不再显示...除非我进行整页刷新。

我怎么能ajax-ify这部分？

Answer 1

最简单的方法是将div放在页面上，然后使用javascript设置切换其可见性。

将其放入您的代码中：

<li class="login-show" <%= signed_in? ? "" : "style='display:none'" %> >
  <%= link_to "Clients", "/clients"  %>
</li>
<li class="login-show" <%= signed_in? ? "" : "style='display:none'" %> >
  <%= link_to "Jobs", "/jobs"  %>
</li>

然后这是你的js：

 $('form#sign_in').bind('ajax:success', function(e, data, status, xhr) {
    console.log(data);
    if(data.success) {
      $('.user_nav').html(data.content);
      // show the li items hidden from non-logged in users
      $('.login-show').show();
    } else {
      $('.user_nav').prepend(data.errors.join('<br />'));
    }
  });
});

那应该有用。但为了保持整洁，我会移动这个垃圾：

<%= logged_in? "" : "style='display:none'" %>

进入辅助方法

当用户通过ajax登录时刷新div？

1 个答案: