StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>disclaimer: i do not know if the following approach works when using grails. Let me know later.</p> <p>See <a href="https://stackoverflow.com/questions/890250/better-way-for-dynamic-forms-with-spring">better way for dynamic forms</a>. The author says:</p> <blockquote> <p>To add LineItems I have some js that calculates the new index and adds that to the DOM. When deleting a LineItem <strong>i have to renumber all the indexes</strong> and it is what i would like to avoid</p> </blockquote> <p>So what i do</p> <p>I have a variable which stores the next index</p> <pre><code>var nextIndex = 0; </code></pre> <p>When the page is loaded, i perform a JavaScript function which calculates how many child The collection has and configure nextIndex variable. You can use JQuery or YUI, feel free.</p> <p><strong>Adding a child statically</strong></p> <p>I create a variable which store the template (Notice <strong>{index}</strong>)</p> <pre><code>var child = "<div>" += "<div>" += "<label>Name</label>" += "<input type="text" name=\"childList[{index}].name\"/>" += "</div>" += "</div>" </code></pre> <p>When the user click on the <em>Add child</em> button, i replace <em>{index}</em> - by using regex - by the value stored in the nextIndex variable and increment by one. Then i add to the DOM</p> <p>See also <a href="http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/" rel="nofollow noreferrer">Add and Remove HTML elements dynamically with Javascript</a></p> <p><strong>Adding a child dinamically</strong></p> <p><a href="https://stackoverflow.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax/669982#669982">Here</a> you can see The Paolo Bergantino solution</p> <p><strong>By removing</strong></p> <p>But i think it is the issue grow up when deleting. No matter how many child you remove, does not touch on the nextIndex variable. See here</p> <pre><code>/** * var nextIndex = 3; */ <input type="text" name="childList[0].name"/> <input type="text" name="childList[1].name"/> // It will be removed <input type="text" name="childList[2].name"/> </code></pre> <p>Suppose i remove <em>childList<a href="https://stackoverflow.com/questions/890250/better-way-for-dynamic-forms-with-spring">1</a></em> What i do ??? Should i renumber all the indexes ???</p> <p>On the server side i use AutoPopulatingList. Because childList<a href="https://stackoverflow.com/questions/890250/better-way-for-dynamic-forms-with-spring">1</a> has been removed, AutoPopulatingList <em>handles it as null</em>. So on the initialization i do</p> <pre><code>List<Child> childList = new AutoPopulatingList(new ElementFactory() { public Object createElement(int index) throws ElementInstantiationException { /** * remove any null value added */ childList.removeAll(Collections.singletonList(null)); return new Child(); } }); </code></pre> <p>This way, my collection just contains two child (without any null value) and <em>i do not need to renumber all the indexes on the client side</em></p> <p>About adding/removing you can see this <a href="http://jsbin.com/ideha" rel="nofollow noreferrer">link</a> where i show a scenario wich can gives you some insight. </p> <p>See also <a href="http://grails.org/plugin/grails-ui" rel="nofollow noreferrer">Grails UI plugin</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload