Question

在寻找我的问题的答案一段时间后，我现在得出结论，我需要问我关于SO的第一个问题。我希望你能帮忙！

如下所示，我有一个列表，其中包含通过ajax单击时呈现不同部分的链接。这里的一切都运行正常，直到我决定使用javascript将列表更改为下拉列表（在http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/的帮助下）。

下拉菜单中的所有功能均可使用，但“link_to：remote =＆gt; true”除外。单击下拉列表中的链接时，根本不会发生任何事情。我知道主要问题在于dropdown.js代码，但由于我对编程很新，我根本找不到解决方案。

问题吗

基本上，如何在我的下拉列表中创建链接有ajax的部分？

查看/产品/ Index.html.erb

<div id="proftab" class="wrapper-dropdown">
 <span>Popular</span>
 <ul class="dropdown">
    <li><%= link_to "Popular", products_index_path(:feed => "popular"), :remote => true%></li>
    <li><%= link_to "Following", products_index_path(:feed => "following"), :remote => true%></li>
    <li><%= link_to "Sales", products_index_path(:feed => "sales"), :remote => true%></li>
    <li><%= link_to "Expensive", products_index_path(:feed => "expensive"), :remote => true%></li>
    <li><%= link_to "Trendspotter", products_index_path(:feed => "trendspotter"), :remote => true%></li>
 </ul></div> 

<div class="row">
<div id="profile">
    <!-- The rendering is going on here -->
</div>

控制器/ products_controller.erb

def index
 case params[:feed]
  when "sales"
    @products = #Different scopes
  when "expensive"
    @products = #Different scopes
  when "trendspotter"
    @products
  when "following"
    @products = #Different scopes
  else
    @products = #Different scopes
  end
  respond_to do |format|
   format.html
   format.js
  end
end

查看/产品/ index.js.erb的

<% if params[:feed] == 'sales' %>
   $("#profile").html("<%= escape_javascript(render(:partial => 'sales')) %>");
<% elsif params[:feed] == 'following' %>
   $("#profile").html("<%= escape_javascript(render(:partial => 'following')) %>");
<% elsif params[:feed] == 'expensive' %>
   $("#profile").html("<%= escape_javascript(render(:partial => 'expensive')) %>");
<% else %> 
   $("#profile").html("<%= escape_javascript(render(:partial => 'popular')) %>");
 <% end %>

的routes.rb

  root :to => 'products#index', :constraints => lambda{|req| !req.session[:user_id].blank?}
  root :to => 'pages#home'

Assets / javascript / dropdown.js解决问题

function DropDown(el) {
this.proftab = el;
this.placeholder = this.proftab.children('span');
this.opts = this.proftab.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}


DropDown.prototype = {
initEvents : function() {
    var obj = this;

    obj.proftab.on('click', function(event){
        $(this).toggleClass('active');
        return false;
    });

    obj.opts.on('click',function(){
        var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text(obj.val);
    });
},
getValue : function() {
    return this.val;
},
getIndex : function() {
    return this.index;
}
}



$(function() {
var proftab = new DropDown( $('#proftab') );
$(document).click(function() {
     // all dropdowns
    $('.wrapper-dropdown').removeClass('active');
 });

});

下拉列表：remote =＆gt; true链接不在Rails 3.2中呈现ajax partial

0 个答案: