Databases
StackOverflow2013
Postsdbo
POReapplying uniform js to cloned selects
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReapplying uniform js to cloned selects
    primarykey
    data
    text
    <p>I'm cloning rows that contain two text inputs and a single select option. I'm using the <a href="http://uniformjs.com/" rel="nofollow noreferrer">Uniform</a> plugin to style the selects. However, after the row is cloned, uniform styling is applied but uniform/the select itself doesn't work. The focus remains on the original select and the values of the cloned selects doesn't change.</p> <p>You can see in this fiddle (<a href="https://stackoverflow.com/questions/7929184/jquery-cloning-a-block-of-element-select-element-acting-weired">associated with this thread</a>), the exact issue with the selects that are cloned: <a href="http://jsfiddle.net/broncha/WsFyV/34/" rel="nofollow noreferrer">http://jsfiddle.net/broncha/WsFyV/34/</a>. After they are cloned, the the values never change. The fix mentioned in that thread doesn't work, as can be seen in that fiddle.</p> <p>The script I'm cloning my rows with is this, tweaked from a <a href="https://stackoverflow.com/questions/16659898/conditional-jquery-format">previous quesiton</a>:</p> <pre><code>$('.add-row').on('click', function(event) { function incrementProp(index, prop) { return prop.replace(/(\d+)/, function(fullMatch, n) { return Number(n) + 1; }); } var cloneVar = $(this).parent().parent('.sortable'); var cloneRow = $(cloneVar).find('.sort-group .row:last'); var cloneIns; if (cloneVar.hasClass('before')) { cloneIns = $(cloneVar).find('.sort-group .row:first'); insert = 'insertBefore'; } else { cloneIns = $(cloneVar).find('.sort-group .row:last'); insert = 'insertAfter'; } cloneRow.clone(true)[insert](cloneIns) .addClass('add').removeClass('first') .find('input[type=text], textarea, select').val('').attr('name', incrementProp).end() .find('input, textarea, select, .selector').attr('id', incrementProp).end() .find('option:selected').removeAttr('selected').end() .find('.remove').removeClass('visible'); return false; }); </code></pre> <p>In the script there, the ID's and name are all incrementing up as expected for both the <code>.selector</code> class and select itself. So the select id's/name would look like <code>clone_test[0][thomas_the_train]</code>, <code>clone_test[1][thomas_the_train]</code>, and so on.</p> <p>I've tried these various methods for getting uniform reapplied to the cloned selects, but none of these work:</p> <p><em>added to the cloneRow chain:</em></p> <p><code>.find('select').uniform().end()</code></p> <p><em>after the cloneRow chain:</em></p> <p><code>$.uniform.update('select');</code></p> <p>or</p> <pre><code>$('.select-class').on('change', function() { $.uniform.update('select'); }); </code></pre> <p>Anyone have any ideas how to get uniform working on the cloned elements? Any help would be hugely appreciated!!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USRyan Palmer
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POReapplying uniform js to cloned selects
      1. USRyan Palmer
      1. VTBountyStart
    2. VO
      singulars
      1. POReapplying uniform js to cloned selects
      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