Been trying to fix this for a while now. I have loads of Dojo Filtering Select elements in my form. I need them to have a blank option which should be selected by default. Here is an example (of a normal <select> structure) that I want to emulate:
<select>
<option value="">-</option>
<option value="foo">Bar</option>
</select>
At present when I load up my filtering selects that have the options set as above, there is no element selected. This in turn disables form submission. This is totally unusable for my end users as they would have no idea why the form is not working. The selects are not even required fields.
The problem lies in the way the FilteringSelect stores it's data. It keeps them in a data store that requires an identifier and a label. You can't quite emulate the functionality of a plain select because of this.
You can 'get around' this by putting a fake item in your options with a value of 'XXXX' (or another fake value).
<select>
<option value="XXXX">-</option>
<option value="foo">Bar</option>
</select>
One downside of this kludge is that you need to change your validation functions to look for this fake value (instead of an empty value).
I set up a test on jsbin.com where you can see it in action.
Related
I'm trying to crawl a website using Scrapy.
I need to query the list of all existing items of a board-like function on my target site.
The problem is that it only searches within a target year, designated with a HTML tag option.
So I need to find a way to changed to location "selected" attribute within the s.
I think I'm not really doing my job at describing my troubles, so I'll append a simplified HTML code of the site:
<select name="Search_FIS_YEAR" id="Search_FIS_YEAR" title="fiscal_year">
<option value="2014" selected>2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
...
<option value="2007">2011</option>
</select>
So the default value of my target website is 2014, but I want to programmatically change its value to 2013, 2012, etc.
The search query is sent through a large that makes a POST request method to the server.
Fortunately I found a way to send the query using FormRequest.from_response, but I wasn't really successful in modifying the above part of the code.
I already knew the answer.
All I did was to just change the value of option within the form data:
yield FormRequest.from_response(
response,
formname=NAME_OF_FORM_WRAPPING_SELECT_HTML_ELEMENT
formdata={
'Search_FIS_YEAR': '2013', # or any other year value
}
callback=self.other_parse_function
)
This did all the tricks for me.
I have a select element on my form. I fill its contents with javascript. The view model has a property called Fruits of type IEnumerable. Is it possible to bind this select to that property when I submit the form? So to make it clear, assume there's a form with a select of size 5, which at the same time is empty. Then I add some items (options) to that select with java script:
<select size="5">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grape</option>
<option value="4">Pinapple</option>
</select>
When I submit the form, I want the Fruits property to contain the above option values. How's that done? I can't think of any way to do it.
Finally found it, something's missing though. To overcome the first problem of getting an empty ListBox on the view I did this:
ListBoxFor(x=>x.Fruits,new List<SelectListItem>(),new{style="width:160px;display:block"})
This will bring up an empty <select multiple="multiple" size="5" name="Fruits"> to the view. Then I add some items to the listbox with javascript (to be precise, add options to the select). The biggest pain started after this. When submitting the form the Fruits property was null, so listbox items were not getting bound. After lots of digging I discovered that in order for a ListBox items to bind to some collection the desired ones need to be selected. So even if there're 10 items in the listbox, they won't get bound to my Fruits model property unless I select them before submitting. After selecting the added items the Fruits property contained the corresponding values. However I hate to have to select all the items after adding them. I know this can be done automatically with javascript, but it'd be good to bypass this by some other means.
I've populated a multiselect using dojo and added the selected values using combo.set("value", selectedValuesArray);
Problem is that when trying to assert the selected values using selenium IDE, I can't figure out how dojo does to "select" the selected values, I would expect to be like
<option value="111" selected>name</option>
But as you can see in the image, there's no indication in the image, not in the disabled (view) or the enabled (edit) one
There's no CSS classes added either, so i don't know how to assert if the item is selected or not.
Any idea?
Here's the generated HTML
<select data-dojo-attach-event="onchange: _onChange" data-dojo-attach-point="containerNode,focusNode" name="combo_project_participants" multiple="true" class="dijitMultiSelect" tabindex="0" id="dijit_form_MultiSelect_3" widgetid="dijit_form_MultiSelect_3">
<option value="1367">name 0 AdminEdge</option>
<option value="1368">Test User name Test User lname</option>
</select>
EDIT: this didn't allowed me to upload the image...
http://imageshack.us/photo/my-images/850/cf6a.jpg
Add
data-dojo-type="dijit/form/MultiSelect"
in your select-Tag. That should fix it.
For further information look at http://dojotoolkit.org/reference-guide/1.8/dijit/form/MultiSelect.html
Regards
In Shopify, a collection can have a default sorting order, which is great. But is there a way to change the default sorting order prior to rendering the collection's list of products? What I'm trying to accomplish is to put a "sort by" dropdown menu on the page, allowing the customer to sort the current list by price, by brand, by best selling items, alphabetically, etc. like so many modern shopping carts out there.
Collections are sorted ahead of time rather than sorted dynamically so that pages can load faster.
You can create multiple collections with the same products, but with different sorting. Then you can navigate to relevant collection based on user input.
There is an app for this now:
https://apps.shopify.com/power-tools-sort-selector
*disclaimer - I'm the developer :)
We've recently added the ability to sort your collection dynamically on the storefront (before you could only sort a collection by one order in the backend.
docs:
http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/add-a-reorder-drop-down-menu-to-a-collection-page
ex code:
https://gist.github.com/carolineschnapp/11352987
If you want to avoid paying for the app - which may or may not duplicate each collection by the number of selections required - use / adapt the code below:
<script>
// jquery is already running on the site, so we use it to check the document is ready
$(document).ready(function() {
// Identify a Select Option from the value in the URL query text
// Where this exists as an Option Value, add the 'selected' attribute to the Option
// This ensures that when the page reloads the current option will be showing
$("#selectSort option[value='{{collection.sort_by}}']").attr('selected', true);
});
</script>
<div>
<!--
The Select Tag watches for a change, then pushes a new window.location using the value
of the Option selected by the user
-->
<select id="selectSort" onchange='window.location="{{ collection.url }}?sort_by=" + this.value'>
<option value="price-ascending">Price (lowest first)</option>
<option value="price-descending">Price (Highest first)</option>
<option value="title-ascending">A-Z</option>
<option value="title-descending">Z-A</option>
<option value="created-descending">Latest Addition</option>
<option value="best-selling">Most Popular</option>
</select>
</div>
I'm trying to select a value in a select element. I'm using Selenium RC (Java) to run the test cases. I understand that the code for selecting a value is given by:
selenium.select("locator", "value=REQUIRED VALUE")
I'm unable to select the desired value with the above code. I think it might be something to do with optgroup in the select source code. I do not get any exceptions, the command executes fine but looking at the page the required value is not selected.
Also, I cant use ids (instead of value) because there arent any. Here is the source code of the selector:
<select>
<optgroup label="Group1">
<option value="13">some value1</option>
<option value="25">some value2</option>
</optgroup>
<optgroup label="Group2">
<option value="18">REQUIRED VALUE</option>
<option value="34">some value3</option>
...
...
</optgroup>
</select>
Is there any way to select the required value using Selenium?
It would be great if we could avoid the option values (such as "18", "34" etc) because these numbers change later as the values change. For example, "REQUIRED VALUE" has a value -18 but if I were to delete this item and add it again its value would be different. Basically this drop-down box is dynamic.
The value for the required option in your example is actually '18'. Try the following:
selenium.select("locator", "label=REQUIRED VALUE")