jquery - select not working after .clone -
i cloning block of html , appending div.
var part = $('#parts_tpl').clone(); $('#parts_tpl').after(part); the html contains form , reason, select boxes not updating there values in newly cloned html. if try update original select box value, works. doesn't work newly cloned form.
i have ensured newly created select boxes have unique id, name, etc. how i'm doing it:
// increment ids , names select tags $('#' + content.attr('id')).find('select').each(function() { var id = $(this).attr('id') + partid; var name = $(this).attr('name') + partid; if ($(this).attr('id')) { $(this).attr('id', id); } if ($(this).attr('name')) { $(this).attr('name', name); } }); this html looks like:
<div class="parts" id="parts_tpl"> <fieldset> <label>part specifications</label> <a href="#" class="btn removepartbtn" id="removepartbtn" style="float: right; display: none;">remove part</a> <section> <label for="quote_partspecification_description">description <span class="required"> </span></label> <div> <input type="text" id="quote_partspecification_description" name="quote_partspecification_description" required="" class="text"> </div> </section> <section> <label for="quote_partspecification_estimatedfirstyearvolume">estimated year 1 volume (mft) <span class="required"> </span></label> <div> <!-- <input type="text" id="quote_partspecification_estimatedfirstyearvolume" name="quote_partspecification_estimatedfirstyearvolume"> --> <input id="quote_partspecification_estimatedfirstyearvolume" name="quote_partspecification_estimatedfirstyearvolume" type="number" class="integer" required=""> </div> </section> <section> <label for="quote_partspecification_estimatedsecondyearvolume">estimated year 2 volume (mft) <span class="required"> </span></label> <div> <!-- <input type="text" id="quote_partspecification_estimatedsecondyearvolume" name="quote_partspecification_estimatedsecondyearvolume"> --> <input id="quote_partspecification_estimatedsecondyearvolume" name="quote_partspecification_estimatedsecondyearvolume" type="number" class="integer" required=""> </div> </section> <section> <label for="quote_partspecification_estimatedordervolume">estimated order volume (mft)</label> <div> <!-- <input type="text" id="quote_partspecification_estimatedordervolume" name="quote_partspecification_estimatedordervolume"> --> <input id="quote_partspecification_estimatedordervolume" name="quote_partspecification_estimatedordervolume" type="number" class="integer"> </div> </section> <section> <label for="quote_partspecification_parttype">part type <span class="required"> </span></label> <div> <div class="selector" id="uniform-quote_partspecification_parttype"> <span>frame</span> <select name="quote_partspecification_parttype" id="quote_partspecification_parttype" required="" style="opacity: 0;"> <optgroup label="select part type"> <option value="frame">frame</option> <option value="sash">sash</option> <option value="single wall accessory">single wall accessory</option> <option value="hollow accessory">hollow accessory</option> </optgroup> </select> </div> </div> </section> <section> <label for="quote_partspecification_weightperfoot">weight per ft</label> <div> <!-- <input type="text" id="quote_partspecification_estimatedordervolume" name="quote_partspecification_estimatedordervolume"> --> <input id="quote_partspecification_weightperfoot" name="quote_partspecification_weightperfoot" type="number" class="decimaltotenthousands g2"> </div> </section> <section> <label for="quote_partspecification_dienumber">die number (<em>if existing</em>)</label> <div> <input type="text" id="quote_partspecification_dienumber" name="quote_partspecification_dienumber" class="text"> </div> </section> <section> <label for="quote_partspecification_planttoproducepart">plant product part <span class="required"> </span></label> <div> <div class="selector" id="uniform-quote_partspecification_planttoproducepart"> <span>plant 1</span> <select name="quote_partspecification_planttoproducepart" id="quote_partspecification_planttoproducepart" required="" style="opacity: 0;"> <optgroup label="select plant"> <option value="plant 1">plant 1</option> <option value="plant 2">plant 2</option> <option value="plant 13">plant 13</option> <option value="plant 14">plant 14</option> <option value="bristol">bristol</option> <option value="to determined">to determined</option> </optgroup> </select> </div> </div> </section> <section> <label for="quote_partspecification_packaging">packaging</label> <div> <div class="selector" id="uniform-quote_partspecification_packaging"> <span>metal rack</span> <select name="quote_partspecification_packaging" id="quote_partspecification_packaging" style="opacity: 0;"> <optgroup label="select packaging"> <option value="metal rack">metal rack</option> <option value="wood rack">wood rack</option> <option value="paperboard">paperboard</option> <option value="polybag">polybag</option> <option value="other">other</option> <option value="customer supplied rack">customer supplied rack</option> </optgroup> </select> </div> </div> </section> <section> <label for="quote_partspecification_cutlength">cut length (in)</label> <div> <!-- <input type="text" id="quote_partspecification_cutlength" name="quote_partspecification_cutlength"> --> <input id="quote_partspecification_cutlength" name="quote_partspecification_cutlength" type="number" class="integer"> </div> </section> </fieldset> </div> does know whats going on?
things have tried:
ok turns out. using plugin called uniform. uniform not play selects being cloned. had fix it.
// fix uniform update on cloned elements $('select').change(function() { $.uniform.update('#' + $(this).attr('id')); }); reference(s):
Comments
Post a Comment