Uncaught TypeError: jQuery(...).intlTelInput is not a function

Question

I am getting the below error in Google Chrome while at the 3rd step of an appointment process.

Uncaught TypeError: jQuery(...).intlTelInput is not a function
  at HTMLButtonElement.<anonymous> (custom.js:330)
    at HTMLDocument.dispatch (jquery.js:3)
    at HTMLDocument.r.handle (jquery.js:3)

The line 330 at custom.js shows the below code:

var phone = jQuery("#phone").intlTelInput("getNumber");

The full custom.js is available here

The page where this error is generated is here - It appears at Step 3. Details

When I disable the current theme and going to the default Twentyseventeen theme elimiates the error and the plugin works perfectly.

Please help me resolve the error in this current theme. What could be the problem.

I tried putting the jquery above every scripts but it didn't work either.

Here's the source code of the page where it works in the default Twentyseventeen theme - https://pastebin.com/qKJZynLp

And here's the source code of the page where it do not work - https://pastebin.com/CNV8wfmK

Please help.

Answer 1

I had the same error. I place the following code towards the top of the page so it loaded the libraries before it got to the intlTelInput section

<link rel="stylesheet" href="location/to/intl-tel-input/css/intlTelInput.css">
<script src="location/to/intl-tel-input/js/intlTelInput.js"></script>

Then I initialised the code with the following

var input = document.querySelector("#phone");
window.intlTelInput(input);

I didn't use jQuery due to what they state on their git

since v14 we have removed the jQuery dependency. See below for how to initialise and use the plugin with pure JavaScript. If you want to stick with the jQuery version, there is now a separate jQuery wrapped version.

I hope this helps :)

Answer 2

Ran into this problem as well and the above answers didn't help so I thought I"d throw in my 2c answer.

The problem was in the references to intlTelInput. These ones worked:

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

I initialized the control with the following (it's worth noting this didn't default the way it's allegedly supposed to with the geo IP lookup, though).

const input = document.querySelector("#mobileNumber");
window.intlTelInput(input, {
    initialCounry: "auto",
    geoIpLookup: function(callback) {
        $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
            const countryCode = (resp && resp.country) ? resp.country : "us";
            callback(countryCode);
        });
    }
});