I have read many posts that talks about this but still I cannot find a clear answer to my question
I need to reload only 1 row when I click on a button
At the moment, I send an ajax request to the server that change a boolean value. The request change the db field but not the table obviously. Now I need to refresh the corresponding table field which is row specific.
$('#table').DataTable().ajax.reload();
This works but it is not quick enough
How can I refresh only the row where the modification happens. Even better if I can refresh only the specific field within the row
Something like this:
$('#table').DataTable().row(rowNumber).data();
I have read that I need to send an ajax request that give me the updated value and put it in the field. I know already what to put but how can I refresh the specific field?
Can you please show me an example
I am using dandelion datatables 1.1.0
Related
I have a view where there is a dropdown and datatable.
At initial load, I am loading the values to be loaded in the datatable based on the first select of dropdown and on change of dropdown, I want to fetch data based on that condition and populate those data on the datatable.
Please anyone suggest a way to do this!
I am trying a way using get request but it is reloading the page and hence I am unable to make the data persist in the datatable.
I followed exactly this https://laracasts.com/discuss/channels/laravel/filtering-data-using-drop-down-onchange-event
Data is coming and populates to the datatable but just after a second, it reloads and comes to old data in datatable.
Please either correct my or suggest some new way to do it!
After debugging, I found that in one of the js file included, there were a code
$(document).ajaxStop(function() {
window.location.reload();
});
Since, this code was making it to reload on every ajax call completes, I faced this issue.
I have a data table that represents data like this:
after clicking the edit marker (pencil icon) i can edit some fields. The fields need to be validated and if it fails the fields have to reset. I do this in the managed bean of the view using p:ajax event="rowEditInit" to save the attributes before saving and ajax event="rowEdit"to do the actual validation. if validation fails i return the previously saved values. if validation is correct i save the data to the database and load the collection again. Then i
RequestContext.getCurrentInstance().update("vesselBalticSegmentCreateForm")
to reload the view.
Doesnt matter if the validation fails and i set the values back or it succeeds and i save/reload data the table breaks becoming like this:
seems to load only the edited row. and loads both edit/list modes.
any ideas what i'm doing wrong?
The primeFaces RowEdit functionality already updates the row, also updating the table does by design not work (not sure if it is intentional, but that is just how it is). I know there is a duplicate of this Q/A on stackoverflow, I just do not seem to be able to find it. Someone might be able to create a patch/workaround, e.g. try on the prerenderview event to remove the id's of id's in the individual row that was edited. I don't have the time to try to create one.
I'm having real trouble finding any documentation on this.
I have a page that displays a list of users, above this i can edit the users successfuly with ajax. After the update, i want the table below to be updated with the new information.
How do i go about doing this? I'm thinking i need some sort of view that displays the data in a table, and i want to get that view's contents and inject it into my page, but i can't seem to find out how?
Can anyone point me in the right direction please
Put users table in div id like "Users" and do something like following in edit ajax success function call
$("#users").load("same_page_url #users");
I have the amazing SlickGrid configured to access data asynchronously and post user changes back to the server asynchronously. In general terms, the server may modify a few fields of a row based on the user's changes. As such, after the row is updated I would like SlickGrid to refresh only that row without changing the rest of the view.
Does anyone know how to do this?
In my case, the field that changes on the server is a timestamp associated with the record that is updated by a database trigger. If the timestamp is out of date, the user has an old copy of data, and if they submit changes, they may overwrite a new copy. Since I can't find a way to trigger a refresh, the user cannot modify their own changes without refreshing the browser window (forcing a complete refresh).
You should be able to do this using grid.invalidateRow() and grid.render(). SlickGrid will re-render the affceted rows (assuming they are displayed in the currently visible viewport) without refreshing the entire page.
// Mark row 42 as changed and re-render the display
grid.invalidateRow(42);
grid.render();
For an example check out SlickGrid Example 14. (Click the Start Simulation button to see it in action)
function updateSlickgrid() {
dataView.setItems(tableName);
grid.invalidate();
}
Note : tableName could be the array or id etc.
I prefer storing all the slickgrid data in the array ex tableName = [];
Keep using the above function when it comes to displaying the data in slickgrid
I have a web application which among other things contains a table of items created using an Ajax callback. A bunch of form fields at the top of the table allow me to filter the items that will be displayed in the table according to various criteria and show it.
Some parts of the table have lists of items with an [X] marked next to them that I can delete by clicking on those items.
Now, if I were doing this the non-ajax/javascript way, the page would receive a bunch of POSTed data fields and then would render the table accordingly. I can do this but I would also like to Ajaxify the entire setup. My questions are regarding this.
How would I create the [X] button. A simple <a> would "work" but it's a GET modifying state so I don't want to do that. The way I'm doing it now is a tiny form with a hidden parameter than holds the item to be deleted and a styled submit button that's the [x]. If I ajaxify this, I can get the response and do the needful.
How do I keep my backend DRY? I don't want to have two completely different bits of code for the Ajaxified version and the regular ones. What I'm doing right now is having the non-ajax version submit to a URL that changes the state and then redirects to the main page again (similar to a PRG type system). With the Ajax enabled, I simply call the URL and ignore the redirect but use the returned data to adjust the table. Is this the "right way"?
Any other advice on graceful degradation on how to keep my backend DRY?
I would put each row into it's own form (with method='POST'), and include a hidden field to say which item is to be deleted. The [X] would submit the form, and in the form's submit event, if no XmlHttpRequest is present simply submit the form to the server which would delete the item and redirect to the same page again (this is good practise to avoid a reload from resubmitting the delete POST).
If an XmlHttpRequest is present, set it up to POST with the id of the thing to delete and then remove the row if the request succeeded. You could set a flag in the AJAX request so that redirect doesn't happen, just a success (200 OK).