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

时间:2012-05-29 06:07:53

标签: javascript ruby-on-rails ajax devise

我目前在导航区域中有一个<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这部分?

1 个答案:

答案 0 :(得分: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'" %>

进入辅助方法