Javascript: 'Light' table refresh after inline edit

API & Customization
1

Hi all,
I was wondering if anyone knows the javascript command to refresh a table or view after an inline edit (or submission of a modal popup form, for that matter). I don't want to use 'location.reload();' as I'd rather not have to reload the full web page.

Currently, when an inline edit is made conditional formatting, data source rules, grouped headers, etc. will not automatically update. I've gotten around this by having a filter button at the top of the table which is a random field set to 'view any' and I have named it refresh table. When you click it - it has the effect of refreshing the table without needing to reload the entire web page. I was wondering if there was a command to do the same thing so I could get rid of the button / extra step.

Basically:

$(document).on('knack-cell-update.view_X', function(event, view, record) {
  // required code to lightly refresh the table
  instert code here to refresh view / table::
});

Thanks!

Adam

2

Hi there, I am new to Knack and trying to figure this out. However, I can't seem to figure out which Knack() methods to use.

Where do you find these for example:?

Knack.router.scene_view.renderViews()

It seems like this rendering doesn't work (anymore) ? At least, it's not triggering any refresh on my side.

Thank you

3

Thank you Connor!

4

So I finally have a working solution to refresh the current scene upon an action in your live app. It's a really clean refresh, as it doesn't refresh the whole webpage, put just that particular scene. By refreshing the scene, the Page Rules are applied again upon the refresh, so any record updates etc. will be reflected in any page rules you have set. Discovered this great bit of code on this post here: https://support.knack.com/hc/en-us/community/posts/360050441592-Reload-or-Refresh?page=1#community_comment_360013730312 

Snippet of how i've applied it to my Javascript section:

$(document).on('knack-record-update.view_2855', function(event, view, data) {

setTimeout(function () { location.hash = location.hash + "#"; }, 12000);

alert("Please wait while we fetch the Invoice from Autoline. Click 'OK' & this page will refresh in a few moments...");

Knack.showSpinner();

});

So on form submission, this displays an alert, and then refreshes the scene (along with all the views in the background) after the specified delay.

Hope this helps!

5

Hi 8947499407

Thanks, i tried both solutions but to no avail.

Tony's worked well in terms of refreshing every view on that scene, however i need to refresh the whole scene. That way all of the Page Rules etc. that are set up for that scene will be triggered again following the form submission and a slight delay that i add.

So as things stand I'm still looking for the solution that will refresh the current scene (or a scene you can specify in the code) on Form Submission.

Thank you for your help though, much appreciated!

6

Doesn't need a scene key I think.

Here's another option to try (courtesy of 369481659772):

Knack.router.scene_view.renderViews()
7

Hi 8947499407

I can certainly give that a go and let you know.

How/where would i specify the specific Scene Key to refresh in that? Sorry, my coding knowledge is basic at best!

8

Does Knack.scenes.fetch() work?

Haven't tested it at all...

9

Hi 8889648067 & 116327430271

Thanks for sharing that code. Would you happen to know how to refresh the current scene upon form submission?

At the moment i have a location.reload set up, however, i'd much rather just refresh the scene rather than the whole page. It's causing some login issues as it's an app embedded within an app essentially.

 

My current code:

$(document).on('knack-record-update.view_2855', function(event, view, data) {

setTimeout(function () { location.reload(true); }, 8000);

alert("Please wait while we fetch the Invoice from Autoline. Click 'OK' & this page will refresh shortly...");

Knack.showSpinner();

});

 

Any ideas how i can amend this to reload the scene only? Wasn't sure if something like this could work for a scene... Knack.scene[scene_2].model.fetch();

 

Thanks in advance for your help!

10

8882402508

 

Just use 'any'

 

$(document).on('knack-cell-update.view_xx', function(event, view, record) {
Knack.views[any].model.fetch();

});

11

What I mean Alex is that .view_1 update may require a refresh on view_1 where .view_2 may require a refresh on .view_2

In the code above an update to either View refreshes only the one specific View in the model.fetch()

12

@Dean, can you clarify what you mean by "the same Knack.views[view.key].model.fetch(); statement."? Do you mean this:

$(document).on('knack-cell-update.view_1 knack-cell-update.view_2', function(event, view, record) {
  Knack.views[view.key].model.fetch();
});

is the same as this:

$(document).on('knack-cell-update.view_1 knack-cell-update.view_2', function(event, view, record) {
  Knack.views[view_1].model.fetch();
});

If not, what does view.key evaluate to in the first codeblock? I.e., which view will update after the cell in that view updates?

13

If you do put in multiple 'knack-cell-update.view_1 knack-cell-update.view_2', statements they all fire the same Knack.views[view.key].model.fetch(); statement. And if you try to stack the statements it won't work so I had to separate each table update into its own code section.

$(document).on('knack-cell-update.view_1', function(event, view, record) {
Knack.views[view_1].model.fetch();

});

$(document).on('knack-cell-update.view_2', function(event, view, record) {
Knack.views[view_2].model.fetch();

});

 

14

Not sure this is needed anymore, but you can just space them out, as with a typical .on() function in JQuery. So, like this:

$(document).on('knack-cell-update.view_1 knack-cell-update.view_2', function(event, view, record) {
Knack.views[view.key].model.fetch();

});

15

Hi All,

I'm using the code on the bottom and it works perfectly. 

However, I have many tables that I would like to insert in the code. Right now, Im duplicating the code line, but was wondering if there is a way to add to the code multiple views and how can I do that.


$(document).on('knack-cell-update.view_1661', function(event, view, record) {
Knack.views["view_1661"].model.fetch();

});

16

David,

 

That is most likely caused by an overall error on the page.  The example posted above was missing the semi-colon at the end.  That could be your problem.

Knack.views["view_223"].model.fetch() 

Try this one:

Knack.views["view_223"].model.fetch();

17

Hey David.

Do you mean once you trigger the event  (e.g. submit an inline edit) things disappear? Or the page is blank so long as the code is in there?


Would you mind posting the full Javascript?

Adam

18

Hey,
Thank you!

I tried that, but when I put that line in the Javascript - i can't see anything in the page.
Do you now why?

Its will realy help me.
Thank you

screenshot:





19

Thanks for sharing Eliezer.

20

Works like a charm. Thanks very much!