modal window changes some rows in table instead of one - javascript

I have a table with some rows. Table rows can be modified by ajax requests. Modifying happens in a modal widnow for the current row (just for one).
So, I found a bug. I click edit for 1st line. I see the modal window with values of 1st line. So, it's ok. Then I click close without saving. Well. I click edit for 2nd line. I see the modal window with values of 2nd line. So, it's ok too. Now, if I click Save changes, I see two modified rows (1st and 2nd), but it seems just 2nd row must be modified. If I do the same for N count of rows I see N changed rows.
I don't understand why it's happen. Can anybody explain me?
https://jsfiddle.net/bogdan_017/26gaqpcf/#&togetherjs=C1ltBspbSs

Every time you click on an edit, you ADD another click event to the save button ... in this code modal.find(".save-btn").click(function () {
you need to remove the click event on the save button once you click on it
// snip
modal.modal('hide');
$(this).off('click'); // add this here
// snip
You'll also need to handle the modal close (the close button) and remove the click event on the save button in that case

Related

Tabulator : edited cell not showing in table.getEditedCells()

I am using Tabulator to implement an editable table and I encountered an issue.
The user can either manually edit cells one by one (through a dropdown) or select multiple cells and click a button to set them all to the same value.
Then, when the user is done editing, a save button is available and sends everything back to the server.
The save button only saves edited cells (accessed by table.getEditedCells()).
My issue is that cells edited through a button (to set a common value for multiple cells) are not marked as edited, thus are not present in the table.getEditedCells() list.
Is there a function to force a cell to be marked as edited ?
Or would you have suggestions on how I should change the save button behavior ?
Some code
At first, the buttons updated the cell values through
row.update({column:value}); but this didn't trigger the cellEdited callback.
I now use :
var cell = row.getCell("field");
cell.setValue(value);
fixEditedCells.push(cell);
cell.setValue triggers cellEdited callback (the change can now be undone with history table.undo() ; that wasn't the case when I used update)
My temporary fix is to store the cells modified through the button in an array (fixEditedCells) and then merge it with the .getEditedCells() when saving...
Thank you for your help !
Cells only get flagged as edited by user interaction not by use of the 'setValue' function. This is by design to allow developers to update the table without it being registered as an edit by the user.

In jQuery how do I do something after an event has completed

Use case:
I have a table that users enter order lines into. The table is a list of products, they can page up and down in the table. If they've entered a quantity into one product and then page down they need to be focused on the input field in the same column they started from, but at the new row, the page down has moved to.
Problem:
The page down changes the hover location. So I can get which row has the hover state and change focus to the correct column in that row. I need code to execute after the page down has completed and a new row has: hover.
But because page down is async, getting the row with the hover state in my event handler returns the current row, not the one that will have: hover when the page down completes. How do I write a page down event handler so that code is executed after the page down has completed?
Attaching a promise to the table with code that executes after the 'keydown' type event is complete doesn't work. It runs before the new row has: hover state.
You can use document.activeElement to get the element that has focus, get the column from that and set the focus using $(columnSelector).focus() to newly populated records column.
Another way is to have focus event handler and maintain the last focused column name in a variable.

Clear previous selection only if checkbox is not clicked in jQgrid?

I have a grid setup with multiselect: true because I need to be able to delete more than one row at the same time. On the onSelectRow event I am loading some data based on the ID and displaying it to the end user. So far so good.
This is the example where everything works fine, the data for ID=219109 is being displayed:
Now look at the following example:
In the example above the first row still highlighted and then I clicked a second one. Because of multiselect is enabled I was able to select both at the same time. The onSelectRow event still working properly which means is loading the data for the ID=282006 but visually it could be confusing for the end user.
What I want to do is to reset the previous selected rows and just highlight the last one I have clicked.
For example using the same images:
Load a fresh grid with no rows selected
Click on ID=219109: highlight and select this row
Click on ID=282006: clear the grid and highlight this row
However this should only happen when I click in any other place than the checkbox.
In the image above if I click on any column rather than the first one (the one having the checkbox) I should be able to clear the grid selection and choose the last one but if I click on the checkbox it does not matter because is the only way to delete more than one at the time.
I have tried the following:
onSelectRow: function () {
var rowid = $(this).jqGrid('getGridParam', 'selrow');
$(this).jqGrid("resetSelection");
$(this).jqGrid("setSelection", rowid);
}
But it's not working since the behavior is not consistent. You can check the demo here.
Any ideas in how to achieve this?
It seems to me that you need just add the option
multiboxonly: true
and remove your current onSelectRow code. See https://jsfiddle.net/OlegKi/949pLpfv/3/. If the user clicks multiple times on checkbox the rows will be selected. The click on another part of the row will deselect all previously selected rows and select only the clicked row.

Trying to remove buttons on click, but they keep coming back (JavaScript, HTML)

I'm having this problem with buttons that I don't know how to solve. I have a table, and each row has a "Pack" action button. When it's clicked, the button is removed so that the user can't accidentally click it again and 'pack' the same item twice.
It has been working well so far, but I just noticed that when you click to the next page of the table (when it has more than 15 or so rows) and go back to the first page again, any buttons you clicked on that first page (and removed) are back.
No matter what pages you move to, I need my table to "remember" which rows' action buttons were clicked/removed. I have no idea how to do this, though.
Here is my code that removes the action button when you click:
// Pack action button
$(document).on('click', ".box-electrode", function (e) {
var id = $(this).attr('value');
var sn = $(this).data('sn');
addElectrodeToBox(id, sn);
$(this).remove();
});
The table itself is created using DataTables.
Can someone point me in the right direction?
Edit
Here is some code I've come up with based on the answer below, but it's not working. There are no errors in the JS console, it just doesn't seem to do anything.
$(document).on('page.dt', function () {
var $allSerialNumbers = $('.box-electrode');
$('#electrodes li').each(function (i, li) {
var $id = $(li).data('id');
for(var index = 0; index < $allSerialNumbers.length; index++){
if($id == $allSerialNumbers.eq(index).attr('data-id')){
$('.box-electrode').eq(index).remove();
}
}
})
});
$allSerialNumbers represents all the action buttons, and $('#electrodes') is the list I'm comparing to.
I think part of the problem (other than my clumsy JS skills) might be that DataTables' Page Change Event page.dt only seems to affect the page that is being changed, rather than the page being changed to. For example, when I'm on the 2nd page of my table and click back to the first page, my JS code is acting on the 2nd page instead of the 1st (which is what I need).
Create a JavaScript empty array;
DataTables library has page changing event;
When user presses the button - get button's value, store it in the array and remove the button;
When user changes the page - page's change event will be fired -> cleaning function will be executed, which will read the array, search needed buttons by value and remove them if exist.

In a jqGrid, how can I get the row that another element is in?

I have a jqGrid which has a column called "Actions". In this column, each row has a number of buttons which are supposed to perform various functions on the data in that row.
Unfortunately, the only grid parameter I've found that remotely matches what I want to do is selrow. This gets the selected row. But if the user clicks one of the action buttons, this doesn't necessarily mean that row is "selected" (i.e., the user has clicked on it previously).
Is there a way I can get the row of the button the user presses? Or does it not make sense to have buttons inside of the jqGrid to begin with?
If you would use for example onCellSelect to detect which button is clicked you will have directly the rowid of the button which is clicked. The answer will get you more details about the implementation.
If you would prefer to implement custom click event handler you can just find the closest <tr> element. It's id is the rowid of the clicked button. So you can use something like $(e.target).closest("tr.jqgrow").attr("id") where e is the event of the click handler.

Categories