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.
Related
I have an array of activities that looks like this:
[
{id: 'd0a503f0-be2b-453c-8f6e-d5a734bbba33, name: 'Baseball'}
{id: 'd0a503f0..., name: 'Soccer'}
...
]
I am looping through each activity to render a list of checkbox options like this:
<div v-for="activity in activities" :key="activity.id">
<input :id="`activity-${activity.id}`"
v-model="$v.resource.activities.$model" name="activities" :value="activity.id" />
<label>{{ activity.name }}</label>
</div>
So far, things work great. The checkbox group renders with the correct value(s). I am able to check the ones I want and when I save my form, I am saving an array of activity id's.
When I edit the resource, the checkboxes are not being pre-populated (checked). I am struggling to understand how to loop through each of the array elements in vuelidate's $v.model.
Let's say I have 4 activities total. Here is what the $v.resource.activities attribute looks like in my devtools toolbar (2 activities have been previously selected):
$v:Object
resource
activities:Object
$anyDirty:false
$anyError:false
$dirty:false
$error:false
$invalid:false
$model:Array[2]
0:Object
createdAt:"2023-02-04T08:55:27.009Z"
id:"d0a503f0-be2b-453c-8f6e-d5a734bbba33"
name:"Baseball"
updatedAt:"2023-02-05T23:17:00.206Z"
1:Object
createdAt:"2023-02-05T23:19:49.938Z"
id:"c251e931-2a8a-468c-aff4-b4250233cfa6"
name:"Soccer"
updatedAt:"2023-02-05T23:19:49.938Z"
I know I need to keep the initial loop like I have above to generate the list of checkboxes. I am confused as to how to also loop through each of the $model attributes to see if the checkbox should be checked or not.
Since the value of the checkboxes are only the id of the activity, I don't think it knows what to do (which is understandable). How can I loop through the list of activities and correctly populate which checkbox has been selected?
I have a select input. and checkbox-list in vuejs form. Checkbox list depend on what is chosen in select. The problem is that if i check let's say 1 or 2 checkboxes, after I change select, 1 or 2 checkboxes will always stay checked despite the fact that values and labels of checkboxes have already changed. It looks like it doesn't build new checkboxes with new 'checked' attribute.
Select has onChangefunction() in which I change list of items to be checked in checkbox list. Checked() function in checkbox checks whether this exact element should be checked and returns true or false
<select #change="onChange" ...
<input type="checkbox" :checked="checked()" ...
The thing is that even if checked() function will always just return false, the checkbox will stay checked after I manually checked it on the page however many time I will change select input choice
To really give a good answer, I think a bit more information might be required. That being said, it looks like you're binding is incorrect. Your input line probably should be:
<input type="checkbox" :checked="checked" ...
So your checked function shouldn't have parens on it.
If that's not the issue, please post the rest of your component so we can see the script and data values.
Agreed with #DRich here but you can use #input method to call a method
<select #input="onChange" ...
I use this most of the time
Each product has the custom fields options. Can I output those custom fields on each product item in the product list page? If so, how? I have tried adding the ProductOtherDetails and the %%SNIPPET_ProductCustomFieldItem%% in the CategoryProductsItem.html, but got no output at all of any of the items I have tried. Any suggestions or pointers on how and if this is possible?
As of September 2015, you can now access %%GLOBAL_ProductCustomFields%% on any template file that renders a particular panel's individual items. For example:
-Snippets/CategoryProductsItem.html for category list pages
-Snippets/HomeFeaturedProductsItem.html for the featured products panel
I recommend adding the custom field name as a class to each field for easy hiding, and accessing of the value in case the custom fields ever change you won't be accessing them via :nth-child CSS which would break. You can do so by modify Snippets/ProductCustomFieldItem.html to add the custom field name to the CSS class or ID like this:
<div class="DetailRow %%GLOBAL_CustomFieldName%%">
<div class="Label">%%GLOBAL_CustomFieldName%%:</div>
<div class="Value">
%%GLOBAL_CustomFieldValue%%
</div>
</div>
Doing so, will output like this in each item in the category list.
Above, I am using the custom fields to send through shipping time, as well as "Starting At" to prepend to the list page price if the item is a parent which has children of higher prices. In my opinion, these features greatly increase the user experience.
For Faceted Search (handlebars.js)
I recommend adding this to Panels/FacetedSearchProductGrid.html:
{{#each product.custom_fields}}
{{ id }} : {{ name }} : {{ value }}
{{/each}}
Those filters will be limited to the Product pages specifically. The only way around it is to hash together a solution using jQuery to go and fetch items in question from the product page. A pain, but do-able with unnecessary effort.
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>
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.