page.insert_html fügt html mit link_to_function (rails) nicht ein

Question

Ich bin triying, um eine komplexe Form in Ruby On Rails zu machen. Es sollte in Gruppen unterteilt werden, und jede Gruppe sollte Textfelder haben. Ich möchte, dass Gruppen und Textfelder dynamisch hinzugefügt und entfernt werden.

Ich habe es bereits geschafft, Textfelder hinzuzufügen und zu entfernen, aber ich bin völlig unfähig dasselbe mit den Gruppen zu machen.

Dies ist der Aufruf der Funktion:

<%= link_to_function 'Add group' do |page| 
page.insert_html :bottom, :groups, :partial => 'group' 
end %> 

So soll es die teilweise den Namen „Gruppe“ zu den „Gruppen“ div direkt hinzufügen? naja, tut es nicht. Dies ist das Teil:

<div id="group" class='elements'> 
    <p> 
     <g_title>Text Group</g_title> 
     <add><%= add_text_link 'Add a text field'%></add> 
     <remove><%= link_to_function 'Remove text group', "this.up('.elements').remove()" %></remove> 
    </p> 

    <%= render :partial => 'text' %> 
</div> 

Wenn ich auf der „Neuen Gruppe“ Link klicken, Firebug mir sagen, es ist ein Fehler, wie einige Javascript-Code ist nicht gültig (der Fehler „missing} nach Eigenschaftsliste“). Aber, wenn ich die vierte Zeile im Teilcode entferne (die mit der Funktion "add_text_link"), funktioniert es perfekt! und diese Funktion funktioniert perfekt.

Also, irgendeine Idee?

Danke für Ihre Hilfe!

EDIT: Dies ist die generierten Quellcode:

<form action="/collect/text" method="post"><div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="b2zqh1op9oHbjQ33mMAWEhZcEqHoYhUIMV0uPH8F2ms=" /></div> 
<div id= 'main_elements' class='elements'> 
    <p><g_title>Main elements</g_title></p> 

    <p><input id="Title" name="Title" size="50" type="text" /> 
     <label class="h0" for="Title">Title</label> <options>(mandatory)</options></p> 
    <p><input id="Subtitle" name="Subtitle" size="50" type="text" /> 
    <label class="h0" for="Subtitle">Subtitle</label> <options>(optional)</options></p> 

</div> 

<div id='groups' class="groups"> 
    <p><add><a href="#" onclick="try { 
