I am trying to run two scripts in wordpress function.php, one is for input masking and the other is for postcode search api. I managed to get each one of the scripts working separately but once I put them together it seems each script is annulling the other.
the main idea is to mask the phone and postcode input and also validade the postcode through api and complete the address and city.
Sorry if it is a repeated topic but I could not manage to get it working with the references I've found over the net.
Bellow my scripts
function mascara_cadastro_cliente(){
if( is_page('cadastrar') ){
wp_register_script('masked-input', 'https://example.com/'.'/js/jquery.maskedinput.min.js', array('jquery'));
wp_enqueue_script ('masked-input');
wp_register_script('valida-cep', 'https://example.com/'.'/js/jquery.min.js', array('jquery'));
wp_enqueue_script ('valida-cep');
}
}
add_action('wp_enqueue_scripts', 'mascara_cadastro_cliente');
function activate_masked_input(){
if( is_page('cadastrar') ){
?>
<script type="text/javascript">
jQuery( function($){
$("#reg_billing_postcode").mask("99999-999");
$("#reg_billing_phone").mask("(99) 99999-9999");
});
</script>
<?php
}
}
add_action('wp_footer', 'activate_masked_input');
function activate_valida_cep(){
if(is_page('cadastrar')){
?>
<script type="text/javascript">
$(document).ready(function() {
function limpa_formulário_cep() {
// Limpa valores do formulário de cep.
$("#reg_billing_address_1").val("");
$("#bairro").val("");
$("#reg_shipping_city").val("");
$("#uf").val("");
$("#ibge").val("");
}
//Quando o campo cep perde o foco.
$("#reg_billing_postcode").blur(function() {
//Nova variável "cep" somente com dígitos.
var cep = $(this).val().replace(/\D/g, '');
//Verifica se campo cep possui valor informado.
if (cep != "") {
//Expressão regular para validar o CEP.
var validacep = /^[0-9]{8}$/;
//Valida o formato do CEP.
if(validacep.test(cep)) {
//Preenche os campos com "..." enquanto consulta webservice.
$("#reg_billing_address_1").val("...");
$("#bairro").val("...");
$("#reg_shipping_city").val("...");
$("#uf").val("...");
$("#ibge").val("...");
//Consulta o webservice viacep.com.br/
$.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {
if (!("erro" in dados)) {
//Atualiza os campos com os valores da consulta.
$("#reg_billing_address_1").val(dados.logradouro);
$("#bairro").val(dados.bairro);
$("#reg_shipping_city").val(dados.localidade);
$("#uf").val(dados.uf);
$("#ibge").val(dados.ibge);
} //end if.
else {
//CEP pesquisado não foi encontrado.
limpa_formulário_cep();
alert("CEP não encontrado.");
}
});
} //end if.
else {
//cep é inválido.
limpa_formulário_cep();
alert("Formato de CEP inválido.");
}
} //end if.
else {
//cep sem valor, limpa formulário.
limpa_formulário_cep();
}
});
});
</script>
debbuging the page I receive the following exception
jquery.min.js?ver=5.2.3:2 jQuery.Deferred exception: $(...).live is not a function TypeError: $(...).live is not a function
at HTMLDocument.<anonymous> (https://example.com/js/main.js:177:28)
at e (https://example.com/js/jquery.min.js?ver=5.2.3:2:29453)
at t (https://example.com/js/jquery.min.js?ver=5.2.3:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js?ver=5.2.3:2
jquery.min.js?ver=5.2.3:2 jQuery.Deferred exception: $(...).mask is not a function TypeError: $(...).mask is not a function
at HTMLDocument.<anonymous> (https://example.com/cadastrar/:699:33)
at e (https://example.com/js/jquery.min.js?ver=5.2.3:2:29453)
at t (https://example.com/js/jquery.min.js?ver=5.2.3:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js?ver=5.2.3:2
jquery.min.js?ver=5.2.3:2 Uncaught TypeError: $(...).live is not a function
at HTMLDocument.<anonymous> (main.js:177)
at e (jquery.min.js?ver=5.2.3:2)
at t (jquery.min.js?ver=5.2.3:2)
jquery.min.js?ver=5.2.3:2 Uncaught TypeError: $(...).mask is not a function
at HTMLDocument.<anonymous> ((index):699)
at e (jquery.min.js?ver=5.2.3:2)
at t (jquery.min.js?ver=5.2.3:2)
