Как передать div_id в функцию загрузки jquery

Question

У меня есть модель истории, которая имеет много постов. Я перечисляю истории в индексном представлении без постов каждой истории. Когда пользователь нажимает на одну из историй в индексном представлении, я хочу загрузить сообщения этой истории с помощью вызова сюжетов / (story_id) / posts с помощью функции ajax .load и убедиться, что сообщения помещены в правильный div этой истории (создан от "<% = div_for (story," posts_bucket_for ") do%>")

Проблема в том, что я не знаю, как передать правильный story_id в функцию .load или как убедиться, что полученные сообщения загружены в правильные posts_bucket_for.

Вот мой файл _story.html.erb:

<%= div_for(story) do %>
   <%= div_for(story, "heading_for") do %>
        <span class=story_title>
            <%= story.title.titleize %>
        </span>
        <span class=story_post_amount>
            # of posts: <%= story.posts.length %>
        </span>
   <% end %>
<%= div_for(story, "posts_bucket_for") do %>
<% end %>

Вот мой PostController # index action

  def index
    @story = Story.find(params[:story_id])
    @posts = @story.posts
    respond_with(@posts, :api_template => :public, :root => :posts)
  end

Любая помощь будет принята с благодарностью !!!

Answer 1

Есть много способов сделать то, что вы пытаетесь достичь, и, держу пари, многие из участников здесь предоставят вам решение, основанное на их опыте кодирования.Вот мое:

Прежде всего, вы должны решить, хотите ли вы, чтобы заголовок истории оставался видимым или нет, как только вы «загрузите» фактическую историю в нужную вам точку.

У меня естьпонятия не имею о ruby ​​или ruby-on-rails, но у вас есть очень хороший трек по «ведению блогов».

Допустим, из вашей базы данных вы перечислили истории, доступные как

<div id='story1' onClick='showStory(1); ' >Story 1</div>
<div id='story2' onClick='showStory(2); ' >Story 2</div>
<div id='story3' onClick='showStory(3); ' >Story 3</div>
<div id='story4' onClick='showStory(n); ' >Story n</div>

function showStory(storyNumber) {
    $.get('url-of-the-story-storyNumber', function (data) {
        $('#story'+storyNumber).html(data);
    });
}
or
function showStory(storyNumber) {
     $('#story'+storyNumber).load('url-of-the-story-storyNumber');
}

Если выЕсли вы планируете не перезаписывать заголовок сюжета, просто добавьте еще один div в сюжетную линию:

<div onClick='showStory(1); ' >
 Story 1
 <div id='story1' ></div>
</div>

<div onClick='showStory(2); ' >
 Story 2
 <div id='story2' ></div>
</div>

<div onClick='showStory(3); ' >
 Story 3
 <div id='story3' ></div>
</div>

<div onClick='showStory(n); ' >
 Story n
 <div id='storyn' ></div>
</div>

Чем проще сделать ваши идентификаторы «управляемыми», тем проще будет создавать маневры с ними.

Удачи!

Answer 2

Вот один из способов реализации решения (это для Rails 3).

Согласно документации Rails для div_for, div_for(story, :class => "story") будет выдавать HTML, который выглядит следующим образом:

<div id="story_123" class="story"> Your content </div>  

Итак, с jQuery вы можете запустить что-то вроде:

// Attach click event handlers to your story divs
$(function() {
  $("div.story").click(function() {
    // Get the HTML ID of the story div
    html_id = $(this).attr('id');
    // Extract the database id
    story_id = html_id.split("_")[1];
    // Call your handy function to load story posts
    loadStoryPosts(story_id);
  });
});

Для ваших ведер я бы не стал использовать другой div_for(story). Это приведет к тому, что у вас будет два divs на странице с одинаковым идентификатором. Вместо этого я бы сделал что-то вроде этого:

<%= div_for(story, :class => "story") do %>
    <p>The story</p>
    <div class="posts" />
<% end %>

А потом в jQuery

// Make an AJAX request to your Rails server
function loadStoryPosts(story_id) {
  // This is a jQuery AJAX GET request to your stories/:id/posts route
  $.get("stories/" + story_id + "/posts", function(data) {
    html_id = "story_" + story_id;        
    // Insert the result of the request into the appropriate posts bucket
    $("#"+html_id+" .posts").html(data);
  });
}

Оставшаяся задача - заставить действие контроллера обработать запрос AJAX и вернуть сообщения, которые нужно вставить на страницу.

class StoriesController < ApplicationController
  def posts
    story = Story.find params[:id]
    # Render the story's posts inside a partial (without any layout)
    render :partial => "stories/posts", :locals => { :posts => story.posts }, :layout => false
  end
end

Вы также захотите создать частичную визуализацию постов. В моем примере это будет views/stories/_posts.html.erb.

Это много нового учебного материала, если вы раньше не имели дело с AJAX + Rails, поэтому вот пара полезных уроков: здесь и здесь .