<div id="ab100">
<iframe width="1000" height="600" src="...">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<form id="form1" action=".." method="post">
<select id="abl03" style="..">..\',\'\')', 0)" name="l03ue">
<option value="0" selected="selected"><Select a Value></option>
<option value="1">AB</option>
<option value="2">AD</option>
<option value="3">BC</option>
<option value="4">CA</option>
</select>
</div>
When I want to click on DDL, I normally do this:
browser.select_list(:id => 'ab103').select('CA')
and it will select the option value = "4". But I am getting this error:
Watir::Exception::UnknownObjectException: unable to locate element, using {:id=>
"abl03", :tag_name=>"select"}
from C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.2/lib/watir
-webdriver/elements/element.rb:490:in `assert_exists'
Maybe this problem is due to its in a iframe.
Thanks in advance.
A few things:
There is no opening <select> tag in your example. I'm assuming <div id="abl03"> should be <select id="abl03"> or that it's simply missing.
The id for <select id="abl03"> is abl03, but id locator value in select_list(:id => 'ab103') is ab103.
<Select a Value> in <option value="0" selected="selected"><Select a Value></option> should be <Select a Value>.
So, the unable to locate elementerror is valid because a <select> tag with the specified id does not exist.
If you run into issues with frames, check out http://watirwebdriver.com/frames/ and https://github.com/watir/watirspec/blob/master/frame_spec.rb for examples.
I seen a similar question like this on stackoverflow. Sorry for posting it again. Thanks.
browser.frame(:index => 0).select_list(:id => ab103).select(/CA/)
any other suggestions are welcome too. Thanks.
Related
I have a drop down like following,
<select id="role" class="form-control" th:field="*{role}" >
<option th:field="*{role}" value="USER">USER</option>
<option selected th:field="*{role}" value="ADMIN" >ADMIN</option>
<option th:field="*{role}" value="SUPERUSER">SUPERUSER</option>
</select>
I want default option as ADMIN. For that i added selected inside option tag. but default option still pointing to USER. Can anyone help me o solve this. Thanks
Set the value of "role" to "ADMIN" in your controller (in the java), before the page is rendered.
Also, you don't need all those extra th:field attributes. th:field should only appear on the select.
<select id="role" class="form-control" th:field="*{role}" >
<option value="USER">USER</option>
<option value="ADMIN" >ADMIN</option>
<option value="SUPERUSER">SUPERUSER</option>
</select>
I did something like following to get it working.
<script th:inline="javascript">
/*<![CDATA[*/
window.addEventListener("DOMContentLoaded", function() {
var optionSelected = [[${product.role}]];
if(optionSelected == null){
$("#role").val("ADMIN");
}
});
/*]]>*/
</script>
and removed the selected attribute from the option.
There is a very beautiful solution in spring to populate up a select list from EL variable such as:
<form:select id="customerentity_customerTitle" path="customerTitle" cssStyle="width:300px;">
<form:option value="None" label="*** Select Your Title ***"></form:option>
<form:options items="${fn:split(title_t, ',')}" />
</form:select>
This JSTL and spring solution can be applied easily and very affection.
When I tried to find a similar solution in Dojo. I found most close solution is dijit/form/FilteringSelect, but when I try to use similar way to populate a dynamic generated dropdown select, it doesn't work.
<select id="customerentity_customerTitle" name="customerTitle" style="width: 300px;" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="value: '${customerentity.customerTitle}',placeHolder: 'Select Your Title',options:'${fn:split(title_t, ',')}'">
</select>
My question is: Is there any possible to use similar way to do it in digit/form/FilteringSelect? or I have to do it by using javascript to populate it?
Any advice is welcome!!
Edit
title was hold in a property file and access by using:
<fmt:setBundle basename="bundles.customer-resources" />
resources bundle.
The sources looks like:
storageway.customer.person.title.options=Mr.,Ms.,Mrs.,Dr.,Other
access by:
<fmt:message key="storageway.customer.person.title.options" var="title_t" scope="session" />
It is a simple string array instead of a key:value map. Spring form can handle it properly but dijit/form/FilteringSelect not.
You can create normal option tags inside the dijit/form/FilteringSelect.
They will be rendered. So I bet you can do
<select id="customerentity_customerTitle" name="customerTitle" style="width: 300px;" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="value: '${customerentity.customerTitle}',placeHolder: 'Select Your Title'">
<form:options items="${fn:split(title_t, ',')}" />
</select>
See the snippet:
require(["dojo/parser", "dojo/domReady!"], function(parser){
parser.parse();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<div class="tundra">
<select id="customerentity_customerTitle" name="customerTitle" style="width: 300px;" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="value: 'b',placeHolder: 'Select Your Title'">
<option value="a">value A</option>
<option value="b">value B</option>
<option value="c">value C</option>
</select>
</div>
When i am clicking on my dropdown list, all the values are coming fine in all the older versions of IE but not in IE10. After I am selecting a particular value, next time when i am clicking on my dropdown, the values before the selected values are displayed above the dropdown area.
Example, if I have 4 values in my dropdown, after selecting 3rd value from the dropdown, next time when I am clicking on it to change the value, list dropdown is opening vertically upwards from 3rd otion, instead of downwards.
I tried to add meta tags as well.
I know that this is the default behaviour of IE 10 but want to know how to override it to make it look as in older versions of IE. Checked in other forums, no proper solution is given.
Please help. Here's the sample code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
</head>
<body>
<p id="demo"> Please enter your name </p>
Name: <input type="text" id="fname"> <br>
<label>Cars:</label>
<select id= "cars">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
I have read a lot of solutions to image problem but none of them are working for me and I can't figure out where I'm going wrong. I've an ASP.Net MVC 4 project I'm working on and all I wanted to do is add an image to one of the views. In this same view is already an image that displays perfectly fine.
Here is some of the code for non-working image:
#Scripts.Render("~/Scripts/Page/QueryForm.js")
<img id="searchPic" src="#Url.Content("~/Images/NereusSearchLogo-small.jpg")" alt="Pic"/>
<input list="RecentQueries" name="q" value="#(Model.SearchResults == null ? string.Empty : Model.SearchResults.Query)" autocomplete="off"/>
<datalist id="RecentQueries">
#{
foreach (var query in Model.RecentQueries)
{
<option value="#query.Text">#query.LastUsed.ToLocalTime()</option>
}
}
</datalist>
<button type="button" id="search">Search</button>
<button type="button" class="hasTooltip" id="new-project-search" title="Start a new search project">New Project Search</button>
Here is the code for the working image:
<span id="search-period-dd" data-dropdown="#search-period-menu" data-horizontal-offset="-8">
<img src="#Url.Content("~/Images/arrow_down-grey-16.png")" class="hasTooltip" title="Filter search results based on date" />
<span id="search-period">#(Model.StartDate == null? Model.SearchPeriodOption.GetAttribute<DisplayAttribute>().Name : "Since " + Model.StartDate.Value.ToLocalTime().ToString("d"))</span>
Here is the html generated:
<img id="searchPic" src="/Images/NereusSearchLogo-small.jpg" alt="Pic"/>
<input list="RecentQueries" name="q" value="" autocomplete="off"/>
<datalist id="RecentQueries">
<option value="Mice">8/7/2013 3:57:38 PM</option>
<option value="Deer">8/7/2013 1:12:49 PM</option>
<option value="Pigs">8/7/2013 12:22:29 PM</option>
<option value="Cats">8/7/2013 9:23:59 AM</option>
<option value="Dogs">8/7/2013 9:23:56 AM</option>
<option value="Birds">8/7/2013 9:23:48 AM</option>
</datalist>
<button type="button" id="search">Search</button>
<button type="button" class="hasTooltip" id="new-project-search" title="Start a new search project">New Project Search</button>
<link href="/Content/Common/ThirdParty/jquery.dropdown.css" rel="stylesheet"/>
<link href="/Content/Page/SearchPeriodDropdown.css" rel="stylesheet"/>
<script src="/Scripts/Common/ThirdParty/jquery.dropdown.js"></script>
<script src="/Scripts/Page/SearchPeriodDropdown.js"></script>
<span id="search-period-dd" data-dropdown="#search-period-menu" data-horizontal-offset="-8">
<img src="/Images/arrow_down-grey-16.png" class="hasTooltip" title="Filter search results based on date" />
<span id="search-period">Any time</span>
</span>
The image is physically in the correct directory, and has been added to the project under the Images folder.
When I inspect the element with Chrome there is no warning/error.
Any help would be greatly appreciated as I am at my whit's end as to why this keeps showing a broken image icon.
Edit Update:
I've confirmed that both images are in the same file location. Both have been added to the project under the same folder. When hovered over in Visual Studio (2012) both images show up. Both have the same full path value (minus their names of course) under the Properties tab when selected in Visual Studio (2012). However, if I swap their names within the code the problem image still doesn't show up and the good one does. I just don't know why at this point. Thanks for all your help.
Danrhul was correct. It was the company's filter. I just changed the file type to png and all is working.
Sorry guys, I should have posted the script directly without cleaning it. Please check the updated script, it should now clear things up. Thanks!
Consider the following JavaScript :
var selected = 0;
var options = 0;
$('.newListSelected').each(function() {
selected = $(this).children('.selectedTxt');
selected = selected.text();
/* Everything before this line works completely fine */
options = $(this).prev();
options.find('option[value=' +selected+ ']').attr('selected', 'selected');
}).remove();
And HTML :
<select name="type[]" style="display: none;">
<optgroup>
<option value="none">Select</option>
</optgroup>
<optgroup label="First Group">
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
<optgroup label="Second Group">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</optgroup>
</select>
<div class="newListSelected">
<div class="selectedTxt">20</div>
<ul class="newList">
<!-- Other stuff here -->
</ul>
</div>
What I'm trying to do actually is adding the selected attribute to the corresponding select option that has the same value as the text in .selectedTxt. In the code above, it should add selected="selected" to <option value="20">Twenty</option>.
However its not performing as expected, I also tried adding alert(option); below prev(); but it didn't output anything useful.
Thanks.
The Javascript works fine, as can be seen here: http://jsfiddle.net/4HsXp/
If you need to be able to select multiple items in a select element, you need to set the multiple and size attribute, like this:
<select multiple="multiple" size="2">
<option>1</option>
<option>2</option>
</select>
See: http://reference.sitepoint.com/html/select
Edit:
Attaching console.log statements to the new code still does not any problem. Running it on jsfiddle gave me the correct output:
jQuery(select)
Original Value: none
New Value: 20
I'm not sure what you are trying to do, but why couldn't you just select all option elements with proper selectors? If you want to select only some options, then you have to add extra selector attrbiutes.
$('select option').each(function() {
$(this).attr('selected', 'selected');
});