当class存在时关闭模态，另一个保持打开状态

Question

我有一个来自W3schools的模态，其中有一个短代码，来自一个插件(WooCommerce的产品页面运输计算器)，这是WooCommerce的运输计算器形式。

On submit它检查可用的装运方法，如果有可用的装运方法，在类中打印一条消息说装运可用，反之亦然。

负责此操作的PHP:

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>';
}
}

当pi-address-form-success被添加到表单时，我试图关闭模态:

<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>

模态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>

我试图在}else{关闭模态后添加代码，但我不知道这是否可能。因为响应是用AJAX添加的。

到目前为止，我已经试过了:

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

和其他变量。但什么都没用。单击后，模式保持打开状态，并且不显示消息。

Answer 1

我请求插件创建者提供支持，这是我一开始就应该做的。所以对于任何想要使用shipping calculator表单插件关闭一个模态的人:

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 );

代码放入子主题函数PHP文件