I currently have a list of item that is being loaded based on URL from collection.
Now i need to filter this list of item , currently the items are being populated manually hardcoded in template(html)
<li>
<label><input type="checkbox" id="internship" value="I"></label></li>
Should i populate this using model & collection instead, the question to which method which i'm asking for advice is based on How can i collect the VALUE of the checkbox TICKED.
If box is ticked , my URL sent will be different , to retrieve a new set of URL with queries.
Any advice would be greatly appreciated
I would suggest use model & collection to render this list, this way you don't have to query DOM every time you want to check state of view. Also you change URL by subscribing change event on model and collection as needed.
Related
Is there a way to programmatically change the collection of a gallery in wix. I have a wix store and I want to add costume filter options. I know you can add some in the editor but if the collection is empty I cant add it to the filter options and I don't want to have to go through the editor and add that filter every time I get an inventory of that product. So I want to use radio buttons and write my own filter code and if the collection is empty I want to display that or show some type of message. I have the coded filter successfully running a query to find all products that contain a certain "String". I want to take that array of products and populate a store-gridGallery programmatically but I don't see any properties of the gridGallery that allow me to do this. Any Suggestions??
You can replace the store grid gallery with a repeater, creating your own store product gallery. Then, using Wix Code inputs and wix-data filter, you can code your own set of filters.
e.g.
Assume you are using a dataset connected to a repeater to show the store products as a gallery. You can then set the dataset filter using
import wixData from 'wix-data';
export function filterElement_onChange(event) {
let value = $w('#filterElement').value;
$w('#dataset1').setFilter(wixData.filter().eq('a field', value));
}
I have an asp page that has a treeview control on it, with checkboxes. I want to be able to check client side (javascript) which items have been checked.
Now when I view the source of the page, the tree is made up of table elements and I see this on a checked item:
<input type="checkbox" name="TreeView1n0CheckBox" id="TreeView1n0CheckBox" checked="checked" />
So I could loop around all the <input> elements, but I was wondering if there was a better way of doing this (and yes it would be easier on the Server, but I want to do this on the client).
The other thing I need to figure out is how I get back to the ID of the item in the Treeview.
Any suggestions?
Select the checked ones, convert to an array, then use map to get their IDs.
var CheckedElements = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function(x){ return x.getAttribute('id') });
I'm developing a feature where a user can repost a previously submitted 'project', which involves passing the data from the current project to $scope.params.project, archiving the existing project, and redirecting to the PostProject page where the user can resubmit the project, adjusting details in the form as needed.
The idea is that the PostProject form should be populated with the Job data from $scope.params so the user doesn't have to fill all of this out again.
I've successfully used this to populate a regular <input> field, so I know the data is being passed. I'm having trouble finding documentation on how to do this with a <select> dropdown menu, however. Everything I find tells me to use ng-model to be able to set the <select> menu to a default value.
However, I need to set the menu to a value based on $scope.params and have that value set the model for when the form is submitted. I'm stumped.
Here's the HTML. Assuming that $state.params.project is the intended JS object and that $state.params.project.service_type is a string that exists in the postOppCtrl.services array, I think this is all that is needed to demonstrate the problem.
From the HTML:
<select ng-if="$state.params.project"
ng-model="postOppCtrl.postOppProjForm.service_type"
ng-options="category as category for category in postOppCtrl.services"
// this part doesn't work, and I'm not sure what else to try.
ng-value="$state.params.project.service_type"
</select>
You could try using ng-init in the select tag to initialize the value:
ng-init="postOppCtrl.postOppProjForm.service_type = $state.params.project.service_type
I solved this by setting the model from my controller using $scope.
In my PostOpportunityController I had:
vm.postOppProjForm = {};
I replaced that with:
vm.postOppProjForm = { service_type: $state.params.project.service_type };
I have an Ember app that has a template with several dropdown menus(the dropdown menus are in a component.hbs).
Inside the component.js, there is a custom array (ingredients) that takes objects from the model and filters them depending of the selections.
The problem is that the data doesn't refresh automatically for the following selectors, I have to refresh the website to be able to see the next options.
For example: 2 selectors: "recipies" and "ingredients"
A user selects "meatloaf". The ingredients selector, that would take the data from a custom array in the component, doesn't refresh itself in order to display only the ingredients for meatloaf.
I'm assuming this is happening because the component.hbs (and the ingredientes array)have been rendered and loaded when the user visits the website, but I need to find a way to refresh the ingredients array everytime a user selects a recipe
So, I just figured it out.
It was way more simple than I thought.
In the same action that is triggered when the user selects a recipe, I empty the array for ingredients, and then fill it out with what the ingredients related to the selection.
Define computed property in the component, which will be recalculated whenever selectedRecipe changes.
ingredients:Ember.computed('selectedRecipe', function(){
// do filtering stuff and return the result
return this.get('customArray').filterBy('name',this.get('selectedRecipe'));
})
I have set up a CGridView widget in my application. It displays a list of user accounts. I also have two other drop down lists that basically filter out the users. My problem is that I cannot use the values from the drop down lists to filter out the users. What I actually need is to refresh the list of user accounts based on the selected values from the drop down lists.
How am I supposed to do that with Javascript?
Yes you use Javascript to do this. CGridView's jquery.yiigridview.js has $('#id-of-grid').yiiGridView('update', options) function which can be used for such things:
function(){// in your function
$('#id-of-grid').yiiGridView('update', {data: {value_of_list: $(this).val()}});
}
This will call the url that renders this view with a parameter value_of_list with the value selected in the drop down.
Edit:
The $('#id-of-grid').yiiGridView('update', options) signature indicates that you can specify which grid to update, and also the specific options to be sent. In the above example i have sent only data, i could have also specified which url to send the data to using url option. The full list of options can be seen in the link i have specified above.