Menu icon Foundation
Reveal Modal AJAX Request Within Wordpress

I'm using a Reveal Modal AJAX request within a Wordpress build to pull in other pages. So far, it's working swimmingly (see http://1st-stop.gingerly.co/our-locations and click any of the locations).

Now I'm attempting to pull in a Woocommerce product page, but have been coming up short on the same wonderful results. I can pull in the same content, but I can't get the add to cart form to work (see http://1st-stop.gingerly.co/enroll and click 'Product Test'). I know that the product works on it's own page (http://1st-stop.gingerly.co/enroll/30-hour-classroom-training) so it's an issue with the AJAX request.

What I gather is happening (and I'm willing to be wrong about this, but I did a lot of troubleshooting the other night) is that the wp_localize_script function within the Woocommerce template is not firing with the Reveal Modal AJAX. Here's my reasoning:

1) The page with the modal content is missing 5 scripts that the product page has.
2) One of the those scripts uses the wp_localize_script function to pull in variable content for the script file (see code below).
3) Wordpress has a very specific preferred method of using AJAX that I'm not sure the Reveal Modal follows, which could explain why the scripts aren't being loaded.

Here is the code from the WooCommerce booking plugin that does not appear to get fired (again, because I do not see those scripts on the modal page):

wp_enqueue_script( 'wc-bookings-booking-form', WC_BOOKINGS_PLUGIN_URL . '/assets/js/booking-form' . $suffix . '.js', array( 'jquery', 'jquery-blockui' ), WC_BOOKINGS_VERSION, true );
wp_localize_script( 'wc-bookings-booking-form', 'wc_bookings_booking_form', $wc_bookings_booking_form_args );

wp_register_script( 'wc-bookings-date-picker', WC_BOOKINGS_PLUGIN_URL . '/assets/js/date-picker' . $suffix . '.js', array( 'wc-bookings-booking-form', 'jquery-ui-datepicker' ), WC_BOOKINGS_VERSION, true );
wp_register_script( 'wc-bookings-month-picker', WC_BOOKINGS_PLUGIN_URL . '/assets/js/month-picker' . $suffix . '.js', array( 'wc-bookings-booking-form' ), WC_BOOKINGS_VERSION, true );
wp_register_script( 'wc-bookings-time-picker', WC_BOOKINGS_PLUGIN_URL . '/assets/js/time-picker' . $suffix . '.js', array( 'wc-bookings-booking-form' ), WC_BOOKINGS_VERSION, true );

// Variables for JS scripts
$booking_form_params = array(
	'ajax_url'              => $woocommerce->ajax_url(),
	'ajax_loader_url'       => apply_filters( 'woocommerce_ajax_loader_url', $woocommerce->plugin_url() . '/assets/images/[email protected]' ),
	'i18n_date_unavailable' => __( 'This date is unavailable', 'woocommerce-bookings' )
);

wp_localize_script( 'wc-bookings-booking-form', 'booking_form_params', apply_filters( 'booking_form_params', $booking_form_params ) );
            

         

Anyone dealt with something like this or can provide and tips to more forward? Let me know if I didn't explain my problem clearly enough. Thank you!

wordpressreveal modalAJAX

I'm using a Reveal Modal AJAX request within a Wordpress build to pull in other pages. So far, it's working swimmingly (see http://1st-stop.gingerly.co/our-locations and click any of the locations).

Now I'm attempting to pull in a Woocommerce product page, but have been coming up short on the same wonderful results. I can pull in the same content, but I can't get the add to cart form to work (see http://1st-stop.gingerly.co/enroll and click 'Product Test'). I know that the product works on it's own page (http://1st-stop.gingerly.co/enroll/30-hour-classroom-training) so it's an issue with the AJAX request.

What I gather is happening (and I'm willing to be wrong about this, but I did a lot of troubleshooting the other night) is that the wp_localize_script function within the Woocommerce template is not firing with the Reveal Modal AJAX. Here's my reasoning:

1) The page with the modal content is missing 5 scripts that the product page has.
2) One of the those scripts uses the wp_localize_script function to pull in variable content for the script file (see code below).
3) Wordpress has a very specific preferred method of using AJAX that I'm not sure the Reveal Modal follows, which could explain why the scripts aren't being loaded.

Here is the code from the WooCommerce booking plugin that does not appear to get fired (again, because I do not see those scripts on the modal page):

wp_enqueue_script( 'wc-bookings-booking-form', WC_BOOKINGS_PLUGIN_URL . '/assets/js/booking-form' . $suffix . '.js', array( 'jquery', 'jquery-blockui' ), WC_BOOKINGS_VERSION, true );
wp_localize_script( 'wc-bookings-booking-form', 'wc_bookings_booking_form', $wc_bookings_booking_form_args );

wp_register_script( 'wc-bookings-date-picker', WC_BOOKINGS_PLUGIN_URL . '/assets/js/date-picker' . $suffix . '.js', array( 'wc-bookings-booking-form', 'jquery-ui-datepicker' ), WC_BOOKINGS_VERSION, true );
wp_register_script( 'wc-bookings-month-picker', WC_BOOKINGS_PLUGIN_URL . '/assets/js/month-picker' . $suffix . '.js', array( 'wc-bookings-booking-form' ), WC_BOOKINGS_VERSION, true );
wp_register_script( 'wc-bookings-time-picker', WC_BOOKINGS_PLUGIN_URL . '/assets/js/time-picker' . $suffix . '.js', array( 'wc-bookings-booking-form' ), WC_BOOKINGS_VERSION, true );

// Variables for JS scripts
$booking_form_params = array(
	'ajax_url'              => $woocommerce->ajax_url(),
	'ajax_loader_url'       => apply_filters( 'woocommerce_ajax_loader_url', $woocommerce->plugin_url() . '/assets/images/[email protected]' ),
	'i18n_date_unavailable' => __( 'This date is unavailable', 'woocommerce-bookings' )
);

wp_localize_script( 'wc-bookings-booking-form', 'booking_form_params', apply_filters( 'booking_form_params', $booking_form_params ) );
            

         

Anyone dealt with something like this or can provide and tips to more forward? Let me know if I didn't explain my problem clearly enough. Thank you!

Phil Abi-Najm about 5 years ago

Did you ever find a solution for this? I've been racking my brain for this for a few days now myself. I've found that using wp_head() and wp_footer() around the ajax loaded content will allow it to work, but of course this re-registers/enqueues the scripts (which are already running) which eventually breaks the site after closing and reclicking the modal link. Not to mention that it takes forever to load the modal. Any guidance or workaround you've found would be helpful!