【问题标题】:How do I select a dynamic ID represented by a ruby instance variable?如何选择由 ruby​​ 实例变量表示的动态 ID?
【发布时间】:2015-07-14 03:42:11
【问题描述】:

所以我有一个div,其 ID 由我认为的实例变量填充:

<div class="card" id="card-<%= @card_number %>">

在我的create.js.erb 中,如何选择那个 div?

我试过了:

$('#<%= @card_id %> .card-comments').prepend("<%= j (render partial: 'nodes/comment', locals: { comment: @comment}) %>");

但它不起作用并为选择器中的 ID 输出一个空白值。如何让它选择正确的 ID?

我也尝试了$('#&lt;%= j @card_id %&gt; .card-comments').prepend...,但这也不起作用。

编辑 1

这是在视图中生成该动态 ID 后缀的代码:

    <% @card_number = 0 %>
      <% @nodes.each do |node| %>
        <% @card_number += 1 %>
        <div class="col s12 m6 l4 card-container">
          <div class="card" id="card-<%= @card_number %>">
            <!-- Card Content -->

生成这样的 HTML:

<div class="card" id="card-2">

编辑 2

我的控制器中调用create.js.erb 的操作是CommentController#Create。这是它的样子:

  def create
    @node = Node.find(params[:node_id])
    @comment = current_user.comments.new(comment_params)
    @comment.node = @node
    @card_id = params[:card_id]

    respond_to do |format|
      if @comment.save and @node.save
        format.html
        format.js
      else
        format.html # { render action: 'new' }
        format.js
      end
    end
  end

编辑 3

这是生成表单的代码:

<div class="card-input">
  <%= simple_form_for([node, Comment.new], html: { id: "new_comment_card-#{@card_number}"}, remote: true) do |f| %>
   <%= f.error_notification %>
   <%= f.input_field :message, as: :text, id: "card-input-field-#{@card_number}", class: "input-field", placeholder: "Share your thoughts", cols: "30", rows: "10" %>
    <%= f.button :submit, name: "card_id", value: "card-#{@card_number}", class: "input-submit" %>
  <% end %>
</div>

编辑 4

提交表单后,服务器日志如下所示:

Started POST "/nodes/86/comments" for 127.0.0.1 at 2015-07-13 23:22:26 -0500
Processing by CommentsController#create as JS
  Parameters: {"utf8"=>"✓", "comment"=>{"message"=>"Form Video Comment 5."}, "card_id"=>"card-2", "node_id"=>"86"}
  User Load (5.7ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 57  ORDER BY "users"."id" ASC LIMIT 1
  FamilyTree Load (7.8ms)  SELECT  "family_trees".* FROM "family_trees"  WHERE "family_trees"."user_id" = $1 LIMIT 1  [["user_id", 57]]
  Role Load (4.5ms)  SELECT "roles".* FROM "roles" INNER JOIN "users_roles" ON "roles"."id" = "users_roles"."role_id" WHERE "users_roles"."user_id" = $1 AND (((roles.name = 'admin') AND (roles.resource_type IS NULL) AND (roles.resource_id IS NULL)))  [["user_id", 57]]
  Node Load (2.3ms)  SELECT  "nodes".* FROM "nodes"  WHERE "nodes"."id" = $1 LIMIT 1  [["id", 86]]
   (1.9ms)  BEGIN
  SQL (5.1ms)  INSERT INTO "comments" ("created_at", "message", "node_id", "updated_at", "user_id") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["created_at", "2015-07-14 04:22:26.760577"], ["message", "Form Video Comment 5."], ["node_id", 86], ["updated_at", "2015-07-14 04:22:26.760577"], ["user_id", 57]]
  SQL (6.2ms)  UPDATE "nodes" SET "comments_count" = COALESCE("comments_count", 0) + 1 WHERE "nodes"."id" = 86
   (3.3ms)  COMMIT
   (7.7ms)  BEGIN
   (1.8ms)  COMMIT
  Rendered nodes/_comment.html.erb (1.2ms)
  Rendered comments/create.js.erb (11.6ms)
Completed 200 OK in 351ms (Views: 29.3ms | ActiveRecord: 46.2ms)

注意params[:card_id] = 'card-2'

【问题讨论】:

  • 你能添加控制器代码吗,基本上如果选择了空白值,这意味着@card_id中没有值
  • 是在card-&lt;%= @card_number %&gt; 中存在类名为.card-comments 的元素,当您执行$('#&lt;%= @card_id %&gt; .card-comments') 时,它将在card-&lt;%= @card_number %&gt; 中搜索类为.card-comments 的元素
  • @Coderhs 不,@card_id 中有一个值。我可以通过简单地查看 HTML 的源代码来判断,我看到它生成了带有 ID 的 DIV:card-1, card-2, etc.,这就是值的用途。该值是在视图中设置的,而不是现在的控制器中。我稍后会重构,但只想让它先工作。
  • @GuruprasadRao 是的,它在card-&lt;%= @card_number %&gt; div 里面。理想情况下,我希望它搜索一个类为 card_comments 的 div,它是另一个 ID 为 card-&lt;%= @card_number %&gt; 的 div 的子级。
  • 您说“该值是在视图中设置的,而不是现在的控制器”请分享设置该值的代码。

标签: javascript jquery ruby-on-rails ruby ruby-on-rails-4


【解决方案1】:

如果在 Rails 视图中,则为

<div class="card" id="card-<%= @card_number %>">

那么对于 Javascript,你应该使用:

$("#card-<%= @card_id %>")

【讨论】:

  • 我也是这么想的......从技术上讲,你有一个错误。在选择器中它应该是@card_number 而不是@card_id。无论哪种方式,我都尝试了,但它不起作用。
  • 这个一点用处都没有,不能随便猜就答!请阅读上面的 cmets。
猜你喜欢
  • 2012-05-14
  • 2011-10-08
  • 2013-07-30
  • 1970-01-01
  • 1970-01-01
  • 2014-09-21
  • 2019-10-28
  • 2022-01-23
  • 2021-10-02
相关资源
最近更新 更多