Reload one component of the page after refresh

Hello,

I have an ajax post call that occurs on AfterEditStop. After the data gets saved in the database, I’d like to refresh this particular view on the page without reloading the entire page.

I thought I could achieve this with the refresh() function. However, if I navigate back and forth between the cells after ajax call goes through, the cell that I’ve just edited becomes selected continuously.

The only way I can get rid of it now is to reload the entire page, but I just want to refresh this one part that the user made changes to.

https://snippet.webix.com/bph9ooha

Any advice?

Best,
Linda

Hello @ljing, this is a pretty strange way to update the data from the server, to be honest. Is there any reason in particular why you don’t employ something similar to this example?

The selection gets stuck most likely because it is trying to select a non-existent element (since you are deleting the id fields, and the selection works based around ids). Unless you parse in new data or assign new ids (or change the way you handle the situation completely, akin to something from the example above) to the edited data, the selection won’t work properly.

Here is an example of manually changing the ids using the changeId() method: https://snippet.webix.com/9kmg9rdr.

The reason I wanted to do it this way is because I have a lot of tables that have very similar structure in terms of how I pull and submit the data. Is this generally not recommended?

@Dzmitry Thanks for providing the REST example. Is there a way to also use REST in a similar way for forms instead of datatable?

By “in a similar way” do you mean being able to specify the save property in a form too? Unfortunately, you will need to save the results manually by getting the form values and sending the appropriate request - https://snippet.webix.com/0ie98fy1.

Additionally, I’d like to elaborate a little bit more on my previous point:

this is a pretty strange way to update the data from the server, to be honest. Is there any reason in particular why you don’t employ something similar to this example?

And your post:

The reason I wanted to do it this way is because I have a lot of tables that have very similar structure in terms of how I pull and submit the data. Is this generally not recommended?

In general, the logic you were trying to implement is valid, and there is nothing wrong with it, but there is a far more convenient alternative.

Right now you are trying to manually handle the data updates while it is redundant in a way. You can define the save property which will point to your server-side script handling the requests. By specifying this property, you won’t have to update the item’s id, as it will be done automatically by the DataProcessor. The save property can be one of the following:

  • A link to your server-side script that will handle the data processing
  • A custom function which lets you alter the request object and more
  • A custom proxy object

By specifying a custom proxy object you will still be able to send out a custom AJAX POST request, but your items will get updated automatically from the server response data (provided that your response format is correct).

Here is one of the examples showcasing custom proxy object based on the built-in “rest” proxy - Webix Proxy Objects of Guides, Interacting with the Server Side Webix Docs.

Summing everything up, the most appropriate action to take is to use a custom proxy object and provide your custom logic inside of one. Here is a basic example using the initial snippet: Code Snippet.

Thank you so much for the detailed explanation!

From an API design point, is it better to be pointed at a specific API resource instead of a generic link like this one?

So it seems like the problem is not caused by how I am saving the data, but rather from this onKeyPress functionality from this snippet:

https://snippet.webix.com/b8242ed8

I get the same issue where any cell I’ve edited will now always be selected after data is saved to the server unless I refresh the page.

^Correction: it’s not related to that.

I still the same issue where the page bugs out even using customSave after the data is committed to the server.

Hi @Dzmitry, I used the custom proxy object, and now there seems to be another problem where the custom save is not getting triggered if I edit the same cell twice without refreshing the page.

The first edit will get committed, the second edit will not even trigger the webix.proxy.customSave component.

I tried replicating what I have here, but the ajax call doesn’t seem to update the sample data here.

https://snippet.webix.com/2xnzxzrr

Best,
Linda

Hello @ljing,

I tried replicating what I have here, but the ajax call doesn’t seem to update the sample data here.

Here is the fixed snippet: Code Snippet. The type of the operation dictates the type of the request that has to be sent (and the relative path), at least that is how it is with this particular backend set-up.

The first edit will get committed, the second edit will not even trigger the webix.proxy.customSave component.

The reason this is happening is because you are deleting the id of your item, and the appropriate handlers aren’t triggering correctly, there is no need in deleting that id, as it will be replaced with the new id that comes from the server response