Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Another option would be to use a recursive function:</p> <pre><code>// Accepts an element and a function function childRecursive(element, func){ // Applies that function to the given element. func(element); var children = element.children(); if (children.length &gt; 0) { children.each(function (){ // Applies that function to all children recursively childRecursive($(this), func); }); } } </code></pre> <p>Then you can make a function or three for setting the attributes and values of your yet-to-be-cloned form fields:</p> <pre><code>// Expects format to be xxx-#[-xxxx] (e.g. item-1 or item-1-name) function getNewAttr(str, newNum){ // Split on - var arr = str.split('-'); // Change the 1 to wherever the incremented value is in your id arr[1] = newNum; // Smash it back together and return return arr.join('-'); } // Written with Twitter Bootstrap form field structure in mind // Checks for id, name, and for attributes. function setCloneAttr(element, value){ // Check to see if the element has an id attribute if (element.attr('id') !== undefined){ // If so, increment it element.attr('id', getNewAttr(element.attr('id'),value)); } else { /*If for some reason you want to handle an else, here you go*/ } // Do the same with name... if(element.attr('name') !== undefined){ element.attr('name', getNewAttr(element.attr('name'),value)); } else {} // And don't forget to show some love to your labels. if (element.attr('for') !== undefined){ element.attr('for', getNewAttr(element.attr('for'),value)); } else {} } // Sets an element's value to '' function clearCloneValues(element){ if (element.attr('value') !== undefined){ element.val(''); } } </code></pre> <p>Then add some markup:</p> <pre><code>&lt;div id="items"&gt; &lt;input type="hidden" id="itemCounter" name="itemCounter" value="0"&gt; &lt;div class="item"&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="item-0-name"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" name="item-0-name" id="item-0-name" class="input-large"&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- .control-group--&gt; &lt;div class="control-group"&gt; &lt;label for="item-0-description" class="control-label"&gt;Item Description&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" name="item-0-description" id="item-0-description" class="input-large"&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- .control-group--&gt; &lt;/div&gt;&lt;!-- .item --&gt; &lt;/div&gt;&lt;!-- #items --&gt; &lt;input type="button" value="Add Item" id="addItem"&gt; </code></pre> <p>And then all you need is some jQuery goodness to pull it all together:</p> <pre><code>$(document).ready(function(){ $('#addItem').click(function(){ //increment the value of our counter $('#itemCounter').val(Number($('#allergyCounter').val()) + 1); //clone the first .item element var newItem = $('div.item').first().clone(); //recursively set our id, name, and for attributes properly childRecursive(newItem, // Remember, the recursive function expects to be able to pass in // one parameter, the element. function(e){ setCloneAttr(e, $('#itemCounter').val()); }); // Clear the values recursively childRecursive(newItem, function(e){ clearCloneValues(e); } ); // Finally, add the new div.item to the end newItem.appendTo($('#items')); }); }); </code></pre> <p>Obviously, you don't necessarily need to use recursion to get everything if you know going in exactly what things you need to clone and change. However, these functions allow you to reuse them for any size of nested structure with as many fields as you want so long as they're all named with the right pattern.</p> <p>There's a working jsFiddle <a href="http://jsfiddle.net/XpAk5/" rel="nofollow">here</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. POjquery clone form fields and increment id
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCraig Burton
    1. USCraig Burton
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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