For the cart page I have a modal to select address from and below is the code I am providing for the code of the modal :
<div class="modal fade" id="selectAccount" aria-labelledby="selectAccountLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="selectAccountLabel">Select Account & Address</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="javascript:void(0);" method="post">
<div class="form-group">
<label for="select-account">Select Company</label>
<select name="card_code" id="select-account" class="form-control" required>
<option value="">Choose</option>
<?php
if (isset($api_res_at_cart['data']) && isset($api_res_at_cart['data']->customerInfo)) {
foreach ($api_res_at_cart['data']->customerInfo as $cards) {
if($calc_card_code == $cards->CardCode) {
$selectedCard = 'selected="selected"';
$calc_card_code = $cards->CardCode;
WC()->session->set('selected_card_code',$calc_card_code);
} else {
$selectedCard = '';
}
echo '<option value="' . $cards->CardCode . '" ' . $selectedCard . '>' . $cards->CardName . '</option>';
}
}else{
echo " no such options! ";
}
?>
</select>
</div>
<div class="select-addresses <?php if ($custom_address_details['new']) echo 'd-none'; ?>">
<div class="form-group">
<label for="select-address">Select Address</label>
<select name="address_code" id="select-address" class="form-control" >
<option value="">Choose</option>
</select>
</div>
</div>
<div class="form-group">
<label for="select-person">Select Contact Person</label>
<select name="person_code" id="select-person" class="form-control">
<option value="">Choose</option>
</select>
</div>
<div class="custom-addresses <?php if (!$custom_address_details['new']) echo 'd-none'; ?>">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Address Name</label>
<div class="col-sm-9">
<input type="text" name="custom_shipping_regular" id="custom_shipping_regular" placeholder="Regular Address" class="form-control" value="<?php echo $custom_address_details['regular']; ?>" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Street 1</label>
<div class="col-sm-9">
<input type="text" name="custom_shipping_street" id="custom_shipping_street" placeholder="Attention Bob Smith" class="form-control" required value="<?php echo $custom_address_details['street']; ?>" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Street 2</label>
<div class="col-sm-9">
<input type="text" name="custom_shipping_block" id="custom_shipping_block" placeholder="Street 2" class="form-control" value="<?php echo $custom_address_details['block']; ?>" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">City</label>
<div class="col-sm-9">
<input type="text" name="custom_shipping_city" id="custom_shipping_city" placeholder="City" class="form-control" required value="<?php echo esc_attr(WC()->customer->get_shipping_city()); ?>" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">State</label>
<div class="col-sm-9">
<select name="custom_shipping_state" id="custom_shipping_state" class="state_select form-control" data-placeholder="State" required>
<option value="">Select an option…</option>
<?php $states = WC()->countries->get_states('US');
$current_r = WC()->customer->get_shipping_state();
foreach ($states as $ckey => $cvalue) {
echo '<option value="' . esc_attr($ckey) . '" ' . selected($current_r, $ckey, false) . '>' . esc_html($cvalue) . '</option>';
} ?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Zip Code</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Postcode / ZIP" name="custom_shipping_postcode" id="custom_shipping_postcode" required value="<?php echo esc_attr(WC()->customer->get_shipping_postcode()); ?>">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Country</label>
<div class="col-sm-9">
<input name="custom_shipping_country" id="custom_shipping_country" class="country_to_state form-control-plaintext" readonly value="United States (US)" />
</div>
</div>
</div>
<input type="submit" class="d-none" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="button alt custom-address">Custom Address</button>
<button type="button" class="button btn-primary" data-dismiss="modal" id="custom_modal_submit">Select</button>
</div>
</div>
</div>
</div>
Ok, now I have a script tag where I am writing the code for opening and closing of the modal, now whenever we select the correct address everything works good and we get the rates also after closing the modal if we try to open it again, everything works fine.
But when a user enter the wrong address either by selecting from the drop down or by putting through the custom address field we get error that address is not valid in place of rates : which is prefectly correct ! But if this time I try to open the modal the I am not able to see the option. Why this is happeing? Also if in code we can improve something any suggestions are welcome.
Below is the code from which I am rendering the options and hiding the modal :
jQuery(function($) {
$('#selectAccount').find('#select-account, #select-address,#select-person').select2({
minimumResultsForSearch: 1 //serach box will only appear if their is more than one child element.
});
// function to select the particular id and change the options depending on the selected values.
$('#selectAccount').find('#select-account').on('change', function()
{
cardCode = $(this).val(); // card code for the current card.
addressSelect = $('#selectAccount').find('#select-address'); // select address ids for further manipulation
personSelect = $('#selectAccount').find('#select-person'); //select person ids for further manipulation
var valueAddress1 = Object.keys(allAddress).find(v =>{
return v == cardCode}
) //getting info only about the selected card code.
var valueAddress = allAddress[valueAddress1];
console.log("valueAddress : ",valueAddress)
var valuePersonCode1 = Object.keys(allEmailAddress).find(v =>{
return v == cardCode}
) //getting info only about the selected card code.
var valuePersonCode = allEmailAddress[valuePersonCode1];
console.log("valuePersonCode : ",valuePersonCode)
if(valueAddress && valuePersonCode){
addressList = valueAddress; //extracting all the addresses for the particular selected card code.
contactList = valuePersonCode; //extracting all the contact person code for the particular selected card code.
addressSelect.attr('disabled', false).html('<option value="">Choose</option>');
$.each(addressList, function(key, attr) {
var optionAddress = $('<option value="' + key + '">' + attr['option'] + '</option>');
addressSelect.append(optionAddress);
$('#selectAccount').find('#select-address').select2("destroy").select2({
minimumResultsForSearch: 1
});
});
personSelect.attr('disabled', false).html('<option value="">Choose</option>');
$.each(contactList, function(key, attr) {
personSelect.append('<option value="' + attr['CntCtCode'] + '">' + attr['option'] + '</option>');
$('#selectAccount').find('#select-address').select2("destroy").select2({
minimumResultsForSearch: 1
});
});
}else {
addressSelect.attr('disabled', true).html('<option value="">Choose</option>');
personSelect.attr('disabled', true).html('<option value="">Choose</option>');
}
});
console.log("Line : 757 Cart : ", api_resp_at_cart, "allEmail : ", allEmailAddress);
$('#selectAccount').on('show.bs.modal', function(event) {
var modal = $(this);
if(window.api_resp_at_cart == ''){
modal.find('.modal-body').html('<p class="error">Sorry, you cannot place an order under this account. Please contact <a href="' + support + '">support</a></p>');
modal.find('.modal-footer button').text('Close');
} else {
if($('#selectAccount').find('#select-account').val() && $('#selectAccount').find('#select-address').val() == '')
{
$('#selectAccount').find('#select-account').trigger('change');
}
// show fields
}
});
$('#custom_modal_submit').on('click',function(){
isClosingBySubmit = true;
})
$('#selectAccount').on('hide.bs.modal', function(event) {
if (isClosingBySubmit) {
var button = $(event.relatedTarget);
var modal = $(this);
cardCode = modal.find('#select-account').val();
cardName = modal.find('#select-account option:selected').text();
$(document).find('[name="calc_card_code"]').val(cardCode);
$(document).find('[name="calc_card_name"]').val(cardName);
if(modal.find('.custom-addresses').is(':visible')) {
customAddress = modal.find('.custom-addresses');
modal.find('#select-address').val('');
personCodeFinal = modal.find('#select-person option:selected').val();
personCodeCall(cardCode);
$(document).find('[name="new-custom"]').val('true');
$(document).find('[name="calc_address_code"]').val('');
$(document).find('[name="shipping_address_1"]').val(customAddress.find('[name="custom_shipping_street"]').val());
$(document).find('[name="shipping_address_2"]').val(customAddress.find('[name="custom_shipping_ship_to"]').val());
$(document).find('[name="custom_shipping_block"]').val(customAddress.find('[name="custom_shipping_block"]').val());
$(document).find('[name="custom_shipping_regular"]').val(customAddress.find('[name="custom_shipping_regular"]').val());
$(document).find('#calc_shipping_country').val('US');
$(document).find('#calc_shipping_state').val(customAddress.find('[name="custom_shipping_state"]').val());
$(document).find('#calc_shipping_city').val(customAddress.find('[name="custom_shipping_city"]').val());
$(document).find('#calc_shipping_postcode').val(customAddress.find('[name="custom_shipping_postcode"]').val());
$(document).find('[name="calc_shipping"]').trigger('click');
} else {
var selectedOption = []; //list for selected option of address
var selectedOption1 = []; //list for selected option of person
addressCode = modal.find('#select-address').val();
personCode = modal.find('#select-person').val();
personCodeFinal = personCode;
if(addressCode && cardCode) {
selectedOption = addressList[addressCode];
selectedOption1 = personCode;
$(document).find('.checkout-button').attr('href', window.checkoutLink).show();
} else {
$(document).find('.checkout-button').attr('href', 'javascript:void(0);').hide();
}
$(document).find('[name="new-custom"]').val('');
$(document).find('[name="calc_address_code"]').val(selectedOption['AddressName']);
$(document).find('[name="shipping_address_1"]').val(selectedOption['Street']);
$(document).find('[name="shipping_address_2"]').val(selectedOption['Block']);
$(document).find('#calc_shipping_country').val(selectedOption['Country']);
$(document).find('#calc_shipping_state').val(selectedOption['State']);
$(document).find('#calc_shipping_city').val(selectedOption['City']);
$(document).find('#calc_shipping_postcode').val(selectedOption['ZipCode']);
$(document).find('#calc_person_name').val(selectedOption1['Name']);
$(document).find('#calc_person_email').val(selectedOption1['Email']);
console.log(addressCode)
if(modal.find('#select-address').length) {
$(document).find('[name="calc_shipping"]').trigger('click');
}
}
}else{
console.log('Closed!')
}
isClosingBySubmit = false;
});
$('#selectAccount').find('.button.custom-address').on('click', function() {
if($('#selectAccount').find('.select-addresses').is(':visible')) {
$('#selectAccount').find('.custom-addresses').removeClass('d-none');
$('#selectAccount').find('.select-addresses').addClass('d-none');
$(this).next('.btn-primary').removeAttr('data-dismiss').addClass('submit').text('Save');
$(this).text('Select Existing');
} else {
$('#selectAccount').find('.custom-addresses').addClass('d-none');
$('#selectAccount').find('.select-addresses').removeClass('d-none');
$(this).next('.btn-primary').removeClass('submit').attr('data-dismiss', 'modal').text('Select');
$(this).text('Custom Address');
}
});
$(document).on('click', '#selectAccount .btn-primary.submit', function() {
$('#selectAccount').find('form [type="submit"]').trigger('click');
});
$('#selectAccount').find('form').on('submit', function() {
$('#selectAccount').modal('hide');
});
});
I had tried to debug it by multiple ways : a) By using the below code
$(document).ready(function() {
$(document).on('change', '#select-account', function() {
// Your code here
});
});
Also different ways but many causes to stop reopening of modal