如何使用<ul>在form_for标记中

How to use <ul> in a form_for tag?

本文关键字：for form gt 何使用 lt ul      更新时间：2023-09-26

我正试图在rails应用程序中使用Tagit Jquery插件（更具体地说，是链接页面上的最后一个演示），但似乎不知道如何在form_for中使用该元素来使其工作。

在纯html中，这是有效的：

<script>
  $(function() {
    $('#demo5').tagit({maxLength: 140, maxTags: 3});
  });
</script>
<div class="box">
  <ul id="demo5"></ul>
</div>

并生成这个，我用Firebug提取：

<div class="box">
  <ul id="demo5" class="tagit">
    <li class="tagit-new">
        <input class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
    </li>
        <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none;"></ul>
  </ul>
</div>

我试着实现它如下：

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" %>
<%= javascript_include_tag "tagit" %>
<script>
  $(function() {
    $('#demo5').tagit({maxLength: 140, maxTags: 3});
  });
</script>
<div class="box">
  <%= form_for @thingy do |f| %>
    Add some tags
    <%= f.label :tag_list, "Your tags" %>
      <ul id="demo5" class="tagit">
        <li>
          <%= f.text_field :tag_list, :value => @thingy.tags_from(current_user) %>
        </li>
      </ul>
    <p><%= f.submit "Change" %></p>
    <%= f.error_messages %>
  <% end %>
</div>

继而生成：

<div class="box">
  <form id="edit_thingy_5" class="edit_thingy" method="post" action="/thingy/5" accept-charset="UTF-8">
    <div style="margin:0;padding:0;display:inline">
      <input type="hidden" value="✓" name="utf8">
      <input type="hidden" value="put" name="_method">
      <input type="hidden" value="abcdefghijklmno=" name="authenticity_token">
    </div>
    Add some tags
    <p>
      <label for="thingy_tag_list">Your tags</label>
    </p>
    <ul id="demo5">
      <input id="thingy_tag_list" type="text" value="tag1, tag2, tag3" size="30" name="thingy[tag_list]">
    </ul>
    <p></p>
    <p>
      <input id="thingy_submit" type="submit" value="Change" name="commit">
    </p>
  </form>
</div>

所有JavaScript文件都已正确加载，并且没有样式表冲突。

试试这样的方法。

重要的是要知道，tagit插件提供的输入框不是供你在Rails表单中使用的。让它成为jquery插件的内部隐藏细节。

假设

@thingy.tags_from(current_user)

返回一个数组，您只需要使用该列表种子到tagit中，当表单提交时，从tagit中读取值并存储在将提交给服务器的隐藏字段中。

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" %>
<%= javascript_include_tag "tagit" %>
<script>
  $(function() {
    $('#demo5').tagit({maxLength: 140, maxTags: 3, initialTags: $("#mytaglist").val()});
    $("form#myform").submit(function(e){
      $("#mytaglist").val($('#demo5').tagit("tags").map(function(e){return e.value;}).get().join());
      return true; // to continue form submission
    });
  });
</script>
<div class="box">
  Add Some Tags
  <ul id="demo5" class="tagit"></ul>
  <%= form_for @thingy, :id => "myform" do |f| %>
    <%= f.hidden_field :tag_list, :value => @thingy.tags_from(current_user).join(), :id => "mytaglist" %>
    <p><%= f.submit "Change" %></p>
    <%= f.error_messages %>
  <% end %>
</div>

那里有一些糟糕的HTML。

  1. 你不能把UL放在P里面（你会注意到浏览器通过把ul从段落元素中抛出来纠正这一点）
  2. UL中没有任何LI元素。列表项（LIs）是唯一可以直接位于列表（UL或OL）元素内部的元素。因此，要将输入放入列表元素，它们需要位于该列表中的列表项中

不过，大多数情况下，TagIt似乎相当专注于构建HTML本身，所以我不知道你是否可以构建/复制所有生成的HTML，然后使用TagIt——它不希望它全部存在。

试试这个（它基本上将您现有的标签放入data-属性中，并在列表中使用tagit时提取它们：

<%= form_for @thingy do |f| %>
  <%= f.label :tag_list, "Your tags" %>
  <ul id="demo5" name="thingy[tag_list]" data-tags="<%= @thingy.tags_from(current_user) %>"></ul>
  <p><%= f.submit "Change" %></p>
  <%= f.error_messages %>
<% end %>
<script>
  $(function() {
    var tags = $("#demo5").data("tags").split(/'s+/)
    $('#demo5').tagit({
      maxLength: 140,
      maxTags: 3,
      initialTags: tags,
      select: true
    });
  });
</script>

您可能还想将"添加一些标签"文本放在语义适当的元素

中
相关文章：