Skip to content

Instantly share code, notes, and snippets.

@stracker-phil
Last active April 18, 2024 18:12
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save stracker-phil/14f8b99c5d6d4133b7e8eda062ba0229 to your computer and use it in GitHub Desktop.
Save stracker-phil/14f8b99c5d6d4133b7e8eda062ba0229 to your computer and use it in GitHub Desktop.
Load Forminator Form via Ajax
// This JS file is loaded by the theme:
(function() {
// The button with the CSS class "get-support" loads the form.
jQuery('.get-support').on('click', load_support_form);
// The form is displayed in a div tag with the CSS class "support-form".
function load_support_form() {
jQuery.get('/wp-admin/admin-ajax.php?action=my_get_support')
.then(function(response) {
jQuery('.support-form').html(response.data);
});
}
})();
<?php
// The following Ajax handler is inside a loaded PHP file,
// such as a plugin, or in this sample, the functions.php file.
add_action('wp_ajax_my_get_support', 'ajax_my_get_support');
/**
* Ajax handler that gernates the form with all
* required JS files and CSS rules.
*/
function ajax_my_get_support() {
// Forminator needs the DOING_AJAX flag to
// correctly enqueue everything.
if ( ! defined( 'DOING_AJAX' ) ) {
define( 'DOING_AJAX', true );
}
if ( ! defined( 'WP_ADMIN' ) ) {
define( 'WP_ADMIN', true );
}
ob_start();
echo do_shortcode('[forminator_form id="1234"]');
// Add the JS files and inline styles, etc.
// Since this is an ajax request, this should only
// output Forminator-related code.
print_head_scripts();
do_action( 'wp_footer' );
print_late_styles();
print_footer_scripts();
$code = ob_get_clean();
wp_send_json_success( $code );
}
@dleigh
Copy link

dleigh commented Apr 17, 2024

Hey Phil,
This may be just what I need! My big question is (and I'm sure I'm missing something), if you have an "add_action" for "wp_ajax_my_get_support", doesn't there need to be a "do_action" also with the name "wp_ajax_my_get_support"? If so, where would that be, if not, why not?
Thanks for any help!
David

@dleigh
Copy link

dleigh commented Apr 17, 2024

Be gentle...
...does the ajax call from the JS act as the "do_action" in this case?

@stracker-phil
Copy link
Author

Hey @dleigh - the wp_ajax_<action> hook is a special action provided by WordPress itself. You do not need to register an action with that name.

<?php
add_action('wp_ajax_my_get_support', 'ajax_my_get_support');

// You could also write it like this:
$js_action = 'my_get_support';
add_action('wp_ajax_' . $js_action, 'ajax_my_get_support');

The above action is called, when you make an HTTP request from your browser to the admin-ajax.php path and provide the action: "my_get_support" parameter. I.e. the following JavaScript line triggers that action for you:

...
// Note: The special endpoint "admin-ajax.php" and the action that is "my_get_support"
// The action MUST be identical with the $js_action value from the action name in PHP
jQuery.get('/wp-admin/admin-ajax.php?action=my_get_support')
...

Hopefully, this makes the connection between JS and PHP a bit clearer for you.

Also, you might want to check out the official documentation with a lot more details here:

@dleigh
Copy link

dleigh commented Apr 18, 2024

@stracker-phil Thanks so much!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment