International Telephone Input JQuery Plugin - Call set instance after ajax html response

Question

I'm using this plugin to validate a tel html input https://github.com/jackocnr/intl-tel-input

I send the form through an ajax response and receive the html structure updated. When I set this html to the page, it loses the plugin instance and it's a normal tel input again, without the plugin instance attached to it. How do I call the previous instance to the new input received that it's technically the same?

// Call and set plugin instance
var inputRec = document.querySelector('#phone_number_rec');
var itiRecruiter = window.intlTelInput(inputRec, {
    hiddenInput: "full",
    initialCountry: "auto",
    geoIpLookup: function(callback) {
        $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "us";
            callback(countryCode);
        });
    },
    utilsScript : base_url + '/public/assets/modules/intl-tel-input-master/build/js/utils.js',
});

// Send form through ajax
// Submit recruiter experience
    $('body').on('submit', '.submit-individual-recruiter', function(e){
        e.preventDefault(e);
        var form = $(this);
        var post_url = $(this).attr('action'); //get form action url
        var form_data = $(this).serialize(); //Encode form elements for submission

        if ($(this)[0].checkValidity() === false) {
            event.stopPropagation();
            form.addClass('was-validated');
        } else {
            $(this).addClass('was-validated');
            var responseState = false;
            var jqxhr = $.ajax({
                url : post_url,
                type: 'post',
                data : form_data,
            }).done(function(response){
                response = JSON.parse(response);
                if(response.result == 'success'){
                    responseState = true;
                    iziToast.success({
                        message: response.message,
                        position: "topRight"
                    });
                } else if(response.result == 'error'){
                    iziToast.error({
                        message: response.message,
                        position: "topRight"
                    });
                }
            });
            
            jqxhr.always(function() {
                if(responseState == true){
                    var $row = $('#recruiter-experience');
        
                    var url = base_url + '/get_info/experience';
                    
                    $.post( url, function( response ) {
                        response = JSON.parse(response);
                        $row.html(response.recruiterView.data);
                    });
                }
            });
        }
    });

Answer 1

well you replaced the dom, so the element that u initialized the tel-validator is gone.

one thing u could do is wrap your initializer into a function so u can just call it again

function initializeTel() {
    var inputRec = document.querySelector('#phone_number_rec');
    var itiRecruiter = window.intlTelInput(inputRec, {
        hiddenInput: "full",
        initialCountry: "auto",
        geoIpLookup: function(callback) {
            $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                var countryCode = (resp && resp.country) ? resp.country : "us";
                callback(countryCode);
            });
        },
        utilsScript : base_url + '/public/assets/modules/intl-tel-input-master/build/js/utils.js',
    });
}

// call it initially
initializeTel();



// and then after u received and parsed the response 

initializeTel();