[Resolved] AJAX CRED form submit

[Author]

Posts

[adamP]

I am loading a CRED form via ajax, utilizing a "view" to get the single post, and inside that view it is referencing the CRED shortcode. I have the ajax call setup according to some of the other posts on here. I've got all the loading figured out, and it is working very well, except for one thing: the javascript and validation do not load.

I'm guessing these are created at time of page load, so pulling in ajax content will be void of needed javascript for validation and date-picker, etc. So is there a way to pull in the needed info along with the CRED form?

Thanks

[Beda]

CRED does not support AJAX Loading or Submit of it's forms yet.

This is under development and will be shipped din one of our future releases, but for now, every Custom Code that allows you to load CRED with AJAX, is provided as is and not supported or troubleshooted.

I myself created a workaround some time ago that works very fine, also with the CRED API - note that I never actually tested validation API; but it should also work in that case.

CRED Submitting Forms via AJAX is possible with this slight JS script. Note that this does ONLY submit the form and NOT replace the form with the Post (show post). That is only partially possible and causes issues on Loops (View), there fore it did not make it to this Code snippet.

Download and add to your theme:
hidden link

Add to your Functions PHP:

wp_enqueue_script("jquery");
wp_enqueue_script( 'jquery-form-js', get_template_directory_uri() . '/js/jquery.form.js', array('jquery'), '3.51.0-2014.06.20', true );

In any SINGLE CRED form JS Editor:

jQuery(document).ready(function() { 
            
            jQuery('#cred_form_4988_1').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 

Replace #cred_form_4988_1 with the actual ID of the CRED Form you’ll see in your browser console asa in this:

<form enctype="multipart/form-data" id="cred_form_4988_1" class="cred-form cred-keep-original" action="/toolset/2015/07/08/ajax-edit/?cred-edit-form=4988&_tt=1436396327" method="post">

If you have MULTIPLE CRED FORMS (of same form), outputted in a Views Loop
Means, you got x posts, and therefore x CRED Forms of same type,the ID of CRED is continuously increased by one, so the a above jQuery breaks. You should use here:

jQuery(document).ready(function() { 
jQuery("[id^=cred_form_1096]").ajaxForm(function() { 
    alert("Thank you for your comment!"); 
}); 
}); 

We use now ("[id^=PART_OF_ID]")

You can also seek for all elements which contain (*=) or end up with ($=) known part of ID/class/type.
(example, id^, id*, id$)

DOC Links:
hidden link
hidden link

Note that above approach is NOT working properly on a View with many Posts, it means, some additional tweaks are needed.

As mentioned, I can not assist this sort of Custom coding as it goes into adding new features to CRED, which is something the DEV takes care of, in it's individual Road Map.

[adamP]

Thank you Beda. I am not needing to submit the form via ajax though (although that would be nice). I am ok with it refreshing the page.

I am just trying to load in a form via ajax. I have a list of many posts, and want an "edit" form for each, without embedding numerous forms on load, and without redirecting to an edit page. So I was going to ajax load the form into a modal once the post was clicked on. I have the loading down fine, I just need the validation/jquery ui to come along with it. So I wondered if there was a way to call these scripts with the ajax load so that they would be bound to the newly loaded cred form.

Thanks

[Beda]

No, there is no such script.

I unterstand what you are doing, I did that recently with a few Views, which I did not want to load all on page load but only on Click (on a tab)

I must warn you, AJAX is tricky here and you will find that many things break.

It's not a supported feature and requires advanced Custom Code.
We do not provide any Hooks to load things this way.

But I might ask, since it seems you have a View with many Posts, why don't you Load the CRED Edit Form in a Modal, it should not delay your loading times massively.

With this I mean, you can insert in the View's Loop the Button to your Modal where the CRED is inserted (in the Modal's Body)
This should work just fine.

I assume you created a PHP template where you insert the CRED and load that template via AJAX into your Modal, right now, is this correct?

I am doing the exact same with the Views I mentioned above (in tabs) and as said, I am loosing things on the way, if as example Search is updated via AJAX.

It's not a supported method, and would require Custom Code.

I apologize tha the only solution I can present is the one by loading the CRED directly in the Modals.

Thank you for understanding

[adamP]

Thanks for the reply.
Loading the cred forms in a modal is how I originally had it setup. I just didn't think it would be wise to render 20-30 forms for the amount of posts that will display. I figured it would cause performance issues. So that is why I was going to try loading the forms via ajax.

If you don't think it will cause performance issues, then I will leave it as is, with each post in the loop rendering a cred form in a hidden modal, activated by a button.

Thanks

[Beda]

I don't think it will crate massive performance issues.

I had made some tests in past, where I inserted a CRED Edit form and yes, you will have a slight increase of Load times, but it was acceptable.

Are you displaying 20/30 posts with ONE Form each, or 20/30 Forms EACH post and MANY posts?

In second case, I would also be concerned about performance.

In the first Case I don't see a problem.

You could as well paginate, this would decrease the first Load, if you then play with the View's cache and pre-load options you can optimize this even more.
https://toolset.com/documentation/user-guides/how-to-use-views-parametric-search-on-large-sites/

Thank you

[adamP]

Thanks. It will be 1 edit form per post.
I have setup pagination as well to reduce the load to fewer posts at a time.

Thanks for the help

[Beda]

Thanks for the update.

I don't fear any Bottlenecks in performance in this case.

If you consider this solved, you can mark the Thread as such.

Thank you

[adamP]

resolved... sort of