0

私はStateモデルとモデルhas_many :citiesを持ってcityいbelongs_to :stateます。州のリストを表示したいのですが、ユーザーが州をクリックしたときにajax呼び出しを行って、その州に属する都市を下に表示します。

これはjQueryを使用して実行でき、パーシャルなしで実行できると確信しています。いくつかの例と解決策を思い付くのに苦労しています。

これが私が最初にどのように見せたいかです：-アラバマ-アラスカ-アーカンソー-など。

次に、誰かが「アラスカ」をクリックすると、リストは次のように更新されます。-アラバマ-アラスカ-アンカレッジ-フェアバンクス-ジュノー-アーカンソー

どんな助けでも大歓迎です！

編集

さて、私はjQueryを追放してきましたが、次のコードを思いつきました。州にそれぞれの都市を個別に表示させることはできません。現状では、いずれかの州をクリックすると、最初の州の都市のみが表示されます。

コードは次のとおりです。

<script>
$(function(){
    $('#city').hide();
$('.toggle').toggle(function(){
    $('#city').fadeIn(100);
},
function(){
    $('#city').fadeOut(100);
});
});

</script>
<%= render "layouts/header"%>

<table class="state_list">
<% @states.in_groups_of(1, false).each do |state| %>
  <tr>
<% for state in state %>
<td>    
<div class="toggle"><h3><%= state.name %><br /></h3></div>
    <% @cities.each do |city| %>
        <% if city.state.id == state.id %>
                    <div id="city"><%= link_to city.name, cities_path(:city_id => city.id) %> (<%= city.posts.where(:published => true).count %>)<br />
            <% end %>
        <% end %>   
</div>
    </td>
        <% end %>
  </tr>
<% end %>
</table>

繰り返しになりますが、フィードバックをいただければ幸いです。

4

1 に答える 1

0

StackOverflow Answer

わかった！

参考までにこれを行いました...また、もっと良い方法があれば教えてください。

<table class="state_list">
<% @states.in_groups_of(1, false).each do |state| %>
<tr>
<% for state in state %>
<td>    
    <script>
    $(function(){
            $('#city-<%=state.id%>').hide();
        $('#toggle-<%=state.id%>').toggle(function(){
            $('#city-<%=state.id%>').fadeIn(100);
        },
        function(){
            $('#city-<%=state.id%>').fadeOut(100);
        });
    });

    </script>
<div id="toggle-<%=state.id%>"><h3><%= state.name %><br /></h3></div>
    <% @cities.each do |city| %>
        <% if city.state.id == state.id %>
                    <div id="city-<%=state.id%>"><%= link_to city.name, cities_path(:city_id => city.id) %> (<%= city.posts.where(:published => true).count %>)<br />
            <% end %>
        <% end %>   
</div>
</td>
    <% end %>
  </tr>
<% end %>
</table>

すべてが期待どおりに機能しています！

于 2012-04-11T14:51:03.173 に答える