Hi there,
I'm triying to do a complex form in Ruby On Rails. It should be divided in groups, and each group should have text fields. I want groups and text fields to be added and removed dinamically.
I already managed to get Text Fields added and removed dinamically, but I am totally unable to do the same with the groups.
This is the call to the function:
<%= link_to_function 'Add group' do |page|
page.insert_html :bottom, :groups, :partial => 'group'
end %>
So, it should add the partial named "group" to the "groups" div, right? well, it doesn't. This is the partial:
<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>
If I click on the "Add new group" link, Firebug tell me there is an error like some javascript code isnt valid (the error is "missing } after property list"). But, If I remove the fourth line in the partial code (the one with the "add_text_link" function) it works perfect! and that function works perfect.
So, any idea?
Thanks for your help!
EDIT: This is the generated source code:
<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("groups", { bottom: "<p></p>\n<div id=\"group\" class='elements'>\n\t<p>\n\t\t<g_title>Text Group</g_title>\n\t\t<add><a href=\"#\" onclick=\"try {\nElement.insert("group", { bottom: "\\n<div class='text'>\\n\\t<p>\\n\\t\\tText <input id=\\"content\\" name=\\"content\\" size=\\"50\\" type=\\"text\\" /> Importance <select id=\\"t1\\" name=\\"t1\\"><option value=\\"notes\\">Notes</option>\\n<option value=\\"highlighted\\">Highlighted text</option>\\n<option value=\\"normal\\">Normal text</option></select>\\n\\t\\t<remove><a href=\\"#\\" onclick=\\"this.up('.text').remove(); return false;\\">Remove text field</a></remove>\\n\\t</p>\\n</div>" });\nnew Effect.Highlight("group",{duration:0.3, startcolor:'#34d85e'});\n} catch (e) { alert('RJS error:\\n\\n' + e.toString()); alert('Element.insert(\\"group\\", { bottom: \\"\\\\n<div class=\\'text\\'>\\\\n\\\\t<p>\\\\n\\\\t\\\\tText <input id=\\\\\\"content\\\\\\" name=\\\\\\"content\\\\\\" size=\\\\\\"50\\\\\\" type=\\\\\\"text\\\\\\" /> Importance <select id=\\\\\\"t1\\\\\\" name=\\\\\\"t1\\\\\\"><option value=\\\\\\"notes\\\\\\">Notes</option>\\\\n<option value=\\\\\\"highlighted\\\\\\">Highlighted text</option>\\\\n<option value=\\\\\\"normal\\\\\\">Normal text</option></select>\\\\n\\\\t\\\\t<remove><a href=\\\\\\"#\\\\\\" onclick=\\\\\\"this.up(\\'.text\\').remove(); return false;\\\\\\">Remove text field</a></remove>\\\\n\\\\t</p>\\\\n</div>\\" });\\nnew Effect.Highlight(\\"group\\",{duration:0.3, startcolor:\\'#34d85e\\'});'); throw e }; return false;\">Add a text field</a></add>\n\t\t<remove><a href=\"#\" onclick=\"this.up('.elements').remove(); return false;\">Remove text group</a></remove>\n\t</p>\n\t\n\t\n<div class='text'>\n\t<p>\n\t\tText <input id=\"content\" name=\"content\" size=\"50\" type=\"text\" /> Importance <select id=\"t1\" name=\"t1\"><option value=\"notes\">Notes</option>\n<option value=\"highlighted\">Highlighted text</option>\n<option value=\"normal\">Normal text</option></select>\n\t\t<remove><a href=\"#\" onclick=\"this.up('.text').remove(); return false;\">Remove text field</a></remove>\n\t</p>\n</div>\n</div>" });
new Effect.Highlight("group",{duration:0.3, startcolor:'#34d85e'});
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.insert(\"groups\", { bottom: \"<p></p>\\n<div id=\\\"group\\\" class=\'elements\'>\\n\\t<p>\\n\\t\\t<g_title>Text Group</g_title>\\n\\t\\t<add><a href=\\\"#\\\" onclick=\\\"try {\\nElement.insert("group", { bottom: "\\\\n<div class=\'text\'>\\\\n\\\\t<p>\\\\n\\\\t\\\\tText <input id=\\\\"content\\\\" name=\\\\"content\\\\" size=\\\\"50\\\\" type=\\\\"text\\\\" /> Importance <select id=\\\\"t1\\\\" name=\\\\"t1\\\\"><option value=\\\\"notes\\\\">Notes</option>\\\\n<option value=\\\\"highlighted\\\\">Highlighted text</option>\\\\n<option value=\\\\"normal\\\\">Normal text</option></select>\\\\n\\\\t\\\\t<remove><a href=\\\\"#\\\\" onclick=\\\\"this.up(\'.text\').remove(); return false;\\\\">Remove text field</a></remove>\\\\n\\\\t</p>\\\\n</div>" });\\nnew Effect.Highlight("group",{duration:0.3, startcolor:\'#34d85e\'});\\n} catch (e) { alert(\'RJS error:\\\\n\\\\n\' + e.toString()); alert(\'Element.insert(\\\\"group\\\\", { bottom: \\\\"\\\\\\\\n<div class=\\\\\'text\\\\\'>\\\\\\\\n\\\\\\\\t<p>\\\\\\\\n\\\\\\\\t\\\\\\\\tText <input id=\\\\\\\\\\\\"content\\\\\\\\\\\\" name=\\\\\\\\\\\\"content\\\\\\\\\\\\" size=\\\\\\\\\\\\"50\\\\\\\\\\\\" type=\\\\\\\\\\\\"text\\\\\\\\\\\\" /> Importance <select id=\\\\\\\\\\\\"t1\\\\\\\\\\\\" name=\\\\\\\\\\\\"t1\\\\\\\\\\\\"><option value=\\\\\\\\\\\\"notes\\\\\\\\\\\\">Notes</option>\\\\\\\\n<option value=\\\\\\\\\\\\"highlighted\\\\\\\\\\\\">Highlighted text</option>\\\\\\\\n<option value=\\\\\\\\\\\\"normal\\\\\\\\\\\\">Normal text</option></select>\\\\\\\\n\\\\\\\\t\\\\\\\\t<remove><a href=\\\\\\\\\\\\"#\\\\\\\\\\\\" onclick=\\\\\\\\\\\\"this.up(\\\\\'.text\\\\\').remove(); return false;\\\\\\\\\\\\">Remove text field</a></remove>\\\\\\\\n\\\\\\\\t</p>\\\\\\\\n</div>\\\\" });\\\\nnew Effect.Highlight(\\\\"group\\\\",{duration:0.3, startcolor:\\\\\'#34d85e\\\\\'});\'); throw e }; return false;\\\">Add a text field</a></add>\\n\\t\\t<remove><a href=\\\"#\\\" onclick=\\\"this.up(\'.elements\').remove(); return false;\\\">Remove text group</a></remove>\\n\\t</p>\\n\\t\\n\\t\\n<div class=\'text\'>\\n\\t<p>\\n\\t\\tText <input id=\\\"content\\\" name=\\\"content\\\" size=\\\"50\\\" type=\\\"text\\\" /> Importance <select id=\\\"t1\\\" name=\\\"t1\\\"><option value=\\\"notes\\\">Notes</option>\\n<option value=\\\"highlighted\\\">Highlighted text</option>\\n<option value=\\\"normal\\\">Normal text</option></select>\\n\\t\\t<remove><a href=\\\"#\\\" onclick=\\\"this.up(\'.text\').remove(); return false;\\\">Remove text field</a></remove>\\n\\t</p>\\n</div>\\n</div>\" });\nnew Effect.Highlight(\"group\",{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("group", { bottom: "\n<div class='text'>\n\t<p>\n\t\tText <input id=\"content\" name=\"content\" size=\"50\" type=\"text\" /> Importance <select id=\"t1\" name=\"t1\"><option value=\"notes\">Notes</option>\n<option value=\"highlighted\">Highlighted text</option>\n<option value=\"normal\">Normal text</option></select>\n\t\t<remove><a href=\"#\" onclick=\"this.up('.text').remove(); return false;\">Remove text field</a></remove>\n\t</p>\n</div>" });
new Effect.Highlight("group",{duration:0.3, startcolor:'#34d85e'});
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.insert(\"group\", { bottom: \"\\n<div class=\'text\'>\\n\\t<p>\\n\\t\\tText <input id=\\\"content\\\" name=\\\"content\\\" size=\\\"50\\\" type=\\\"text\\\" /> Importance <select id=\\\"t1\\\" name=\\\"t1\\\"><option value=\\\"notes\\\">Notes</option>\\n<option value=\\\"highlighted\\\">Highlighted text</option>\\n<option value=\\\"normal\\\">Normal text</option></select>\\n\\t\\t<remove><a href=\\\"#\\\" onclick=\\\"this.up(\'.text\').remove(); return false;\\\">Remove text field</a></remove>\\n\\t</p>\\n</div>\" });\nnew Effect.Highlight(\"group\",{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>