Question

我在jquery / rails中渲染元素时遇到问题。

我想做这样的事情：

当用户单击“ +”按钮时，应在默认字段下方显示另一个包含选定成分的字段（因为饮料中可能含有很多成分，我不想指定数量）。 / p>

我不知道为什么，所以我不得不寻求帮助。

视图/饮料/new.html.erb

<%= form_for @drink do |f| %>

  <div class="form-group">
    <%= f.label :name %><br />
    <%= f.text_field :name, class:'form-control' %><br />
  </div>

  <div class="form-group">
    <%= f.label :category %><br />
    <%= f.select :category_id, Category.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'}, class:'form-control' %><br /><br />
  </div>

  <div class="form-group", id: "add-ingredients">
    <%= f.label :ingredient %><br />
    <%= f.select :ingredient_id, Ingredient.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select Few'}, class:'form-control' %><%= f.button "+", class:'btn btn-primary', id: 'btn-ingredients' %><br />
  </div>

  <div class="form-group">
    <%= f.label :preparation %><br />
    <%= f.text_area :preparation, class:'form-control'%><br />
  </div>

  <%= f.submit "Submit", class:'btn btn-primary' %>
  <%= link_to "Cancel", drinks_path, class:'btn btn-default' %>

<% end %>

application.js

$(document).ready(function(){
  $('#btn-ingredients').click(function(){
    $('#add-ingredients').append('<%= render("form-group") %>');
  });
});

我尝试了很多次，这确实很容易，但是我是新手，没有其他想法。

Answer 1

嗯，您可以通过某些方式做到这一点，我只是想说直接多次操作DOM是一种反模式。如今，您拥有诸如React / Redux或ClojureScript之类的框架，它们可以处理全局状态，并在更改全局状态“成分”时自动重新渲染DOM。

也许不是现在，但要记住这一点。在“单页应用程序”中处理状态很棘手。

Answer 2

<!DOCTYPE html> <html> <head> <style> div.a { text-align: center; font-family: verdana; height: 200px; width: 400px; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; } div.b { text-align: center; font-family: verdana; position: fixed; bottom: 30px; width: 100% } </style> <meta charset="utf-8" , charset="ISO-8859-1" /> <meta http-equiv="refresh" , content="3" ; url="https://www.utad.pt/" /> <title>Redirecionando para Utad.pt</title> </head> <body> <div id="Redirecionando" , class="a"> <strong>Aguarde, redirecionando-o para Utad...</strong> <br> <br> <img src="http://moodle.utad.pt/theme/evolved/layout/includes/hmmm1/img/logo-big.png" ; align="center" ; width="135px" ; height="120px" /> </div> <div id="manual" class="b"> Caso a página não carregue: <a href="https://utad.pt/">Utad.pt</a> </div> </body> </html>是一个静态文件，例如，未经ERB处理器预处理。它直接进入用户的浏览器，并在客户端执行此代码：

application.js

产生JS错误。

要使其正常工作，您需要将$('#add-ingredients').append('<%= render("form-group") %>');的调用“解包”为HTML代码。例如：

render("form-group")

还请注意，append实际上是将新创建的元素附加到元素的末尾，而不是之后。因此，在该调用之后，会将新的“ form-group”元素添加到“＃add-ingredients”内容的末尾，这可能是不希望的，因为它也具有“ form-group”类。

如何在jquery / rails中渲染新字段？

2 个答案: