I am trying to:
Make a toggle button function without a page reload
I have created a button that checks if the post is added to a list of favorites (list of post ids in user profile)
The button (cred submit button on a loaded form with nothing visible except the submit button) appears when the post is not in their list.
A second button appears to remove them if they are added. Each button appears or his hidden based on conditional logic
This was a struggle but all works fine and dandy, except that, when AJAX is enabled on the user form, this conditional logic is not updated until the page is refreshed
So I thought I could simply do a javascript onclick function to add/remove a css class to apply (display:none or display: block )
Works like a charm. But only for a fraction of a second, and it seems the DOM reloads and reverts the CSS changes made in JS.
I guess my question is, how can I run the js function after ajax has updated the listing (post)
-or-
Is there another way to have the initial favorite button (user form) switch to another form, be hidden etc and show the "remove favorite button" (2nd user form) after it is clicked or form submitted?
I believe you have to be signed in for this to work but the link is at: hidden link
The "favorite" button is called "add to quote list" on the top left
Hi, there is no JavaScript API for Forms so I don't have a simple cut-and-paste solution for you. If you're comfortable writing custom JavaScript, you may be able to add a global AJAX event listener on this page and listen for the appropriate Form response. It's not covered in the scope of support we provide here in the forums, but you may be able to get some helpful information on the jQuery site: https://api.jquery.com/category/ajax/global-ajax-event-handlers/
If you add code to a Form's JS panel, you should wrap it in a document ready handler:
jQuery(document).ready(function($){
// add your custom Forms code here
});
Thank you for responding on the weekend. To fast-forward a bit I did try the jQuery ready function you have, which is where the events did happen, it's just that after the cred form is submitted, what happens in that function is un-done.
I will look into the global ajax event handlers today
Alternatively, I was wondering if the cred form could be submitted via JS.
ie) on a simple form you could have form.submit(); as a js function from another element
So I was curious if there is an alternate way to submit a cred user form using a js function, or should I consider not involving toolset in this process at all? The function only adds or removes a post-id to a custom user field so I open to any suggestions on the "best" way to do that whilst avoiding a page-reload. There are so many people posting problems getting a toggle-switch going I would love to get past this hurdle and share with others
Alternatively, I was wondering if the cred form could be submitted via JS.
As I said, there is no public JavaScript API for Forms, so if you want to control Form submission with JavaScript you will be on your own to figure this out: https://api.jquery.com/submit/
