Upon form submission: Refresh Current Page

Feature Requests
1

Problem:
Data should be updated live and persistent in every view

Original Forum Post:
Upon form submission: Refresh Current Page
The Submit Rules options are great. But unless I'm not seeing it, there's no option to simply "reload current page." There's parent and there's redirects. I have a lot of little forms (eg, a ratings widget) embedded on pages. For most of these form submissions, the user must manually refresh to see their results reflected in the count. Probably because they're embedded, these pages don't appear as options for "Redirect to an existing page". Would love a simple "Reload" option. Thanks.


1 Like
2

Here is another way.

My problem was that I had a modal form that I wanted to allow resubmits on, so I wanted to reload the form yet the data in the table underneath it to update with each submission. The code will “fetch” the table data after form submission.

View_xx is the form that’s adding the record.
View_yy is the table view.

/*Refreshes the table after new submission added*/
$(document).on('knack-form-submit.view_xx', function(event, view, record){
Knack.views["view_yy"].model.fetch();
});

Thanks to Carl for his help on this! I hope others may benefit.
3

Thanks for sharing that code. Would anyone 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?

Thanks in advance for your help!

4

I ended up using the code below to force the redirect to the parent page AND refresh the filtering.  

1) letting the app redirect to the parent page the normal way did refresh the data in the records of the parent table view; it just wasn't reapplying the FILTERS to the whole view. 

2) this did not work properly until I added the true argument.

3) I also tried triggering it on knack-form-submit and it wasn't working when I was editing records (with a form).

4) The code below didn't work properly when Adding New, but I used the built-in submit rules to handle that, based on criteria.

$(document).on('knack-record-update.view_4', function(event, view, record) {
    window.location = "https://MyUrlOfParentPageGoesHere/";
    location.reload(true);
});

5

I agree, we have many views which filter out certain records. It would be nice if the page would refresh after a record is edited in a way which disqualifies it from the filter.

6

REFRESH VIEWS WITHOUT PAGE REFRESH IS POSSIBLE

Hey there is a work around / fix to this... what you have to do is use 2 JavaScripts... the first one adds an ID to the search button of the view you want to refresh.  You can refresh multiple views on one page by using different IDS. We are basically going to simulate a search button click which will in turn cause a "knack view refresh".  It does not matter if there is text or no text in the search box.  It will work fine since the content of the box is persistent.

 

STEP 1: Add ID to search button you want to target!

$(document).on('knack-view-render.view_99', function(event, view, data) {
$(".table-keyword-search a.small.kn-button.gray").attr("ID", "search-button-click");
});

OR if you want to hit a specific view make sure to add the ID

$(document).on('knack-view-render.view_99', function(event, view, data) {
$("#view_99 .table-keyword-search a.small.kn-button.gray").attr("ID", "search-button-click");
});

Note: Inspect code to make sure the ID got added to the right place

 

STEP 2: Attach onclick event to trigger element such as submit button, close button or anything you can get to by CSS

Now you have to attach an on-click event to objects such as buttons or html... so when you submit a form or update inline, the on-click gets executed against the ID.  You can this way submit a form on view 56 but update view 99

$(document).on('knack-view-render.view_56', function(event, view, data) {
$("#view_56 .kn-submit input").attr("onclick", "parent.document.getElementById('search-button-click').click();");
});

Note: Inspect code to make sure the ONCLICK got added to the right place

 

 

This will refresh knack AND not the page by triggering the search button on any view header which looks just like a quick update.  If you do not want a visible search box, then you have to use custom css to make it's opacity, height and overflow 0.  If you set it to display:none it will not work.

You can also use other scripts, such as when a record gets updated, it triggers the search ID.  You could use a script where an inline field is updated, it triggers the search ID.  But the idea is trigger the search button at the end of anything, and it will do this quick view refresh.  It honestly looks legit and much better then a slow annoying page refresh.

I used this one on a project in conjunction with pulling the knack record IDs.  This allowed me to open a record in a custom side drawer instead of knacks modal, running the app in an iframe of coarse.  When i click the close button on the animated drawer, it closes by sliding off the screen and then triggers the search button to refresh the page behind it.  

7

I've found that if you have the link in a modal window, returning to the parent page, the parent page will reload upon form submission.

8

Luke,

 

Did you ever find a solution to your problem?  I am in the same boat.

 

9

Luke:

I am needing help figuring out a way to refresh the parent page after submitting a form from the previous page.

I submit a form and direct the user to go to the parent page.  Although, it is not refreshing the table on the parent page.  I have tried several ways of accomplishing this with no luck.

Thank you.

10

Thanks for this Luke.  Still helping folks 9 months later.  Beautiful answer

11

I just shed a happy tear for this solution - thanks!

12

Luke, you are the man.

I've found this also works if you insert a link in the "Successfully submitted "text area.

13

that will automatically refresh page on form submit...

14

I have developed a work-around for this.

 

On the form submit rules, "redirect to another website url" and put    javascript:location.reload(true)

1 Like
15

Agreed.

While not elegant, it can be accomplished with JavaScript:

 

$(document).on('knack-record-update.view_1', function(envent, view, record) {
  location.reload();
});

 Make sure you update the view to correspond to your application. 

I've created a form to update the given record with no fields in it, and used the options to change the SUBMIT button to read RELOAD. I'm directing users to click this button after updated field values in-line in a table. They can manually refresh the page, but I have form rules connected to the RELOAD button, so here's hoping they use that instead of the refresh button on their browser.

16

I have a lot of the fields stay the same from submit to submit as the details on the record are the same except for a few of the fields. Ideally I would want the common fields to be re-loaded as per the previous page and the fields that need updating would be blank ready for input of new data.

We had this programmed into an inhouse solution which worked very well so it would be an extremely useful addition here .... PLEASE

17

I'd agree. The option to reload a form already exists but this would be a useful addition. 

18

I'd really like this option too. I've had to move to taking user to a separate page for tiny edits when refreshing the current page would look so much slicker

19

Amazing: simple and works perfectly. No idea how you ever figured that out, but nice one!

20

Thank you!