javascript - Change Dynamic field of Typeahead -
i'm programming form dynamic typeaheads fields, , have found problem when want show , select suggestions. have 2 first fields, input select , input typeahead. when option selected, it's load list of values in input typeahead. problem comes when create(dynamically) clone of pair of fields , want de list of values in correct typeahead. id of field (idtypeahead) when focus in field , use in typeahead. code:
//typeahead $('input.typeahead').focus(function(){ idtypeahead = parseint($(this).attr('id').replace('typeahead_','')); selectattr = $('select#selectattr_'+idtypeahead).find('option:selected').val(); if(selectattr=="null"){ selectattr=0; } }); $("input#typeahead_"+idtypeahead).on("typeahead:select").typeahead({ name:'input#typeahead_'+idtypeahead, displaykey: 'input#typeahead_'+idtypeahead, input: 'input#typeahead_'+idtypeahead, container:'input#typeahead_'+idtypeahead, display: $(this), suggestion: $(this), minlength : 1, sorter : this.query, source : function(query, process){ return $.ajax({ url:'/aplicaciones/jsonvalorattr?selectattr='+selectattr, datatype: 'json', type:'post', success: function(data){ states = []; map = {}; $.each(data, function (i, state) { map[state] = state; states.push(state); }); process(states); } }); } }); i have code in form (i use spring sts). have 2 buttons "+" , "-". when click "+", clone 2 fields , increase de id number of each element. when click "-", remove pair of fields. (example: selectattr_101 ->newclone: selectattr_102).
<div class="controls"> <form:select path="rolherramientaid" id="selectattr_101" cssclass="field-required lstatributos" csserrorclass="select-error"> <form:option value="null" selected=""><spring:message code="altaaplicacion.form.seleccionar" /> </form:option> <c:foreach var="selectatributos" items="${resultatributos}" varstatus="rowcount"> <form:option value="${selectatributos.atributosid}">${selectatributos.nombreatributo}</form:option> </c:foreach> </form:select> <form:errors path="rolherramientaid" class="help-block" /></div> </div> <div class="control-group required"> <label for="input01" class="control-label"><spring:message code="altaaplicacion.form.valor" /></label> <div class="controls"> <input id="typeahead_101" class="input-medium typeahead" type="text" data-provide="typeahead" autocomplete="on"> </div> how can change container of typeahead dynamically?
i've been searching solution problem , found post, small changes worked me.
i've stated fixed input field in form typeaheadid_1 , created function before create typeahead object manipulate typeahead index. on insert operation, increase counter , destroy typeahead object before each dynamic fields wrapping , recreate typeahead object (passing counter) after fields creation.
for edition (some dynamic fields created direct in form), i've created rest service return how many fields wrapped , start counting this.
it worked perfect me.
if didn´t solve or need help, please let me know!
Comments
Post a Comment