Close modal when class is present, stay open with another

I have a modal from W3schools with a shortcode in it from a plugin (Product page shipping calculator for WooCommerce) that is the shipping calculator form from Woocommerce.

On submit It checks for shipping methods available and if there are shipping methods available, print a message in a class that says shipping available and vice versa.

The PHP responsible for this:

    function getMessage(){
        $popup_function = get_option('pi_ppscw_address_form_working', 'save-location');
        if($popup_function == 'save-location'){
            $msg = __('Your details are saved','pisol-product-page-shipping-calculator-woocommerce');
        }elseif($popup_function == 'show-shipping-available'){
            $package = pisol_ppscw_product_page_calculator::get_shipping_packages();
            $zone = WC_Shipping_Zones::get_zone_matching_package( $package[0] );
            $shipping_methods = $zone->get_shipping_methods(true);
            if(empty($shipping_methods)){
                $msg = __('We do not provide shipping to this location', 'pisol-product-page-shipping-calculator-woocommerce');
                wp_send_json_error($this->errorTemplate($msg));
                return;
            }else{
$msg = __('We provide shipping to this location', 'pisol-product-page-shipping-calculator-woocommerce');

            }
        }

        wp_send_json_success($this->successTemplate($msg));
    }
    

    function errorTemplate($msg){
        $msg = strip_tags($msg);
        return '<div class="pi-address-form-error">'.$msg.'</div>';
    }

    function successTemplate($msg){
$msg = strip_tags($msg);
        return '<div class="pi-address-form-success">'.$msg.'</div>';
    }
}

I’m trying to close the modal when pi-address-form-success is added to the form:

<form class="pi-ppscw-address-form pi-vertical" action="https://denachtslijterij.nl/wp-admin/admin-ajax.php" method="post" _lpchecked="1">
        
        <div class="pi-address-form-fields">
                    <p class="form-row form-row-wide" id="calc_shipping_country_field">
                <select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state country_select" rel="calc_shipping_state">
                    <option value="default">Select a country / region…</option>
                    <option value="NL" selected="selected">Nederland</option>               </select>
            </p>
        
                    <p class="form-row form-row-wide" id="calc_shipping_state_field">
                                    <input type="hidden" name="calc_shipping_state" id="calc_shipping_state" placeholder="State / County">
                                </p>
        
                    <p class="form-row form-row-wide" id="calc_shipping_city_field">
                <input type="text" class="input-text" value="" placeholder="City" name="calc_shipping_city" id="calc_shipping_city">
            </p>
        
                    <p class="form-row form-row-wide" id="calc_shipping_postcode_field">
                <input type="text" class="input-text" value="" placeholder="Postcode, bv. 1234AB " name="calc_shipping_postcode" id="calc_shipping_postcode">
            </p>
        
        </div>
<div class="pi-ppscw-address-form-error"><div class="pi-address-form-success">We provide shipping to this location</div></div>
        <p class="pi-address-form-submit"><button type="submit" name="calc_shipping" value="1" class="button pisol-update-address-button">Check postcode</button></p>
        <input type="hidden" id="pisol-ppscw-address-form-nonce" name="pisol-ppscw-address-form-nonce" value="02cba97ea8"><input type="hidden" name="_wp_http_referer" value="/test/">  
    <input type="hidden" name="action" value="pisol_save_address_form">
</form>

Modal HTML:

<button id="location_btn">Open Modal</button>
<div id="location_modal" class="modal">
<div class="location_modal-content">
<div class="modal-header-2">
<span class="modal-title-2">Locatie</span>
<span class="close-2">×</span>
</div>
[pi_address_form]
</div>
</div>

I’m trying to add code after }else{ that closes the modal, but I have no idea if this is even possible. Because the response is added with AJAX.

So far I’ve tried:

<?
<style type="text/css">#location_modal{
display:none;
}</style>
<?php

<?
<script type="text/javascript">#location_modal{
jQuery('#location_modal').modal('show');
}</script>
<?php

And other variations. But nothing works. After clicking the modal stays open and the message does not get displayed.

Answer

I aksed the plugin creator for support, which I should have done in the first place. So for anyone looking for to close a modal using the shipping calculator form plugin:

        function pisol_custom_20210815() {
    
        $js = '
        jQuery(document).ready(function($){
        $(document).ajaxComplete(function (event, jqxhr, settings) {
            if (settings.data && settings.data.includes("action=pisol_save_address_form")) {
               if(jqxhr.responseJSON){
                    if(jqxhr.responseJSON.success){
                        setTimeout(function () {
                        jQuery("#location_modal").fadeOut();
                         }, 5000);
jQuery.magnificPopup.close()
                    }
               }
            }
        });
        });';
        wp_add_inline_script('jquery', $js, 'after');
    }
    add_action( 'wp_print_scripts', 'pisol_custom_20210815', 100 );

Code goes in child theme functions PHP file

Advertisement

Answer