We Keep Coding

Jquery appends dropdown data incorrectly

I have dropdown in my form which has a CSS style defined on pageload and is hidden and the code is like
<div class="col-md-6">
<div class="form-group">
<div id="City" hidden="" style="display: none;">
<label class="control-label" for="City">City</label>
<select name="City" id="City" class="selectboxit visible" style="display: none;"></select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
<span
id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
<ul id="CitySelectBoxItOptions"
class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
</span>
</div>
</div>
</div>
I am able to successfully append the options to this drop down, however they get inserted to a drop down without my CSS style as shown in the below image
After the data is added to drop down the HTML looks like
<div id="City" hidden="" style="display: block;">
<label class="control-label" for="City">City</label>
<select name="City" id="City" class="selectboxit visible" style="">
<option>--Select City--</option>
<option value="1">City 1</option>
<option value="3">City 11</option>
<option value="4">City 111</option>
</select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
<span
id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
<ul id="CitySelectBoxItOptions"
class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
</span>
</div>
and the JQuery code looks like and the targetdropdown value would be "City" here and the Id and values appropriately
$("div#City").toggle();
$('select[name="'+targetdropdown+'"]').empty();
jQuery('select[name="'+targetdropdown+'"]').
append('<option> --Select '+targetdropdown+'-- </option>');
$.each(res[0],function(index, element) {
var newOption = '<option
value="'+element.Id+'">'+element.Name+' </option>';
jQuery('select[name="'+targetdropdown+'"]').
append(newOption);
});
Can you please help me resolve the data being inserted to CSS styled drop down which is empty as you can see in the image

It seems you are using SelectBoxIt jQuery plugin for Custom styled dropdown list. When you done adding dynamic option to your div call .refresh() method.
Add below line at the end of your javascript code.
$('select[name="'+targetdropdown+'"]').data("selectBox-selectBoxIt").refresh();

Tricky Selector casperjs hidden div

i have a, in my opinion really tricky form. The form changes div's, hidden fields & id's on every reload. and i cant find a pattern how it changes.
here's an example for the class .box.box500:
<div class="box box500" style="float:left;display:none;">
<span class="errorText"></span>
<br>
<input id="czoyNToiaWhfYlNEaDg0ZGNkVi00bUxtckxLZ2cuLiI7" type="text" name="czoyNToiaWhfYlNEaDg0ZGNkVi00bUxtckxLZ2cuLiI7" value="">
</div>
<div id="boxFirma" style="display: none;margin-top: 20px;">
<div class="" style="float:left;left;margin-left:10px;display:none;">
<a name="personal"></a>
<div style="overflow:hidden; margin-top: 20px;">
<div class="box box500 " style="display:none;">
<input id="czoyNToiaWhfYlNEaDg0ZGNkUjh3d2tOOFJFd2cuLiI7" type="text" value="" name="czoyNToiaWhfYlNEaDg0ZGNkUjh3d2tOOFJFd2cuLiI7">
<br>
<span class="errorText"></span>
</div>
<div class="box box500 " style="float: left;">
<input id="czoyNToiaWhfYlNEaDg0ZGNlVFpMRjFVWjZicEEuLiI7" type="hidden" value="" name="czoyNToiaWhfYlNEaDg0ZGNlVFpMRjFVWjZicEEuLiI7">
<input id="czoyNToiaVhxemVtUGRZOHluMkNxdE9pWEd1Y1EuLiI7" type="text" value="" name="czoyNToiaVhxemVtUGRZOHluMkNxdE9pWEd1Y1EuLiI7">
<br>
<span class="errorText"></span>
</div>
<div class="box box502 " style="float: left;margin-left: 20px;">
<input id="czoxMzoiaXgtQTNQT3VWVmprLiI7" type="text" value="" name="czoxMzoiaXgtQTNQT3VWVmprLiI7">
<br>
<span class="errorText"></span>
</div>
</div>
sometimes the first hidden div is there, and sometimes not. the id changes on every reload. The hidden input is sometimes the first child, sometimes the second.also the div, sometimes on the frist positionen sometimes on the second. i've really no idea how to identify the input fields.
is it maybe possible to select a input filed like:
this.sendKeys('.box.box500:nth-child(2):style="float: left;" > input:nth-child(2):type="text"', 'text');

Could you not use the selector:
this.sendKeys('div.box.box500 input[type="text"]:not([style*="display: none"])', ...);
I believe this would find all of the specific inputs type="text" regardless of the order on the page.

this is working:
this.sendKeys('div.box.box500:not([style*="none"]) input[type="text"]', ...);

KendoDropDownList TabIndex not taking effect

I'm using the KendoDropDownList widget and in the markup, the select element has tabindex="600" set on it. But it isn't taking effect. I do see it in the final markup that's rendered to the client.
<span style="" title="" class="k-widget k-dropdown k-header form-control"
unselectable="on" role="listbox" aria-haspopup="true"
aria-expanded="false" tabindex="610"
aria-owns="PropertyAddress_State_listbox"
aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-dropdown-wrap k-state-default" unselectable="on">
<span class="k-input" unselectable="on">CA</span>
<span class="k-select" unselectable="on">
<span class="k-icon k-i-arrow-s" unselectable="on">select</span
</span>
</span>
<select name="PropertyAddress.State" id="PropertyAddress_State"
data-role="dropdownlist" class="form-control" style="display: none;">
<option value="AK">AK</option>
<option value="AL">AL</option>
.
.
</select>
</span>
But tabbing does not trigger a dropdown as a normal select element would. any idea how and if it can work?

In general, the Kendo UI DropDownList moves the tabindex from the original element to the visible focusable element ( in this case).
As to the issue, I could not replicate it:
http://screencast.com/t/I5lKNVbrnjN
Here is the demo:
http://dojo.telerik.com/uVAvA

jquery changing bootstrap label text dynamically

I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?

$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/

Add a search in html Select

I am using the DDSlick plugin in my website. Everything is fine, I just want to add a filter type of thing in which there is a textbox on top. On entering text it will filter the results.
My current list box:
<select name="test">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
After using DDSlick plugin it becomes:
<ul class="dd-options dd-click-off-close" style="width: 260px; display: block;">
<li>
<a class="dd-option dd-option-selected">
<input class="dd-option-value" type="hidden" value="-1">
<label class="dd-option-text">Please Select From List</label>
</a>
</li>
<li>
<a class="dd-option">
<input class="dd-option-value" type="hidden" value="26">
<img class="dd-option-image" src="http://localhost/fifa/admin/server/packs/files/large-gold-if%20%284%29.png">
<label class="dd-option-text">test</label>
<small class="dd-option-description dd-desc">test</small>
</a>
</li>
</ul>

I believe DDslick does not have the feature that you are looking for.
I would recommend you bootstrap-select plugin. Check it out here. Lookup for the example that is using data-live-search="true".