Selected attribute ignored by Dojo/Dijit/SpringJS - dojo

I have the following source code for a select:
<select id="_conteneurNum_id" name="conteneurNum" data-dojo-type="dijit.form.FilteringSelect">
<option selected="selected" value="">Tous</option>
<option value="1">951</option>
<option value="2">753</option>
<option value="3">753159</option>
</select>
Which get rendered as follows:
It seems that the selected attribute is ignored by Dojo/Dijit/SpringJS (notice that the user is first presented with a white label instead of "Tous".
Can anyone please help?

Are there any errors in the console?
I have a fiddle that does exactly what you want with your code:
http://jsfiddle.net/cswing/eJP3U/

I just found a workaround after some hours wrestling with MyEclipse 2014, Spring 3.1 and old Dojo/Dijit versions, I know this is old but MyEclipse packs these old versions of everything.
I tried FilteringSelect, Select with null value, html option with value, and replacing dojo libraries which messed the rest of the project. So I'll post this here if it could help anybody:
This case is common if you want a dummy prompt option in your select like '-- Select item --' with a null value. Dojo/dijit version packed with MyEclipse into spring-js-2.3.1.RELEASE, replaces option with null values with separators showed in the dropdown list.
In a few last versions of Dojo/Dijit this behaviour seems to be corrected as you can see in the fiddle of Craig Swing.
If the property you bind is not a string, you can assign a single espace as value of dummy option instead of null, because later will be binded as null in the controller, so the dummy option will be showed. Ex:
<option selected="selected" value="">Tous</option>
But if the property is a String, this way you will find with an unwished blank space in the property in your controller.
So I finally opted to directly modify Select.js
Place it in your project in webapps/resources/dijit/form/Select.js
Comment this lines:
/*
if(!_1.value){
return new dijit.MenuSeparator();
}else{
*/
var _2=dojo.hitch(this,"_setValueAttr",_1);
var _3=new dijit.MenuItem({option:_1,label:_1.label,onClick:_2,disabled:_1.disabled||false});
dijit.setWaiRole(_3.focusNode,"listitem");
return _3;
/*
}
*/
And don't forget to override this path for Resource Servlet in web.xml:
<servlet-mapping>
<servlet-name>My Servlet</servlet-name>
<url-pattern>/resources/dijit/form/Select.js</url-pattern>
</servlet-mapping>

Related

Why are my Vue/Nuxt Select field states valid by default?

I have a variety of HTML select elements inside of Nuxt.js. I'm also using Vuelidate for validation and this is working as expected. This is a typical select box in my form:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="{error: appendErrorClass($v.form.location)}"
>
<option :value="null" hidden>Choose...</option>
<option
v-for="(item, index) in $store.state.quotes.data.practiceStates"
:key="index"
:value="item.data">
{{item.display}}
</option>
</select>
Before selecting any of the options, I'm noticing the following on all select fields.
I've tried removing any Vue magic on a test select field to see if the same results happen.
<select id="location1" name="location1">
<option value="" hidden>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
Still seeing valid: true. Is there anything I'm overlooking that would cause the validity to default to true? Thanks in advance for any help or guidance on this issue.
UPDATE For Clarification:
Vuelidate validation works just fine. The issue I'm dealing with is the select field property Validity.validate. I only mention Vuelidate to give full context.
HTML Select is a sort of "strange" form element in that validity is typically checking to see if there's a readable value. Since a select always has something picked, it validates...
This is different from say a telephone input that has a specific pattern required to be valid.
I haven't used Vuelidate specifically, but I read the docs as saying, if you left the v-model="form.location" there's a good chance it's simply validating that a value exists so Any selcted item would qualify.
In my original post, I referenced the dynamic style based on the vuelidate library: :class="{error: appendErrorClass($v.form.location)}"
#PierreSaid responded to this post and later deleted his/her reply. Turns out, his response was helpful in pointing me to some Vuelidate attributes that were able to assist in a workaround for my issue. Thank you, PierreSaid.
I have since updated that dynamic class to be a mixin that looks like this:
export default {
methods: {
appendErrorAndValidityClass(field) {
return {
error: field.$error,
invalid: field.$invalid,
};
}
}
};
After importing the mixin into the Vue partial, my select box looks like this:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="appendErrorAndValidityClass($v.form.location)"
>
This appends a class of invalid when the select field has not been updated. It also updates the error style accordingly. Now, I can assign styles for when the select field has an invalid class. This solves the overall issue for me. Thanks for your help PierreSaid and Bryce.

How can I changed the selected <select> tag element in scrapy?

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.

How to assert a selected item in a dojo multiselect with selenium IDE

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

Can a user-sorting system for a collection be done in Shopify?

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>

Filtering Select - How to add a blank option '-' that allows submission in Dojo

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.