Identify "next" and "previous" click in data table - javascript

I want to add some custom functionality on data table next and previous button. I can access click event using
$('#table').on('page.dt', function(){
// custom code
});
but here, I can not identify whether next was clicked or previous. Is there any way to identify this in page.dt? I don't want it in callback of data table

Related

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.

modal window changes some rows in table instead of one

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

Select HTML Table Row and Identify DB Record ID

I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.
1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.

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