StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is what I would do (coming from a server-side development background, as I know developers love easy solutions)</p> <ol> <li>Wrap the table with a single form</li> <li>on Edit row (clicking row) open an ajax request that returns pure html that looks like the exact tr, only with whatever extra you want to include:</li> </ol> <hr> <pre><code><tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr> <tr><td colspan="2">And hey, here is more, and the save button ... </td></tr> </code></pre> <hr> <ol> <li><p>in jQuery replace tr with content retrieved <code>(myTr.replace($(ajaxResponse)))</code> or something similar</p></li> <li><p>now Save button is a regular submit for the form</p></li> <li><p>if you want to submit via ajax, once done, return the old html in your ajax response and replace the two trs with the old tr (you just need to hook it by giving new trs an attribute that you can find easily in jquery)</p></li> <li><p>don't forget to switch off a global key to prevent double editing, users can edit one row at a time </p></li> </ol> <hr> <p><strong>Update: adding a second solution to dump load on client instead of server</strong></p> <p>To avoid overloading the server (though I wouldn't be worried about it until it becomes a regular habit), you can make your form fields as a template inside your HTML and use string replacement (or jQuery Templates), so instead of ajaxing to get response in step 2, you call the template, and replace the strings with attributes you save in every row... like this:</p> <pre><code><div id="myTemplate"> // or you can use jQuery script templates <tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr> <tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr> </div> </code></pre> <p>in every row in your code add sufficient attributes or ids to know what you want to replace with, like this:</p> <pre><code><tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc </code></pre> <p>so now in your replacement script:</p> <pre><code>$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name")) .replace("${Id}",$(thisrow).attr("data-itemid")); </code></pre> <p>etc...</p> <p>Of course after submission it has to be a to server, but in case user "cancels" you can have another readonly template</p> <p>By the way, that is the way I usually go with, I use jQuery templates, and create edit and view templates, but I also repeat edit forms and I use jQuery ajax submit manually... but that... my friend, is not a simple clean and maintainable solution I'm afraid</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