I'm using handlebars with a table with many columns. The table has data from my database, arranged by ID. A button on each row (list of users), will open up a modal dialog for user information. I have my list of users populated in my template with the users in an array as a handlebars template.
I want to be able to display the correct user data on the modal based on which user's button was clicked, as each row is a different id.
I am trying code like this:
{{{allUsers.html_button_id.userName}}}
But as I've seen in other questions like this one, they suggest I use a helper function. I have tried that too, and have a return var helper like this:
getDataFromDB : function(key, index, options) {
return key[index].value;
}
Where in use:
{{getDataFromDB userProfile index}}
But still not coming up with anything. I cannot put in a variable into that, it says that it is invalid. I have a button that has an ID, which I want to pass to this helper function so I can use the ID as the index to iterate through my array depending on which button the user presses. Any idea how to accomplish this? I feel like I'm close
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'm working on my first angular app and i dont know the best way to handle this problem.
I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.
To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.
Images of accordions:
When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.
So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.
I would appreciate your help to learn the standard way to do this, thx mates.
I Just solved it, I used a similar procedure to the oen that #AnikIslamAbhi sugested, in the fiddle that #Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:
$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);
And after this override this object with the edited one:
$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;
You can try this procedure
Pass the selected object on edit click from UI to Controller.
Clone it and pass that object to modal.
OnModal close pass the modal object back to the UI.
Copy the values of modal object to the previous selected object
Like this
for(var i in modalObj){
selectedObj[i]=modalObj[i];
}
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'));
})
Is there any easy way to create a a listview in HTML and set an onClick() listener for it like it can be done in Android? My requirement is that I want to retrieve data from the server and display it in a listview to the user. The data will be retrieved like - 10 rows at a time.
Then if the user clicks on more, next 10 rows will be retrieved. Then if the user clicks on a particular list item, show the details in another page.
A list in HTML looks like this.
<ul>
<li><a href="details/url/id">Title</li>
<li><a href="details/url/id">Title</li>
</ul>
The urls can goto the details page.
To add a more button you would use javascript and ajax to get more rows from the server, and append more items to the list when you get the response.
It's just a fast solution which uses Mootools, I consider your input is JSON which contain items in list array:
new Request.JSON(
{
url: '/list.json',
onSuccess: function(json)
{
json.list.each(function(key, val)
{
new Element('LI')
.set('text', val)
.addEvent('click', function()
{
alert('item '+key+' pressed');
// alert('item '+val.id+' pressed');
// considering val is an object instead of raw string, this way you must change set to something like this set('text', val.text)
})
.inject($('list'));
// any other thing you want add to your list item
});
}
}).get();
<ul id="list"></ul>
Key is the position of item in array, you can use an id instead which I added in a comment.
Rather than paginating the table, I prefer to use virtual scrolling like in SlickGrid.
SlickGrid has many modes of operation, but its core functionality is to only render the HTML of the rows you're currently looking at. As you scroll, the rows are dynamically created and destroyed as necessary. This allows you to display a grid with millions of rows.
The API allows you to load data on-demand, so rows will be fetched from the server (in groups of n) only as you scroll the grid.
You can try Jquery Data Tables:
http://datatables.net/
I suggest Ember.js. Ember.js has a powerful system of bindings and templates which are used to automagically synchronise Javascript objects with eachother and the DOM. It's overkill for what you're doing, but it's worth it if you're going to be doing anything complex with that list.
The Docs for Ember.CollectionView are here:
http://emberjs.com/api/classes/Ember.CollectionView.html
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.