[Gelöst] How to reload a view via ajax after submitting a form

[Author]

Artikel

[alexG-4]

I have a page showing table-view of all posts in a CPT.

There is an Add New form on the page, and each post has its own Edit form that can be displayed.

I want the table-view to re-load view Ajax when any of the forms is successfully submitted.

I can't find any documentation on how to go about this, although I'd have thought it's not an uncommon use-case.

The closest I found to an answer was this post

https://toolset.com/forums/topic/ajax-load-view/

with quite a comprehensive (and non-trivial) solution by emmdub

My question is this:

Is the method described in that post the one I should be following, or is there some other approach whose documentation I've missed?

Thanks.

[Luo Yang]

Hello,

There isn't such a built-in feature within Toolset form plugin, as you can see, the AJAX form can refresh the area of form content.

You can add a feature request for it:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Our developers will evaluate it.

As a workaround, you can edit your post form, in section "Form editor", add a "HTML element", in this HTML element, display the post view's shortcode, for example:
[wpv-view id="1234"]

It should be refreshed too, after user submits the post form.

[alexG-4]

Hello Luo

That's not a viable workaround for many reasons, I'm afraid.

Here's a video where I show what I want, and I mention a new idea that just occurred to me

versteckter Link

(Note - on the video I sometimes say "update the form" where I mean "update the view/table")

As I say on the video, all the mechanisms for re-loading the view are already available because I have a Search/Filter panel on the page that uses Ajax.

I think all I need is a way to make my Form submit button trigger the same Ajax code as does the Search/Filter submit button.

I looked at the classes on the Search/Filter submit button (js-wpv-submit-trigger wpv-submit-trigger) and added those classes to my Form submit button, but that wasn't enough.

Is there something along those lines that will work?

Thanks.

[Luo Yang]

Thanks for the details, as I mentioned above, there isn't such a built-in feature within Toolset form plugin.

For the new question:
I think all I need is a way to make my Form submit button trigger the same Ajax code as does the Search/Filter submit button.

It needs custom JS codes, for example, you can edit your post form for creating post:
1) Option "After visitors submit this form" choose "Keep displaying this form"
2) use the JS event "cred_form_ready" to trigger a custom JS function:

jQuery(document).on('cred_form_ready', function(){
  // add your code here using jQuery instead of $
});

Event "cred_form_ready" will be able to triggered after you submit the form, the post form loaded again.

2) In this function, Use JS codes to click the submit button of post view:
versteckter Link

[alexG-4]

Thanks, Luo

That's an interesting alternative approach.

I got it working but it's not the solution I need.

Since I have an Edit form associated with each post being displayed in the View, and since .on(cred_form_read) triggers when each form is loaded, I get the View being re-loaded once for every post in the View whenever I load the page.

I really need an event trigger that's associated with the form's submission being complete.

As a workaround, this seems to work:

jQuery(".btn-reload-trigger").click(function(){
  
  setTimeout(function(){ 
       jQuery( "input[name='wpv_filter_submit']" ).click(); // This is the Search/Filter submit button
    }, 2000);  
});

But I regard it as a bit of a hack.

Is there an alternative to using .cred-form_ready which triggers when the form submission is complete?

I've not been able to find one.

[Luo Yang]

For the question:
Is there an alternative to using .cred-form_ready which triggers when the form submission is complete?

As you can see, there isn't built-in feature within Toolset forms plugin, It needs custom codes, according to our support policy, we don't provide custom code support:
https://toolset.com/toolset-support-policy/

Please add a feature request for it:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[alexG-4]