Databases
StackOverflow2013
Postsdbo
PODynamic Table Rows + Chained Select
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic Table Rows + Chained Select
    primarykey
    data
    text
    <p>I need the ability to dynamically add and remove an indefinite number of table rows. I also need the ability to chain select boxes within those table rows. I get the expected result (which is wrong), but I'm not a Javascript buff and I have no idea what I'm doing.</p> <p>I'm using the <a href="http://www.appelsiini.net/projects/chained" rel="nofollow">chained.js script from Mika Tuupola</a> and the "dynamic table" script found pretty much anywhere.</p> <pre><code>&lt;table id="table"&gt; &lt;tr&gt;&lt;td&gt;&lt;input id="dept" name="dept[]" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="service" name="service[]" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="reason" name="reason[]" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script language="javascript"&gt; $("#service").chained("#dept"); $("#reason").chained("#dept"); function addRow(table) { var row = $('#table tbody&gt;tr:last').clone(false); row.insertAfter('#table tbody&gt;tr:last'); } function delRow(el) { while (el.parentNode &amp;&amp; el.tagName.toLowerCase() != 'tr') { el = el.parentNode; } if (el.parentNode &amp;&amp; el.parentNode.rows.length &gt; 2) { el.parentNode.removeChild(el); } } &lt;/script&gt; </code></pre> <p>Hopefully that's enough to get the point across.</p> <p>The obvious happens, since the chained select is based on ID. Once you make selections in the first drop down, the "child" drop downs are chained to that first one.</p> <p>My suspicion is that I need to somehow modify the ID for each of those select boxes and then increment the IDs in the chaining assignments. But I also suspect that there's probably an easier way to do it or that it's going to require some kind of delegation, since I might need to destroy and reassign the chain after adding the table row...?</p> <p>I have no idea. Any pointer in the right direction would be greatly appreciated.</p> <h2>UPDATE</h2> <p>I made a fiddle. It only works in Chrome. Some combinations of frameworks/extensions work and partially work in other browsers. But the only one I could make the example work in was Chrome. Sorry, I don't have a lot of practice with JSFiddle.</p> <p><a href="http://jsfiddle.net/J2Vef/11/" rel="nofollow">http://jsfiddle.net/J2Vef/11/</a></p> <p>Note what happens if you select an option from the first dropdown, then add a row. All options in the second drop down for added rows will be the options for the first dropdown in the first row.</p> <p>If you add a row and then start trying to select options, no matter what you put in the first drop down, the second drop down never becomes active.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJoe
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODynamic Table Rows + Chained Select
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODynamic Table Rows + Chained Select
      1. USJoe
      1. VTFavorite
    1. COHere is a post that is on this subject that may help --- [chaining select using jquery.chained.min.js does not work](http://stackoverflow.com/questions/20533087/chaining-select-using-jquery-chained-min-js-does-not-work)
      singulars
      1. PODynamic Table Rows + Chained Select
      1. USBob Tate
    2. COThe chained select works fine by itself. When I start adding rows is when I start running into issues. Added a fiddle to demonstrate the issue. I apologize for the haphazard construction of the fiddle. Also if you change clone(false) to clone(true) in the Javascript, the options from the first drop down change the options for the second dropdown in the first row only, no matter how many rows you add, as long as you've selected something in the first row first. I think this thoroughly demonstrates my lack of understanding about Javascript.
      singulars
      1. PODynamic Table Rows + Chained Select
      1. USJoe
 

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