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

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

javascript - Function overwritting -

c# - Exception when attempting to modify Dictionary -