jQuery plugin for international phone numbers: flags and phone placeholder missing

Question

I'm using intl-tel-input, jQuery plugin for international phone numbers, for one of my projects. The plugin claims to "Automatically set the input placeholder to an example number for the selected country", but I can't get that to work properly. So far I tried 2 things:

1) I downloaded the library and referenced one of its JS files from my code ( similar to the demo). Here's a snippet of my JS file:

  $("#phone").intlTelInput({
    allowExtensions: false,
    autoFormat: true,
    autoHideDialCode: false,
    autoPlaceholder: true,
    defaultCountry: "ng",
    ipinfoToken: "yolo",
    nationalMode: true,
    numberType: "MOBILE",
    onlyCountries: ['ng', 'us', 'gb'],
    preferredCountries: [],
    utilsScript: "/projects/intl-tel-input-master/lib/libphonenumber/build/utils.js" 
  });

but I got the following error in the JS console of Chrome:

XMLHttpRequest cannot load file:///projects/intl-tel-input-master/lib/libphonenumber/build/utils.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

2) I put the library folder on a server and referenced utils.js file with server url (http://web.mit.edu/aizhan/www/intl-tel-input-master/lib/libphonenumber/build/utils.js). This still doesn't work on my machine, but it works in codepen with HTTP protocol but not with HTPPS:

HTTP: http://codepen.io/atoregozh/pen/raEPbv
HTTPS: https://codepen.io/atoregozh/pen/MYMLXv

My overall question: how could I make the library work locally? I also have 2 subquestions: 1) How to fix the error about XMLHttpRequest loading? (I read about it before from other posts on stackoverflow and I don't want to mess with the security settings); 2) Why the code works through HTTP but not through HTTPS?

I would really appreciate your help. If you want to see the actual project code, the index.html file is here and Javascript file is here

score 0 · Accepted Answer · edited May 23 '17 at 12:14

question:how could I make the library work locally?

you use in Yeoman , ExpressJs or IIS Express.

e.g(run server): yeoman server

I'm test by IIS Express , demo file is right.

question :How to fix the error about XMLHttpRequest loading?

you load resource in another server (cross domain ), I prefer load proxy in curent server. To resolve this problem, refer to 'Loading cross domain html page with jQuery AJAX'.

another question :Why the code works through HTTP but not through HTTPS?

if you see the browser console , including the code below.

Loading mixed (insecure) display content "" on a secure page.
Blocked loading mixed active content "http://web.mit.edu/aizhan/www/intl-tel-input-master/build/js/intlTelInput.js"

resolve your problem in firefox link

if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS.

good luck.

also '[What is JSONP all about](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about)' — MJ Vakili, Apr 15 '15 at 11:11
one can directly load from CDN as provided on their github documentation — Niraj, Jul 27 '17 at 10:45

jQuery plugin for international phone numbers: flags and phone placeholder missing

1 Answers1