I'm using MultipleSelect as it is a good option for the inconvenient handling of multiple options in a normal select. Due to optical reasons i'm using it also for normal single selects.
The problem is now, that it's converting a select into a list of radio buttons. In my case i have an option in a select, that must be enabled by a separate checkbox. When i address it to the normal select, the option is enabled, but not the radio in the list. But these options also don't have an id, so that I could change the radio directly.
This is the code that is generated for the select. The second option is disabled and should be enabled.
<div class="ms-parent multiple-select" title="" style="width: 300px;">
<button type="button" class="ms-choice">
<div class="icon-caret open"></div>
</button>
<div class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class=" hide-radio ">
<label class="">
<input type="radio" value="" data-key="option_0" data-name="selectItemstatus">
<span>status red</span>
</label>
</li>
<li class=" hide-radio ">
<label class="disabled">
<input type="radio" value="105" data-key="option_1" data-name="selectItemstatus" disabled="disabled">
<span>status green</span>
</label>
</li>
</ul>
</div>
In the documentation i only found how to enable/disable a complete select, but not a single option. Anybody have an idea how to enable the radio button?
Just disable the option on the original select element - and then use the refresh method.
Details on usage can be found here,
http://multiple-select.wenzhixin.net.cn/examples#refresh.html
http://multiple-select.wenzhixin.net.cn/docs/en/methods#refresh
Related
Currently I am trying to scrape some information off the web, but I kinda ran into a dead end.
So in order to get the data I want, I need to select the right currency off of a list. I click the link to change the currency and via java script the site gets another chunk of html that contains the list and opens an overlay, where I can select the right currency.
I tried to locate the div in which the list is stored:
driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]")
I tried the list itself but I wasnt able to locate the element.
Then I wanted to see if something is found and using the following:
len(driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]"))
the answer 0 was provided, so my webdriver wasnt able to locate the newly added chunk of html.
This is the newly added html:
<div class="module">
<div class="modal_mask" style="opacity: 0.5;"/>
<div class="modal_scroller">
<div class="modal_container" style="margin-top: 164.5px;">
<div class="modal_ship" style="margin: 0px auto;">
<div class="modal_title">
Address Currency
<i onclick="modal_remove();">×</i>
</div>
<div class="modal_ship_con">
<h3>Please select your shipping destination & currency</h3>
<p>Price may differ based on your Shipping destination.</p>
<form action="#" method="get">
<input value="81" name="country_sel" type="hidden"/>
<input value="USD" name="currency_sel" type="hidden"/>
<div class="currency">
<b>Currency:</b>
<div class="currency_list">
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
<div class="currency_box" style="display: none;">
<ul>
<li sel="USD">
USD
<u>US$</u>
</li>
<li sel="EUR">
EUR
<u>€</u>
</li>
<li sel="GBP">
GBP
<u>£</u>
</li>
<li sel="AUD">
AUD
<u>AU$</u>
</li>
<li sel="CAD">
CAD
<u>CA$</u>
</li>
</ul>
</div>
</div>
</div>
<div class="submit">
<input onclick="saveShip(0);" value="Save" type="button"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
And this where I have to click:
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
So now my question: is there any possibility to get to the newly added html code? Is there something like "refresh webdriver"?
Regards
I think you can simply use time.sleep() before trying to capture the button you want to click.
Just use this:
import time
time.sleep(2) #you can keep this behind the code for clicking the button
This will make selenium wait for sometime so that the code can load and then only selenium will click it
you can keep any no. of seconds instead of 2,I just kept it for an example
Iam trying to get value of toggle but its not working when first unchecked toggle button hit after checked it works fine.
<ul class="list has-header">
<li class="item item-toggle" ng-repeat="ingr in ingredients|filter:searching">
{{ingr.INGREDIENTNAME}}
<label class="toggle toggle-energized" >
<input type="checkbox" ng-model="ingr.INGREDIENTSTATUS" ng-change='changeingrStatus(ingr.INGREDIENTCODE,ingr.INGREDIENTSTATUS)' ng-checked="{{ingr.INGREDIENTSTATUS==1?true:false}}">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
Controller.js
$scope.changeingrStatus = function(code, status) {
console.log(status);
}
You cannot use ng-model attribute along with ng-checked. I would suggest to use ng-model only.
Read ngChecked page for details:
Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.
I'm trying to put a radio button on each of my list elements as you can see here.
<ul class="list-group">
<li class="list-group-item" ng-repeat="player in vm.players">
{{player.name}}
<span class="pull-right">
<input type="radio" name="gender"value="player.name">
</span>
</li>
</ul>
I hope basically to show a list of player's name and you can select some with a radio button, but they don't seem to allow you to click them.
Thanks,
As #Dimodi suggests, if you want text to be associated with a clickable form input like a checkbox or radio button, you must associate them using a <label>. For example, either of:
<label><input...> some text</label>
<input id="foo"...> <label for="foo">some text</label>
Just bind label for attribute with radio's id.
Or
Simply placed radio inside particular label.
<ul class="list-group">
<li class="list-group-item" ng-repeat="player in vm.players">
<label> {{player.name}}
<input type="radio" name="gender"value="player.name">
</label>
<label for="plys"> {{player.name}} </label>
<input type="radio" id="plys" name="gender"value="player.name">
</li>
</ul>
I have dynamically generated tree html code like below:
<div class="treeDiv">
<ul id="tree" class="ztree">
(...)
<li id="tree_115" class="level2" treenode="">
<button id="tree_115_switch" class="level2 switch bottom_open" treenode_switch="" title="" type="button"></button>
<button id="tree_115_check" class="chk checkbox_false_full" onfocus="this.blur();" treenode_check="" type="button"></button>
<a id="tree_115_a" class="level2" title="myItem" style="" target="_blank" onclick="" treenode_a="">
<button id="tree_115_ico" class="ico_open" treenode_ico="" title="" type="button" style="background:url(./images/icon.png) 0 0 no-repeat;"></button>
<span id="tree_115_span">
myItem
</span>
</a>
<ul id="tree_115_ul" class="level2" style="display:block"></ul>
</li>
</ul>
</div>
And i have to automate setting true various checkboxes (in this case tree_115_check) and after that and after clicking OK button on this page and some operations, i have to check whether icon.png changed to OK.png. I have to reffer to object by its name, because before executing test i will know myItem name, but i won't know which element of the tree it will be. Do you know how to do that using RobotFramework or JavaScript? It will be simple, if i will know ID of all checkboxes, icons, etc, but how to do that when it is various and I know just, that i have to find "myItem" element of tree, its checkbox and status icon?
Thank You in advance for your support.
I am using Bootstrap3 in my MVC5 application.
When I use #HtmlHelper.DropDownFor to show a drop down list, bootstrap styles are not getting applied for the combo box in Internet Explorer.
So as a workaround, I wrote a custom code to show a drop down list.
<div class="col-md-6 dropdown">
<button class="col-md-6 form-control input-sm dropdown-toggle" data-val="true" role="button" id="SystemSize" name="dropdown1" data-toggle="dropdown" value="llll">
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdown1">
#foreach (var item in items)
{
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">#item.Text</a></li>
}
</ul>
</div>
I referred the following bootstrap link to come up with this approach.
I wrote Jquery to update the text of the button on click of the anchor links in the drop down.
The problem is when I submit the form, this button's text is not getting posted.
How do I solve this?
Normally we use Selects instead of drop-down inside forms. Check following link;
http://getbootstrap.com/css/#forms-controls
Example:
<select class="form-control">
#foreach(var item in items)
{
<option value="#(item.Value)" >#item.Text</option>
}
</select>
If you want to use the Drop-down, then you can use hidden field as follow to store the value and set the value within the function you wrote to update the text.
<input type="hidden" id="SystemSize" name="SystemSize" value="">
Thanks!