时间戳

首页 > 解决方案 > jQuery令牌输入不显示数据标签rails

jquery - jQuery令牌输入不显示数据标签rails

问题描述

我正在尝试jQuery token-input在我的 rails 应用程序中使用 gem。除了数据加载部分外，我已经按预期工作了。当我创建一个planwith multiplematerials并保存它时，它会按预期创建记录。

当我回去编辑该计划时，没有显示任何材料。但是，正如我从下面看到的源代码中看到的那样，数据正在浏览器中预加载。

<input data-tokeninput="{&quot;collection&quot;:[{&quot;id&quot;:2,&quot;title&quot;:&quot;test&quot;,&quot;goal&quot;:&quot;test&quot;,&quot;material_type&quot;:&quot;test&quot;,&quot;sharing&quot;:false,&quot;description&quot;:&quot;test&quot;,&quot;unit_id&quot;:null,&quot;created_at&quot;:&quot;2018-04-24T21:40:58.000Z&quot;,&quot;updated_at&quot;:&quot;2018-04-24T21:40:58.000Z&quot;,&quot;grade_id&quot;:6,&quot;user_id&quot;:1,&quot;subject_id&quot;:6,&quot;attachment_file_name&quot;:null,&quot;attachment_content_type&quot;:null,&quot;attachment_file_size&quot;:null,&quot;attachment_updated_at&quot;:null}]}" type="text" name="plan[material_tokens]" id="plan_material_tokens" style="display: none;">

有谁知道为什么这不在现场显示数据？

计划.咖啡

jQuery ->
  $('#plan_material_tokens').tokenInput('/materials.json', { propertyToSearch: 'title' });
  prePopulate: $('#plan_material_tokens').data('load')

_form.html.erb

<%= form_for @plan do |form| %>
  <div class="form-group">
    <%= form.label :name %>
    <%= form.text_field :name, class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= form.label :material_tokens, "Materials" %>
    <%= form.text_field :material_tokens, data: { load: @plan.materials }%>
  </div>

  <%= form.submit %>
<% end %>

材料控制器（从中提取 json 数据）

def index
  @materials = current_user.materials

  respond_to do |format|
    format.html
    format.json { render json: @materials.where("title LIKE ?", "%#{params[:q]}%") }
  end
end

标签： jqueryruby-on-rails

解决方案

对于其他有此问题的人来说，这是帮助我的解决方案。与其调用数据加载器load，不如将其更改pre为如下所示。

_form.html.erb

<div class="form-group">
  <%= form.label :material_tokens, "Materials" %>
  <%= form.text_field :material_tokens, data: { pre: @plan.materials.to_json }%>
</div>

计划.咖啡

jQuery ->
  $('#plan_material_tokens').tokenInput('/materials.json', { propertyToSearch: 'title' })
  zindex: 6000
  allowCustomEntry: false
  preventDuplicates: true
  prePopulate: $("#plan_material_tokens").data('pre')

我将进一步研究为什么会这样，并将在这个答案中跟进。

推荐阅读