Ajax modal popup

  • Resolved nic0ps

    (@nic0ps)


    6 years, 1 month ago

    Hi I’m Nicola,
    first of all thank you for this plugin.

    My problem is that I have a cf7 form loaded with Ajax from a calendar’s event.
    So when an event is clicked, the form will print into a modal (bootstrap).

    The CF7 is triggered in a function inside functions.php with:

    $output = do_shortcode('[contact-form-7 id="'.$id.'"  html_class="cf7_custom_style_1"]');
echo $output;

    and wpcf7.initForm is initialized with a js inside the same function:

    jQuery('.wpcf7 > form').each(function(){
  var $form = jQuery(this);
  wpcf7.initForm($form);
  if(wpcf7.cached){ wpcf7.refill($form);}
});

    All seems to work eccept for conditional fields.
    So I reload conditional fields scripts.js after the wpcf7 is fired like this:
    jQuery.getScript('../../../wp-content/plugins/cf7-conditional-fields/js/scripts.js',function(){});

    This method get everything works, but I don’t think that is a good workaround.

    I’ve also tried with a js that load the script once instead of load it every time, but the form work just the first time. If I dismiss it and open it again from the event the conditional fields stop work.

    I hope that I was clear enough, unfortunately I can’t provide a link with the page because it’s in a dev test domain.

    Thanks, hope to hear from you a solution.
    Bests

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    Thanks for reporting. This is something I will need to test. Will close this and follow up the issue here: https://github.com/pwkip/contact-form-7-conditional-fields/issues/25

    obawire

    (@obawire)

    Hi @nic0ps I am having this issue as well, can you please explain how you applied the code in your workaround solution?

    This one here jQuery.getScript('../../../wp-content/plugins/cf7-conditional-fields/js/scripts.js',function(){});

    Thanks!

    Thread Starter nic0ps

    (@nic0ps)

    I’ve made an action and a function inside functions.php. Then i run the script inside the function, where you call wpcf7.initForm and reload CF7 conditional fields plugin

    
add_action('wp_ajax_get_event_form', 'get_event_form');
add_action('wp_ajax_nopriv_get_event_form', 'get_event_form');
function get_event_form() {

	/* do your php code, query etc. */

	?>
	<script>
		// Init CF7
		// because is ajax reload wpcf7.initForm
	
		jQuery('.wpcf7 > form').each(function () {
			var $form = jQuery(this);
			wpcf7.initForm($form);
			if (wpcf7.cached) {
				wpcf7.refill($form);
			}
		});

		//load cf7 conditional fields at the end
		jQuery.getScript('../../../wp-content/plugins/cf7-conditional-fields/js/scripts.js', function () {
		});

	</script>
	<?php
	wp_die();
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Ajax modal popup’ is closed to new replies.