Question

我与Resources＆amp ;;有多态关联我的rails app中的标志。每个资源都可以由用户标记。

在资源编辑页面上，管理员可以通过Jquery删除与每个资源关联的多个标志。（这很好用）

然后，我尝试在用户更新资源之前使用data-confirmation属性显示警报消息中剩余的标记总数。

例如：

<%= f.submit "Update Resource", data: { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." } %>

出于某种原因，我的jquery更新了整个div按钮VS数据确认属性中的变量。

如何使用Jquery直接在数据确认属性中定位变量？

模型

class Resource 
  belongs_to :district
  has_many :flags, as: :flaggable, :dependent => :destroy  
end 

class Flag 
  belongs_to :flaggable, polymorphic: true
end

资源控制器

#edit page
def edit
  @district = District.find_by_abbreviation(params[:district_id])
  @resource = @district.resources.find(params[:id])   
  @flaggable = @resource
  @flags = @flaggable.flags.all 
end

视图

edit.html.erb - 资源编辑页面

###Renders all flags & allows a user to delete flags via Javascript.
<div id="flags">
  <%= render :partial => "flags/flag", :collection => @flags %>
</div>

###Resource Form
<div>
  <%= simple_form_for ([@district, @district_resource]) do |f| %>

    <div id="counter>

      ###How can I directly target the variable inside my alert message/data-confirm?
      <%= f.submit "Update Resource", data: { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." } %>

    </div>

  <% end %>
</div>

_flag.html.erb（部分）

<div id="<%= dom_id(flag) %>" class="flag">

    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">
        <%= link_to '&times;'.html_safe, [@flaggable, flag], method: :delete,  remote: true  %>
      </span>
    </button>

    <b>Flag Alert: </b> <%= flag.message %>

</div>

destroy.js.erb

###This works and removes flags
$('#flags #<%= dom_id(@flag) %>').remove();

###This doesn't update the actual data-confirm attribute message
newFlagCount = $('#flags .flag').size();
$("#counter input[data-confirm]").data("Reminder: You have #{@flaggable.flags.count} flag alerts remaining.");

Answer 1

好吧，$("#counter")正在选择<div id="counter"> div，.html()正在更改整个div内容。所以，你的代码完全按照你的要求去做。您应该定位在＆＃34;计数器内的submit按钮＆＃34; div并更改data-confirm属性的文字。

$("#counter input[data-confirm]").data("Reminder: You have #{@flaggable.flags.count} flag alerts remaining.");

请注意，如果您使用javascript更改标记数，则文本中的变量将是原始值（@flaggable.flags.count）。您需要在属性文本中对数字进行正则表达式并使用javascript进行更改。

Answer 2

将您的JSON放入变量中，然后将其分配给元素属性：

var data = { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." }
$("#counter input").attr("data-confirm",data.confirm);

Answer 3

结合以下答案解决问题。感谢大家。

newFlagCount = $('#flags .flag').length;
var data = { confirm: "Reminder: You have " + newFlagCount + " flag alerts remaining." }
$("#counter input[data-confirm]").data('confirm', data.confirm)

如何使用Jquery更新data-confirmation属性中的消息？

3 个答案: