I'm using Bootstrap ComboBox plugin
and I'm rendering combobox inside mvc4 razor view
#Html.DropDownListFor(model => model.CarFormatId, Model.CarFormats, "Select", new { #id = "SelectCarFormat", #class = "combobox form-control" })
and I'm trying using jquery to fetch select change
$("#SelectCarFormat").on('change', function () {
alert('this is changed!');
});
But I'm getting silence, nothing inside user interface, nothing reported as error inside firebug console?
What I'm doing wrong here?
p.s. just to note here that jquery code is wrapped inside on dom ready
Edit:
Rendered html code is
<select id="SelectCarFormat" class="combobox form-control"
data-val-required="The SelectCarFormatId field is required."
data-val-number="The field SelectCarFormatId must be a number." data-val="true" display: none;>
<option value="">Select</option>
<option value="2">Format A</option>
<option value="3">Format B</option>
</select>
Then you have to use event delegation:
$(document.body).on('change', '#SelectCarFormat', function () {
alert('this is changed!');
});
seems it has been changed with the plugin you are using, so the element you are looking doesn't have any registered event.
Because of this plugin it gets changed into this:
<div class="combobox-container">
<input type="hidden" name="normal" value="">
<div class="input-group">
<input type="text" autocomplete="off" placeholder="Select a State" class="combobox input-large form-control">
<ul class="typeahead typeahead-long dropdown-menu" style="top: 34px; left: 0px; display: block;">
<li data-value="Alabama" class=""><strong></strong>A<strong></strong>l<strong></strong>a<strong></strong>b<strong></strong>a<strong></strong>m<strong></strong>a<strong></strong>
</li>
</ul> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span>
</div>
</div>
<select class="combobox input-large form-control" style="display: none;">
<option value="" selected="selected">Select a State</option>
<!-- other options -->
</select>
The above one is taken from here.
As you can see the element you are targeting is not there, actually it has been hidden. So you have to change your event binding to this element:
$(document.body).on('click', '.combobox-container li', function () {
alert('this is changed!');
});
Related
Html Code:
<select class="select2 ddl visible select2-hidden-accessible" data-allow-clear="true" id="Step1Model_CampaignAdditionalDataTypeId" multiple="" name="Step1Model.CampaignAdditionalDataTypeId" tabindex="-1" aria-hidden="true">
<option value="1">Optus AC Number</option>
<option value="2">Date Of Birth</option>
<option value="3">Pass Phrase</option>
<option value="4">Transaction Id</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--above" dir="ltr" style="width: 121.047px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>
</span></span>
<span class="dropdown-wrapper" aria-hidden="true">
</span></span>
I'm using following code(POM) in Selenium Webdriver(with java) to select:
public static By campAddDataType= By.id("Step1Model_CampaignAdditionalDataTypeId");
waitTime = new WebDriverWait(driver,20);
waitTime.until(ExpectedConditions.visibilityOf(driver.findElement(CommonOR.campAddDataType)));
String js = "arguments[0].hidden='false'";
((JavascriptExecutor) driver).executeScript(js,(driver.findElement(CommonOR.campAddDataType)));
CampAdd = new Select(driver.findElement(CommonOR.campAddDataType));
CampAdd.selectByVisibleText("Date Of Birth");
This drop-down list appears when user mark one option to true. So I believe that's why --> aria-hidden="true"
And for this option to make false, I ran java script executor but still the required element doesn't get selected from drop-down list.
Please suggest some solution.
Have you tried the below.
listItem = driver.findElement(By.xpath("//select[#id='Step1Model_CampaignAdditionalDataTypeId']/option[.='Date Of Birth']"))
((JavascriptExecutor) driver).executeScript("arguments[0].click();",listItem);
I trying to change the form input field by changing the dropdown value..
Right now I found the solution for only one dropdown select.. i.e., if I select one dropdown value, some requested input value is getting.. but not understand how to get different input values for each dropdown value.. Here I have given the code what I am using..
<script type="text/javascript">
$(function () {
$("#ddlPassport").change(function () {
if ($(this).val() == "airtel") {
$("#airtel").show();
} else {
$("#airtel").hide();
}
});
});
$(function () {
$("#ddlPassport").change(function () {
if ($(this).val() == "dishtv") {
$("#dishtv").show();
} else {
$("#dishtv").hide();
}
});
});
</script>
<select id="ddlPassport">
<option title="Airtel DTH" value="airtel" id="">Airtel DTH</option>
<option title="Reliance" value="reliance" id="">Big TV/Reliance Digital TV</option>
<option title="SUNTV" value="suntv">SUN TV</option>
<option title="Videocon" value="videocon">Videocon D2H</option>
<option title="DISHTV" value="dishtv">DISH TV</option>
<option title="Tata Sky" value="tatasky">TATA SKY</option>
</select>
<div class="form-group form-group-icon-left" id="airtel" style="display:none;">
<i class="fa fa-pencil input-icon input-icon-highlight"></i>
<label for="txtMobileNo"><span id="">Customer ID :</span></label>
<input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Customer ID">
</div>
<div class="form-group form-group-icon-left" id="dishtv" style="display:none;">
<i class="fa fa-pencil input-icon input-icon-highlight"></i>
<label for="txtMobileNo"><span id="">Mobile No. or Card No. :</span></label>
<input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Mobile No. or Card No.">
</div>
<div class="form-group form-group-icon-left" id="reliance-sun" style="display:none;">
<i class="fa fa-pencil input-icon input-icon-highlight"></i>
<label for="txtMobileNo"><span id="">Smart Card No :</span></label>
<input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Smart Card No.">
</div>
Looking at your code, I noticed a couple of problems.
Problem 1
$("#ddlPassport").change()
Your select tag doesn't have the id dllPassport, it is empty.
Problem 2
You have multiple HTML ID's on the page.
From XHTML 1.0 Spec
In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.
You are trying to show / hide the element with the id dishtv which applies to both
<option title="Reliance" value="reliance" id="dishtv">
and
<div class="form-group form-group-icon-left" id="dishtv" style="display:none;">
Problem 3
After addressing Problem 1 and Problem 2, your div will show with the ID of dishtv, however this div is nested inside a parent div with also has display:none so you will need to call .show() on this div also: #airtel
Edit
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlPassport").change(function () {
// Airtel
if ($(this).val() == "airtel") {
$("#airtel").show();
} else {
$("#airtel").hide();
}
//DishTV
if ($(this).val() == "dishtv") {
$("#dishtv").show();
} else {
$("#dishtv").hide();
}
});
});
</script>
<select id="ddlPassport">
<option title="Airtel DTH" value="airtel" id="">Airtel DTH</option>
<option title="Reliance" value="reliance" id="">Big TV/Reliance Digital TV</option>
<option title="SUNTV" value="suntv">SUN TV</option>
<option title="Videocon" value="videocon">Videocon D2H</option>
<option title="DISHTV" value="dishtv">DISH TV</option>
<option title="Tata Sky" value="tatasky">TATA SKY</option>
</select>
<div class="form-group form-group-icon-left" id="airtel" style="display:none;">
<i class="fa fa-pencil input-icon input-icon-highlight"></i>
<label for="txtMobileNo"><span id="">Customer ID :</span></label>
<input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Customer ID">
</div>
<div class="form-group form-group-icon-left" id="dishtv" style="display:none;">
<i class="fa fa-pencil input-icon input-icon-highlight"></i>
<label for="txtMobileNo"><span id="">Mobile No. or Card No. :</span></label>
<input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Mobile No. or Card No.">
</div>
<div class="form-group form-group-icon-left" id="reliance-sun" style="display:none;">
<i class="fa fa-pencil input-icon input-icon-highlight"></i>
<label for="txtMobileNo"><span id="">Smart Card No :</span></label>
<input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Smart Card No.">
</div>
Try this
$(document).ready(function() {
$(".form-group").hide(); // Hide all form divs on page load
$("#ddlPassport").change(function () {
var DTHname = $(this).val();
$("#" + DTHname).show(500);
});
});
In my HTML file 2 href
1st for add blank copy of div
2nd for add a new copy of the same div with values.
for each new copy or new blank should inserted below the selected div.
html code
<div class="item">
<div class="form-group">
<a href="#" id="addnl">
<span class="badge-a">+</span>
</a>
<!--add new blank line-->
<a href="#" id="addcp">
<span class="badge-b">++</span>
</a>
<!--add new line with same values above-->
<label for="qty">qty </label>
<input class='form-control' id='qty' name='qty' type='number' required>
<label for="selgroup">group </label>
<select class="form-control" id="selgroup">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="model">somthing </label>
<input class='form-control' id='somthing ' name='somthing ' type='number'required>
<label for="sellevel">somthing </label>
<select class="form-control" id="sellevel">
<option>1</option>
<option>2</option>
<label for="selctime">somthing </label>
<select class="form-control" id="selctime">
<option>1</option>
<option>2</option>
</select>
js code
var request = $('.item:first').append();
$('.badge-a').click(function() {
request.clone().insertAfter($('.item:last'));
$(window).trigger('resize');
});
My problems is :-
for copying values every thing gets copied but not the select options stays as defaults.
for locations all I have Just :first and add to :last, all other options suggested by the IDE not works like " :selected " even not supported by jquery.
href in the new inserted DIV not works too
Here is fiddle.
Thanks in advance.
Can anyone please let me know what is wrong with the following code:
HTML
<div class="form-wrapper">
<div class="form-repaet">
<div class="form-group">
<select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
<option selected="selected">Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2" name="book[0].is" style="width: 100%;">
<option selected="selected">is</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
<option selected="selected">Select a Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="btn-group m-r">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
<span class="dropdown-label"><i class="ion-gear-b"></i></span>
</button>
<ul class="dropdown-menu dropdown-select">
<li class="active">
All
</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="line line-dashed line-lg pull-in"></div>
</div>
JavaScript I am using following codes for javascript
$(document).ready(function(){
var counter = 1;
$("#add-form").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$(".form-repaet:last").clone().appendTo(".form-wrapper");
//$(".form-repaet:last").select2();
counter++;
});
$("#removebtn").click(function () {
if(counter==1){
return false;
}
$(".form-repaet").last().remove();
counter--;
});
});
It is creating a clone of 'form-repaet' div but the select box is not working. I've tried select2(); after clone, but it is not working. Any help would be appreciated. Thanks so much!
Here is a working jsFiddle
First of all, add another selector to select2 elements, not select2 because that is attached to the spans what selec2 created. This is why you get that error:
The select2('destroy') method was called on an element that is not using
In my case this is xxx
And use like this:
$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();
I did not care about remove.
NOTE
In HTML all ID-s should be unique, so care about it, when you clone.
This worked for me:
before code:
addRecord($(this).closest('.glacc-detail'));
after change code:
$('.select2bs4').select2('destroy'); //added this line
addRecord($(this).closest('.glacc-detail'));
$('.select2bs4').select2(); //added this line
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();