jquery - Dynamically adding fields on HTML Form -


i working on simple form where, user can input text , assign tags (optional) text, user can select multiple tags decided use select tag "multiple" attribute. works expected first row, move add new element dynamically multiple select box not behave 1st row.

  1. i using sumoselect / bootstrap-select jquery plugins make multi select box better
  2. with bootstrap-select manage add row , element on newly added row working independently of row above adds 2 of such multi select boxes.
  3. with sumoselect, newly added multi select box not responsive

its bit complicated explain, below code , screen shot

html code: 

     <div class="tab-pane fade active in" id="summary">        <br>        <a href="#">             <span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true"></span>        </a>        <br><br>        <div id="something_tbl">            <p>something <span class="user_info" style="padding-left: 5px; color:gray;">enter something...</span></p>            <p>                <ol>                     <li style="padding-bottom: 5px;" id="something_pt">                         <input type="text" style="width: 70%;" placeholder="enter something" id="something" name="something">                         <select name="something_tags" multiple size="5"                                 id="lbl_picker" class="selectpicker_1">                             <option value="1">fun</option>                             <option value="2">boring</option>                             <option value="3">hehe</option>                             <option value="4">lol</option>                             <option value="5">xyz</option>                         </select>                     </li>                </ol>            </p>        </div>

jquery/javascript:

$("#add_something").on('click', function() {   $('#something_tbl ol li#something_pt:first').clone().insertafter('#something_tbl ol li#something_pt:last');   $("#something_tbl ol li#something_pt:last #something").val('')   var elem = $('#something_tbl ol li#something_pt:last');   elem.append('<a href=\"#\"><span id=\"remove_summary\" title=\"remove\" class=\"glyphicon glyphicon-minus\" style=\"padding-left: 5px;\"></span></a>');   add_lbl_picker();   elem.children('a').click(remove_summary);   return false; });      var remove_summary = function() {     var tbl_length = $('#something_tbl ol li#summary_pt').length;     if (tbl_length > 1) {         $(this).parents('li').remove();     }     return false; };  var add_lbl_picker = function() {     var summary_tbl_length = $('#something_tbl ol li#something_point').length;     $('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);     $('.selectpicker_' + summary_tbl_length).sumoselect(); };  $('.selectpicker_1').sumoselect();

image:

multi select not working

as can see above, ever selected in first "multi select" copied rows , except 1st row other multi select not work!

note: there maximum 5 values in multi select not more , values statically loaded

i think there confusion in code correct utilisation of attributes "class" , "id". script, code below job :

<div class="tab-pane fade active in" id="summary">        <br>        <a href="#">             <span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true">lkjlkjk</span>        </a>        <br><br>        <div id="something_tbl">            <p>something <span class="user_info" style="padding-left: 5px; color:gray;">enter something...</span></p>            <p>                <ol>                     <li style="padding-bottom: 5px;" class="something_pt">                         <input type="text" style="width: 70%;" placeholder="enter something" class="something" name="something">                         <select name="something_tags" multiple size="5" class="lbl_picker selectpicker_1">                             <option value="1">fun</option>                             <option value="2">boring</option>                             <option value="3">hehe</option>                             <option value="4">lol</option>                             <option value="5">xyz</option>                         </select>                     </li>                </ol>            </p>        </div>     <script>     $("#add_something").on('click', function() {             something_pt_content.clone().insertafter('.something_pt:last');         $('.remove_summary:last').click(function(){             if ($('.something_pt').length > 1) {                 $(this).parents('li').remove();             }            })         $('.selectpicker_1').sumoselect();     });         var something_pt_content = $('.something_pt').clone().append('<a href=\"#\"><span title=\"remove\" class=\"remove_summary glyphicon glyphicon-minus\" style=\"padding-left: 5px;\">oijojoj</span></a>');     $('.selectpicker_1').sumoselect();       </script>

Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more