Element.insert(&quot;groups&quot;, { bottom: &quot;&lt;p&gt;&lt;/p&gt;\n&lt;div id=\&quot;group\&quot; class='elements'&gt;\n\t&lt;p&gt;\n\t\t&lt;g_title&gt;Text Group&lt;/g_title&gt;\n\t\t&lt;add&gt;&lt;a href=\&quot;#\&quot; onclick=\&quot;try {\nElement.insert(&quot;group&quot;, { bottom: &quot;\\n&lt;div class='text'&gt;\\n\\t&lt;p&gt;\\n\\t\\tText &lt;input id=\\&quot;content\\&quot; name=\\&quot;content\\&quot; size=\\&quot;50\\&quot; type=\\&quot;text\\&quot; /&gt; Importance &lt;select id=\\&quot;t1\\&quot; name=\\&quot;t1\\&quot;&gt;&lt;option value=\\&quot;notes\\&quot;&gt;Notes&lt;/option&gt;\\n&lt;option value=\\&quot;highlighted\\&quot;&gt;Highlighted text&lt;/option&gt;\\n&lt;option value=\\&quot;normal\\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\\n\\t\\t&lt;remove&gt;&lt;a href=\\&quot;#\\&quot; onclick=\\&quot;this.up('.text').remove(); return false;\\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\\n\\t&lt;/p&gt;\\n&lt;/div&gt;&quot; });\nnew Effect.Highlight(&quot;group&quot;,{duration:0.3, startcolor:'#34d85e'});\n} catch (e) { alert('RJS error:\\n\\n' + e.toString()); alert('Element.insert(\\&quot;group\\&quot;, { bottom: \\&quot;\\\\n&lt;div class=\\'text\\'&gt;\\\\n\\\\t&lt;p&gt;\\\\n\\\\t\\\\tText &lt;input id=\\\\\\&quot;content\\\\\\&quot; name=\\\\\\&quot;content\\\\\\&quot; size=\\\\\\&quot;50\\\\\\&quot; type=\\\\\\&quot;text\\\\\\&quot; /&gt; Importance &lt;select id=\\\\\\&quot;t1\\\\\\&quot; name=\\\\\\&quot;t1\\\\\\&quot;&gt;&lt;option value=\\\\\\&quot;notes\\\\\\&quot;&gt;Notes&lt;/option&gt;\\\\n&lt;option value=\\\\\\&quot;highlighted\\\\\\&quot;&gt;Highlighted text&lt;/option&gt;\\\\n&lt;option value=\\\\\\&quot;normal\\\\\\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\\\\n\\\\t\\\\t&lt;remove&gt;&lt;a href=\\\\\\&quot;#\\\\\\&quot; onclick=\\\\\\&quot;this.up(\\'.text\\').remove(); return false;\\\\\\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\\\\n\\\\t&lt;/p&gt;\\\\n&lt;/div&gt;\\&quot; });\\nnew Effect.Highlight(\\&quot;group\\&quot;,{duration:0.3, startcolor:\\'#34d85e\\'});'); throw e }; return false;\&quot;&gt;Add a text field&lt;/a&gt;&lt;/add&gt;\n\t\t&lt;remove&gt;&lt;a href=\&quot;#\&quot; onclick=\&quot;this.up('.elements').remove(); return false;\&quot;&gt;Remove text group&lt;/a&gt;&lt;/remove&gt;\n\t&lt;/p&gt;\n\t\n\t\n&lt;div class='text'&gt;\n\t&lt;p&gt;\n\t\tText &lt;input id=\&quot;content\&quot; name=\&quot;content\&quot; size=\&quot;50\&quot; type=\&quot;text\&quot; /&gt; Importance &lt;select id=\&quot;t1\&quot; name=\&quot;t1\&quot;&gt;&lt;option value=\&quot;notes\&quot;&gt;Notes&lt;/option&gt;\n&lt;option value=\&quot;highlighted\&quot;&gt;Highlighted text&lt;/option&gt;\n&lt;option value=\&quot;normal\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\n\t\t&lt;remove&gt;&lt;a href=\&quot;#\&quot; onclick=\&quot;this.up('.text').remove(); return false;\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\n\t&lt;/p&gt;\n&lt;/div&gt;\n&lt;/div&gt;&quot; }); 
new Effect.Highlight(&quot;group&quot;,{duration:0.3, startcolor:'#34d85e'}); 
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.insert(\&quot;groups\&quot;, { bottom: \&quot;&lt;p&gt;&lt;/p&gt;\\n&lt;div id=\\\&quot;group\\\&quot; class=\'elements\'&gt;\\n\\t&lt;p&gt;\\n\\t\\t&lt;g_title&gt;Text Group&lt;/g_title&gt;\\n\\t\\t&lt;add&gt;&lt;a href=\\\&quot;#\\\&quot; onclick=\\\&quot;try {\\nElement.insert(&quot;group&quot;, { bottom: &quot;\\\\n&lt;div class=\'text\'&gt;\\\\n\\\\t&lt;p&gt;\\\\n\\\\t\\\\tText &lt;input id=\\\\&quot;content\\\\&quot; name=\\\\&quot;content\\\\&quot; size=\\\\&quot;50\\\\&quot; type=\\\\&quot;text\\\\&quot; /&gt; Importance &lt;select id=\\\\&quot;t1\\\\&quot; name=\\\\&quot;t1\\\\&quot;&gt;&lt;option value=\\\\&quot;notes\\\\&quot;&gt;Notes&lt;/option&gt;\\\\n&lt;option value=\\\\&quot;highlighted\\\\&quot;&gt;Highlighted text&lt;/option&gt;\\\\n&lt;option value=\\\\&quot;normal\\\\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\\\\n\\\\t\\\\t&lt;remove&gt;&lt;a href=\\\\&quot;#\\\\&quot; onclick=\\\\&quot;this.up(\'.text\').remove(); return false;\\\\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\\\\n\\\\t&lt;/p&gt;\\\\n&lt;/div&gt;&quot; });\\nnew Effect.Highlight(&quot;group&quot;,{duration:0.3, startcolor:\'#34d85e\'});\\n} catch (e) { alert(\'RJS error:\\\\n\\\\n\' + e.toString()); alert(\'Element.insert(\\\\&quot;group\\\\&quot;, { bottom: \\\\&quot;\\\\\\\\n&lt;div class=\\\\\'text\\\\\'&gt;\\\\\\\\n\\\\\\\\t&lt;p&gt;\\\\\\\\n\\\\\\\\t\\\\\\\\tText &lt;input id=\\\\\\\\\\\\&quot;content\\\\\\\\\\\\&quot; name=\\\\\\\\\\\\&quot;content\\\\\\\\\\\\&quot; size=\\\\\\\\\\\\&quot;50\\\\\\\\\\\\&quot; type=\\\\\\\\\\\\&quot;text\\\\\\\\\\\\&quot; /&gt; Importance &lt;select id=\\\\\\\\\\\\&quot;t1\\\\\\\\\\\\&quot; name=\\\\\\\\\\\\&quot;t1\\\\\\\\\\\\&quot;&gt;&lt;option value=\\\\\\\\\\\\&quot;notes\\\\\\\\\\\\&quot;&gt;Notes&lt;/option&gt;\\\\\\\\n&lt;option value=\\\\\\\\\\\\&quot;highlighted\\\\\\\\\\\\&quot;&gt;Highlighted text&lt;/option&gt;\\\\\\\\n&lt;option value=\\\\\\\\\\\\&quot;normal\\\\\\\\\\\\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\\\\\\\\n\\\\\\\\t\\\\\\\\t&lt;remove&gt;&lt;a href=\\\\\\\\\\\\&quot;#\\\\\\\\\\\\&quot; onclick=\\\\\\\\\\\\&quot;this.up(\\\\\'.text\\\\\').remove(); return false;\\\\\\\\\\\\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\\\\\\\\n\\\\\\\\t&lt;/p&gt;\\\\\\\\n&lt;/div&gt;\\\\&quot; });\\\\nnew Effect.Highlight(\\\\&quot;group\\\\&quot;,{duration:0.3, startcolor:\\\\\'#34d85e\\\\\'});\'); throw e }; return false;\\\&quot;&gt;Add a text field&lt;/a&gt;&lt;/add&gt;\\n\\t\\t&lt;remove&gt;&lt;a href=\\\&quot;#\\\&quot; onclick=\\\&quot;this.up(\'.elements\').remove(); return false;\\\&quot;&gt;Remove text group&lt;/a&gt;&lt;/remove&gt;\\n\\t&lt;/p&gt;\\n\\t\\n\\t\\n&lt;div class=\'text\'&gt;\\n\\t&lt;p&gt;\\n\\t\\tText &lt;input id=\\\&quot;content\\\&quot; name=\\\&quot;content\\\&quot; size=\\\&quot;50\\\&quot; type=\\\&quot;text\\\&quot; /&gt; Importance &lt;select id=\\\&quot;t1\\\&quot; name=\\\&quot;t1\\\&quot;&gt;&lt;option value=\\\&quot;notes\\\&quot;&gt;Notes&lt;/option&gt;\\n&lt;option value=\\\&quot;highlighted\\\&quot;&gt;Highlighted text&lt;/option&gt;\\n&lt;option value=\\\&quot;normal\\\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\\n\\t\\t&lt;remove&gt;&lt;a href=\\\&quot;#\\\&quot; onclick=\\\&quot;this.up(\'.text\').remove(); return false;\\\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\\n\\t&lt;/p&gt;\\n&lt;/div&gt;\\n&lt;/div&gt;\&quot; });\nnew Effect.Highlight(\&quot;group\&quot;,{duration:0.3, startcolor:\'#34d85e\'});'); throw e }; return false;">Add new group</a></add></p> 

    <p></p> 
<div id="group" class='elements'> 
    <p> 
     <g_title>Text Group</g_title> 
     <add><a href="#" onclick="try { 
Element.insert(&quot;group&quot;, { bottom: &quot;\n&lt;div class='text'&gt;\n\t&lt;p&gt;\n\t\tText &lt;input id=\&quot;content\&quot; name=\&quot;content\&quot; size=\&quot;50\&quot; type=\&quot;text\&quot; /&gt; Importance &lt;select id=\&quot;t1\&quot; name=\&quot;t1\&quot;&gt;&lt;option value=\&quot;notes\&quot;&gt;Notes&lt;/option&gt;\n&lt;option value=\&quot;highlighted\&quot;&gt;Highlighted text&lt;/option&gt;\n&lt;option value=\&quot;normal\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\n\t\t&lt;remove&gt;&lt;a href=\&quot;#\&quot; onclick=\&quot;this.up('.text').remove(); return false;\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\n\t&lt;/p&gt;\n&lt;/div&gt;&quot; }); 
new Effect.Highlight(&quot;group&quot;,{duration:0.3, startcolor:'#34d85e'}); 
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.insert(\&quot;group\&quot;, { bottom: \&quot;\\n&lt;div class=\'text\'&gt;\\n\\t&lt;p&gt;\\n\\t\\tText &lt;input id=\\\&quot;content\\\&quot; name=\\\&quot;content\\\&quot; size=\\\&quot;50\\\&quot; type=\\\&quot;text\\\&quot; /&gt; Importance &lt;select id=\\\&quot;t1\\\&quot; name=\\\&quot;t1\\\&quot;&gt;&lt;option value=\\\&quot;notes\\\&quot;&gt;Notes&lt;/option&gt;\\n&lt;option value=\\\&quot;highlighted\\\&quot;&gt;Highlighted text&lt;/option&gt;\\n&lt;option value=\\\&quot;normal\\\&quot;&gt;Normal text&lt;/option&gt;&lt;/select&gt;\\n\\t\\t&lt;remove&gt;&lt;a href=\\\&quot;#\\\&quot; onclick=\\\&quot;this.up(\'.text\').remove(); return false;\\\&quot;&gt;Remove text field&lt;/a&gt;&lt;/remove&gt;\\n\\t&lt;/p&gt;\\n&lt;/div&gt;\&quot; });\nnew Effect.Highlight(\&quot;group\&quot;,{duration:0.3, startcolor:\'#34d85e\'});'); throw e }; return false;">Add a text field</a></add> 
     <remove><a href="#" onclick="this.up('.elements').remove(); return false;">Remove text group</a></remove> 
    </p> 



<div class='text'> 
    <p> 
     Text <input id="content" name="content" size="50" type="text" /> Importance <select id="t1" name="t1"><option value="notes">Notes</option> 
<option value="highlighted">Highlighted text</option> 
<option value="normal">Normal text</option></select> 
     <remove><a href="#" onclick="this.up('.text').remove(); return false;">Remove text field</a></remove> 

    </p> 
</div> 
</div> 

</div> 

<div class="button"> 
    <p><next><a href="#" onclick="$(this).up('form').submit(); return false;">Next Step</a></next></p> 
</div> 
</form> 

Answer 1

Du es falsch zu machen. Dies führt dazu, dass in einem HTML-Attribut ein entsicherter Teil in eine Zeichenfolge mit Escapezeichen eingefügt wird. Das ist einfach böse. Und es gibt Unmengen von Möglichkeiten, die es brechen kann.

Sie könnten einen einfacheren Ansatz in Betracht ziehen. Setzen Sie die render :partial über die link_to_function 'Add a group'. Machen Sie die div#group versteckt und dann den Link zu $('group').show().

Mit anderen Worten, machen Sie es ausgeblendet und zeigen Sie es dann mit JavaScript, anstatt es in das DOM einzufügen. Einfacher und weniger fehleranfällig.

Answer 2

Ich schaffte es, diese Arbeit zu machen. Meiner Meinung nach ist dies ein Fehler in Rails, weil er escape_once anstelle von html_escape verwendet. Mit anderen Worten, die erste link_to_function ist maskiert, aber die zweite nicht, nur weil die string bereits maskiert ist. Dies bewirkt, dass die umgekehrte Operation (De-Escaping oder was auch immer) nicht funktioniert. Sie könnten diesen Code zu einem Initialisierer hinzufügen, um immer zu entkommen:

module ActionView 
    module Helpers 
    module TagHelper 
     private 
     def tag_options(options, escape = true) 
      unless options.blank? 
      attrs = [] 
      if escape 
       options.each do |key, value| 
       next unless value 
       key = key.to_s 
       value = BOOLEAN_ATTRIBUTES.include?(key) ? key : ERB::Util::html_escape(value) 
       attrs << %(#{key}="#{value}") 
       end 
      else 
       attrs = options.map { |key, value| %(#{key}="#{value}") } 
      end 
      " #{attrs.sort * ' '}" unless attrs.empty? 
      end 
     end 
    end 
    end 
end 

Dieser Code könnte Dinge brechen, also verwenden Sie es vorsichtig. Allerdings habe ich gelesen, dass vielleicht escape_once in Rails 3.0 geändert wurde, also drückt euch die Daumen;)