如何使用Jquery更新数据确认属性中的消息

Question

我与Resources&我的rails应用程序中的标志。每个资源都可以由一个用户标记。

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

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

例如：

<%= 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内容。因此，您的代码正在执行您要求它执行的操作。您应该将submit按钮定位在"counter"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)