I am working offline with SQLite, Javascript and Chrome
In my main page (main.html), I have two div: <div id="menuLeft"> that contains the list of items name with buttons to edit each item, and
<div id="content">
The list of item is written as follows:
<li>ItemName1
<div id="idItem1" class="editItem_btn">
<img src="btn_edit.png">`
</div>
</li>
In main.html, I have the following code:
$("#menuLeft").delegate(".editItem_btn", "click", function(e0)
{
e0.preventDefault();
var editItemId = $(this).attr("id");
editItemId = parseInt(editItemId);
var url="edititem.html"
$("#content").load(url,function(){
loadRecord(editItemId);`
});
});
When I click on the edit button of a given Item, the id of the Item is first retrieved from the id of the div around the edit button. Then I load the page edititem.html content. On success, I run the function loadRecord(editItemId), where loadRecord(i) is contained in edititem.html:
function loadRecord(j)
{
var item = dataset.item(j);
idItem.value = item['id'];
ItemName.value = item['ItemName'];
dateStart.value = item['dateStart'];
dateEnd.value = item['dateEnd'];
notes.value = item['notes'];
}
This function enables to display the parameters of Item (id, ItemName....) contained in the database.
Here is my problem, the code works but in a weird way meaning that if I click on the edit button of Item1, the parameters of Item2 are displayed. Same thing if I click on edit Item2, parameters of Item3 are displayed.
I then replaced:
var item = dataset.item(j);
with:
var item = dataset.item(j-1);
and that works. But I need to understand why it's behaving like that, and why I need to use (j-1). I placed some alert() in the jquery code to check that I have the right editItemId number, and in the function loadRecord(j). The right id number is retrieved after the click and the right id number is passed to the function. I have no idea what's the bug here!
Without seeing the sql side of things, and how that data is passed back to your script it's impossible to tell you exactly what's happening, but this is simply a case of some lists being 0 based and some lists being 1 based. For example, arrays are generally 0 based (unless you specifically create them a different way), but $("#id").each(function(Index)... is 1 based. You just have to know what you're working with and occasionally do as you have found and use -1 or +1 when relevant.
While I'm not familiar with the intricacies of SQLite, I suspect that dataset.item(j):
is accepting a 0-based index
that you are passing in the record_id (which in itself is not actually an array index)
and that the record_id for the dataset you are testing just happens to be the index + 1 (meaning you're getting lucky right now and that it will probably change when the next dataset is loaded).
I would check to see if there's an equivalent for dataset.item(j) which accepts a record_id and not an index. Otherwise, you'll probably want to store the index of the record somewhere in the record itself to be able to pass it to your loadRecord function.
Hope this helps,
Pete
Related
In my angular code on page load there are list of buttons like button 1, button 2, button 3.. etc on click of every button it shows J-SON on console the structure is same for all buttons but the values vary. There are two more buttons on page on up and down.
My question is if button 2 is selected and i click on up button then the position of button 2 should moved up to button 1 for that we have use one attribute in j-son but problem m facing is that how should i swap whole j-son like how to swap position of button 2 to button 1 and vice-versa for down arrow
searched for swapping on google but it showing items in array to swap. i want whole j-son to swap
up(){
exchange(this.jsondata,up,up+1);
}
private exchange(array: any, x: any, y: any) {
const temp = array[x];
array[x] = array[y];
array[y] = temp;
return array;
}
it should change the position of buttons on click of up down buttons
If what you want is swapping two elements in an array, your exchange function seems ok.
But you are calling it with only 2 parameters : up(up, up+1) while your function takes 3 parameters :
the array where the items are
the first item
the second item
If your buttons were in an array named myButtons, you would probably want to call it that way :
up(myButtons, up, up+1);
Side notes :
be careful what you're naming your parameters. Array is a global JavaScript object. It's not a good practice to use that name for a variable.
up is obviously the name of a function and a variable. That is kind of confusing.
your function returns the array that was passed as a paramter. That is not necessary since arrays are passed as references. You can make your function immutable and have it return a different array. Or modify the reference and not return anything.
I've got datatables set up nicely and with the select extension - I have this code for when someone uses a "report" and it loads another page using some cell content from the table to pass to the report. That works fine, however - I need to be able to pass a data-element of each <tr> of the table instead of the row data...
This is my current code:
var table = $('#table_search_project').DataTable();
//then re-run the code to get the selected rows
var id_list = $.map(table.rows('.selected').data(), function (item) {
return item[1]
});
So you can see, I used to use item[1] to return, but I really want to be able to get the <tr> object so I can retrieve the data-something-id property (but I don't want to show it - hence the issue)
I worked it out. Too hasty to ask in SO!
I used this instead:
var id_list = $.map(table.rows('.selected').nodes(), function (item) {
return $(item).data("entity-id");
});
The nodes() collection sends me back the <tr> elements instead of the data. Exactly what I wanted. Found the information here:
https://datatables.net/reference/api/row().node()
Explanation
I have a very simple calorie tracking app that uses the Nutritionix API to search for food items based on the user's input. The results are added to a results array, which is then displayed to the user. When a user clicks the "Add" button next to one of these items, the calories are added to a counter, and the food itself is added to a todaysFood array (using Ember's pushObject). This is then used to display which food the user has consumed today in a separate table.
When a user clicks the remove button next to one of the todaysFood items, it triggers an action, removeItem, and passes the index of the item clicked to removeItem. This index is used inside of Ember's removeObject to remove the item from the todaysFood array, and thus update the view (remove that item from the list and its calories from the counter).
Problem
When more than one of the same item are added to todaysFood, clicking remove on just one of those items removes ALL of the instances from todaysFood, and the view. This makes sense to me now, because of the docs' example:
var cities = ['Chicago', 'Berlin', 'Lima', 'Chicago'];
cities.removeObject('Chicago'); // ['Berlin', 'Lima']
cities.removeObject('Lima'); // ['Berlin']
cities.removeObject('Tokyo') // ['Berlin']
However, it also only removes the calories of ONE item, not all instances.
So, the question is: How do I remove only ONE instance of that item when remove is clicked? I.e., if two tacos are added, and I click remove on one, I only want that ONE to be removed (from the list and the calories).
Here is my removeItem action:
removeItem(index) {
var self = this;
// Store property paths for easy access
let todaysPath = this.get('healthData').todaysFood;
let caloriesPath = 'healthData.calories';
this.set(caloriesPath, this.get(caloriesPath) - Math.round(todaysPath[index].fields.nf_calories));
todaysPath.removeObject(todaysPath[index]);
}
Disclaimer
I'm aware that I may not be handling this correctly at all. I'm open to any suggestions to make this better. Thanks!
You have index of object to remove so you can try using removeAt() method:
todaysPath.removeAt(index);
i am using selectize.js to display a multiselect dropdown list witch zipcodes and cities. Its functioning well when searching and adding one item at a time, with the autocomplete search, but when im trying to add a batch of zipcodes from a multidimensional array, it totally frezzes the page, and takes more than 20 seconds to complete with insertion of a batch of 100 zip codes or so.
The following is my two add and remove functions, using data from my multidimensional array of zipcodes, with a parent region id. The events are fired via a dropdown of regions with the value of the first dimension in the region_relations array.
var control = new Array();
control.push($select[0].selectize);
control.push($select[1].selectize);
function addItemToselect(key_index, region){
var index;
for (index = 0; index < region_relations[region].length; ++index) {
control[key_index].addItem(region_relations[region][index]);
}
}
function removeItemToselect(key_index, region){
var index;
for (index = 0; index < region_relations[region].length; ++index) {
control[key_index].removeItem(region_relations[region][index]);
}
}
I can't seem to find a solution to this problem - i thought i could maybe use jQuery to set the original options checked and call the refreshItems() function in selectize, but it seems like selectize is actually emptying the original , and so options will only be present in this element if an item has been selected using selectize - the script itself includes a addItems() function, but it basically does the same as above, i hoped the selectize addItem had a efficient way of batch adding items, but as it seems right now, i might be out of luck, and we are talking a max of 100 items to add or remove at a time....?
Do you have any suggestions?
My problem can be demonstrated "real life" on this page: http://onlineboligsalg.dk/soeg-bolig/ , the controls are found on the left.
thanks in advance for your help
I am writing a Windows 8 app with WinJS. I am using a Grouped Binding List
var groupedSortedListProjection = list.createGrouped(groupKey, groupData, groupSorter);
that will have two groups with keys of 'doing' and 'done'. So, when a user click on an item in group 'doing', an item will be added to 'done'.
I am trying to limit the number of items in group 'done' to only 5 items. So every time a new item is added to group 'done', the last (oldest) item will be deleted. I need an index to do that. However, I do not know how to get to the index for the last item.
What's more, I found this method in MSDN:
List.lastIndexOf
The example is:
var number = list.lastIndexOf(searchElement, fromIndex);
I think this is the answer but I have no idea how to use this method.
This is my HTML code for the ListView:
<div class="appViewContentMask">
<div class="appViewContent">
<div id="gridViewToDo" data-win-control="WinJS.UI.ListView" data-win-options="{
itemTemplate:select('#toDoTemplate'),
groupHeaderTemplate: select('#headerTemplate'),
layout:{type:WinJS.UI.GridLayout},
itemsDraggable : true,
itemsReorderable : true}"></div>
</div>
</div>
I wire up the data with Javascript:
Thank you for reading. I hope my question is clear enough. If you need more information, tell me and I will post more.
One way to be able to delete the oldest finished task is to add finishTime into the item and have it part of the sorting key . That way - the oldest item can be found at the end of the list. Sorting based on this key needs to be done in the createSorted projection.
Thereafter createGrouped projection needs to be used to group the items and order the groups.
The item is to be modified and removed in the iteminvoked handler.
For full details and code listing, refer here.
You can use the splice method (http://msdn.microsoft.com/en-us/library/windows/apps/hh700810.aspx) on the List which operates like that of an array. Once you find the index of the item you would like to remove you simply say:
groupedSortedListProjection.splice(index, 1);
In order to find the index you can ask the group, or in your case since you know the 'done' group is second and is the last group in the collection then the last element in that group will also conveniently be the last item in the collection, do your code is:
var index = groupedSortedListProjection.length - 1;
groupedSortedListProjection.splice(index, 1);
However, if it you didn't have that invariant and had to instead find the right group the code would look something like:
var groups = groupedSortedListProjection.groups;
var group = {}; // start with an empty object to make the for loop condition simpler
for (var i = 0; i < groups.length && group.key !== "done"; i++) {
group = groups.getItemAt(i);
}
var index = group.firstItemIndexHint + group.groupSize - 1;
groupedSortedListProjection.splice(index, 1);
Hope that helps.
-josh