Saltar navegación

[Resuelto] Reloading page after successful form submission using AJAX and Javascript

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem:

I have implemented LIKE and UNLIKE buttons on a post page, where the LIKE button submits a form to create a CPT using a page reload, and the UNLIKE button deletes the CPT without a page scroll due to AJAX. I want to improve the UX by using JavaScript for a page refresh upon successful form submission.

Solution:

To reload the page after a successful form submission without a clunky scroll, use jQuery’s ajaxComplete event to trigger a JavaScript reload. This will refresh the page only after the AJAX request completes.

This approach triggers a refresh right after the AJAX completion, maintaining the user's scroll position.

Relevant Documentation:

https://api.jquery.com/ajaxComplete/

This support ticket is created hace 3 meses, 1 semana. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Este tema contiene 3 respuestas, tiene 2 mensajes.

Última actualización por Christopher Amirian hace 3 meses.

Asistido por: Christopher Amirian.

Autor
Mensajes
#2779368

Hello

Is it possible to use Javascript to do a page refresh upon successful Form submission?

I have implemented a simple LIKE and UNLIKE button on a post page which creates and deletes a CPT called 'Like'.

The LIKE button submits the form and I currently do not use AJAX and reload the page, using PHP to scroll back down to where the LIKE button was inserted in the page. This works, but is a little clunky.

The UNLIKE button uses the [cred-delete-post] shortcode:

[cred-delete-post action='delete' onsuccess='self' class='btn btn-primary btn-sm']Unlike[/cred-delete-post]

And this deletes the 'Like' CPT and reloads the page without scrolling, presumably using AJAX and Javascript - which is great!

I have tried setting the form (8139) to use AJAX and using the following JS in the view that displays the button.

jQuery('form#cred_form_8139_1_1').submit(function() {
window.location.reload();
});

Many Thanks

Gavin

#2779551

Christopher Amirian
Supporter

Idiomas: Inglés (English )

Hi,

May I know what you mean by page refresh? You mean the browser reloading the page? If so it will be still that clunky way that you have mentioned.

But it is possible to add a Javascript after the Ajax is complete. But I am not sure what you want to do after that is triggered.

In general you can use the jQuery AjaxComplete event on the page that contains the form and it will trigger after the Ajax completes the job.

Thanks.

#2779563

Thanks Christopher. Yes, a page reload.

When I use the Cred 'delete' post it doesn't seem to scroll down but simply reload and re-appear in the same position.

I will try using jQuery AjaxComplete and see if that works.

Gavin

#2779607

Christopher Amirian
Supporter

Idiomas: Inglés (English )

Hi Gavin,

Sure you can learn more about ajaxcomplete here:

enlace oculto

Thanks.

#2779811

Thanks Christopher.