Skip Navigation

[Resolved] show cred form and a view called with ajax call or with elementor popup

This support ticket is created 3 years, 11 months ago. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

Author
Posts
#1856989
Screen Shot 2020-11-25 at 3.08.22 PM.png

i have a view with a search select filter from a rel' parent CPT name 'cities'.
the view output a select with options from a CPT 'streets' filtered by the parent 'city' filter.
the 2 select elements is upgraded with custom js (using toolset_select2()) using the js editor in the filter section.
the 2 selections update 2 hidden select cred fields in a CRED form.

i used the shortcodes on a page content and it works 🙂 great.

when i use the shortcodes on a content template of elementor that opened thrgh ajax popup loader or call the page content using ajax call to the template "the_content" my view and form doesn't init proper, noor does the included js editor code scripts (on the view's filter js editor) - scripts are not in the DOM

the view filter select element and the "auto ajax update" doesn't work or initiated

if i use elementor with JET popup addon, using the view/forms widget to add the form and the view to the popup template - it doesn't work as well and i also get an extra text :
"This is the preview of the "Streets Select Field filtered by Cities" View."

===== >>>>

how can i make sure that toolset code and elements\views\forms will work, render and initiated (the js mechanism behind it) properly when:

called by custom ajax (into a modal-popup)
or by ELEMENTOR toolset-widgets in an ELEMENTOR content-template of JET POPUP addon?

more info:

the custom ajax call i'm using to display posts\pages\CPTs-pages in a modal is limited to content inside a container (as in... <div id="modal-ready"> content </div>) or to "the_content" in a php template.

js document ready codes doesn't seems to run (well the doc is already "ready" so nothing is initialized)

can you help me please with checking why the view&form isn't rendering with proper init and included custom js from the view editor?

one of the things i thought about is using wp_enqueue_script (to enq some custom needed code) with a dep' of the toolset codes so when they will be forced to be enqueue then they will render and init the view and form properly - by adding the toolset scripts handles in the wp_enqueue_script dependency array :

----------------------- example --------------------------
/**
* Enqueue a script with JQUERY and TOOLSET libraries as a dependency.
*/
function toolset_scripts_method() {
wp_enqueue_script( 'custom-toolset-script', get_stylesheet_directory_uri() . '/js/custom_toolset_script.js', array( 'jquery','<???toolset view and cred init script handles???>' ) );
}
add_action( 'wp_enqueue_scripts', 'toolset_scripts_method' );

#1857511

Hi,

Thank you for contacting us and I'd be happy to assist.

We have some internal tickets already to improve how Toolset Forms and their resources are loaded and initiated on the front-end, especially for the cases, where they're loaded through AJAX and are not loaded with the page.

For now, you can use any of the following workarounds:

1. Just before loading the form through AJAX or a popup that uses AJAX, you can execute the action "toolset_forms_enqueue_frontend_form_assets", as suggested in this errata entry:
https://toolset.com/errata/forms-not-working-correctly-when-rendering-them-using-the-cred_form-php-function/

OR

2. As an alternative to the popups that loads the content through AJAX, you can either use Bootstrap's built-in modal feature ( ref: hidden link ) or use any other third-party popup maker plugin which doesn't load the content, dynamically (using AJAX ).

Example:
Popups - WordPress Popup
( https://wordpress.org/plugins/popups/ )

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar