TypeError: $(…).intlTelInput is not a function

See original GitHub issue

I’m trying to use intlTelInput for a HTML registration page but I am getting the following error: Uncaught TypeError: $(...).intlTelInput is not a function

Here is the registration view code:


<html>
<head>
<!-- Page for customer registration and submit details to database to associate SSO with company etc -->
    <link rel="stylesheet" type="text/css" href="views/register.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../bower_components/intl-tel-input/build/css/intlTelInput.css">
    <script src="../bower_components/intl-tel-input/build/js/intlTelInput.js"></script>
    <script>
        $("#phoneNumber").intlTelInput();

        // get the country data from the plugin
        var countryData = $.fn.intlTelInput.getCountryData(),
            telInput = $("#phoneNumber"),
            addressDropdown = $("#country");

        // init plugin
        telInput.intlTelInput({
            utilsScript: "../bower_components/intl-tel-input/build/js/utils.js" // just for formatting/placeholders etc
        });

        // populate the country dropdown
        $.each(countryData, function(i, country) {
            addressDropdown.append($("<option></option>").attr("value", country.iso2).text(country.name));
        });
        // set it's initial value
        var initialCountry = telInput.intlTelInput("getSelectedCountryData").iso2;
        addressDropdown.val(initialCountry);

        // listen to the telephone input for changes
        telInput.on("countrychange", function(e, countryData) {
            addressDropdown.val(countryData.iso2);
        });

        // listen to the address dropdown for changes
        addressDropdown.change(function() {
            telInput.intlTelInput("setCountry", $(this).val());
        });
    </script>
</head>

<form name="page1" id="page1" role="form">

<div id="createCasePage1" class="container-fluid">

<div class="col-md-6 col-xs-12">
        <div class="form-group">
	      <label for="phoneNumber">Phone Number:</label>
          <input type="tel" id="phoneNumber" name="phoneNumber" ng-model="createUserObj[0].phoneNumber" class="form-control"  required>
      </div>
    </div>

    <div class="col-md-6 col-xs-12">
      <div class="form-group">
        <label for="country">Country:</label>
        <!--<input type="text" id="country" name="country" ng-model="createUserObj[0].country" class="form-control" placeholder="Country" required maxlength="100" /> -->
              <select id="country" name="country" ng-model="createUserObj[0].country" class="form-control" required></select>
      </div>
    </div>


    <!-- Check valid  inputs and patterns then submit to controller -->
    <button type="submit" id="register" class="btn btn-large" class="registerBtn" ng-click="page1.$valid && createUserFunc()">Register</button>
    <br>
    <br>
</div>
</form>
</html>

I think it’s an issue with jQuery and Angular but I’m not really sure.

Issue Analytics

State:
Created 6 years ago
Comments:22 (4 by maintainers)

Top GitHub Comments

9reactions

anupamadhuricommented, Aug 7, 2018

Fixed Solution: In intlTelInput.js replace .load(function() { … }); To .on(‘load’, function() { … });

2reactions

TomasHurtzcommented, Jul 5, 2018

I had this issue. Just wrap the entire input code within;

           jQuery(document).ready(function() {	

                            telInput.intlTelInput({
			            initialCountry: "auto",
                                       stuff....

                });  // end docready