Discussion between magefms and Butterfly

Feeds

05:45

0

A: Unable to initialize external jQuery in Magento2

You have not defined jQuery in the event function, you just need to add it like this: require([ 'jquery', 'intlTelInput', ], function($, jQuery) { console.log('sample function 1234567'); $(window).load(function() { jQuery("#country_code").intlTelInput({ ...

Butterfly

No luck, when I use this it shows, jQuery is not a function

magefms

try redeploy static view files

Butterfly

yes, I've run deploy comment as well. Thats why it ready the latest change right?

magefms

well if that doesn't work try using $ only

$("#country_code").intlTelInput

Butterfly

Does it mean that neither jquery or intelTelinout jqueries intialized in my page?

yes, any other clue?

magefms

05:47

regarding the first error you mentioned in your post it means that jQuery is not initialized in your jquery event function.

in my answer I indicate how to initialize it

now the new error is jQuery is not a function

right?

Butterfly

yes, I used function($, jQuery) and rest are same.

magefms

and the error is the same also?

Butterfly

on this occasion, it shows the error as jQuery is not a function.

than I tried function($, jQuery, intelTelInput) I got the same erro

magefms

jQuery.fn.intlTelInput change to jquery.fn.inTelInput

then check

if works or not

Butterfly

Sure, hold on for a min. I am struggling with this issue for more than one and a half day

oops. no luck

magefms

05:57

same error?

Butterfly

yes :-(

magefms

wait Im sorry for a bit slow reply im on mobile

i will try to modify your code

Butterfly

Sure, take your time

I'm thankful for your help

magefms

kindly check update answer

Butterfly

give me a moment

Its strange. i am getting an error as 'TypeError: g is undefined'

magefms

06:16

hmmm

wait

require([
'jquery',
'intlTelInput',
],
function($, jQuery) {

"use strict";
$(document).ready(function () {
console.log('sample function 1234567');
jQuery("#country_code").intlTelInput({
initialCountry: "ae",
separateDialCode: true,
preferredCountries: ["ae","bh","kw","om","qa","sa"]
//onlyCountries: ["ae","bh","kw","om","qa","sa"],
});
});
});

try that one

Butterfly

i'm completely lost :-(

Butterfly

06:35

exports: 'jquery.fn.intlTelInput', caused this g undefined error, Once I replaced this back to jQuery that error has gone

magefms

07:08

and still the same error comes ?

with the code above?

Butterfly

07:22

yes.

magefms

07:57

butterfly

I have question

what is the name of your js file

is it intlTelInput

intlTelInput.js

or utilsIntel.js

Butterfly

08:17

intlTelInput.js

magefms

is it visible in the source as well?

Butterfly

yes, obviously. I have found something interesting

magefms

yeah what is it?

Butterfly

I have owlcarousel jquery function working fine in my theme, and I changed my code as below,

It is surprisingly working fine

magefms

Great!

Butterfly

08:27

but if I use intlTelInput it shows test.intlTelInput is not a function

magefms

maybe naming conflict
can you try this , change path name to
paths: {
'intl': 'Ucs_Reson8/js/intlTelInput',
},

and call it like
require([
'jquery',
'intl',
],
function($, jQuery) {

"use strict";
$(document).ready(function () {
console.log('sample function 1234567');
jQuery("#country_code").intlTelInput({
initialCountry: "ae",
separateDialCode: true,
preferredCountries: ["ae","bh","kw","om","qa","sa"]
//onlyCountries: ["ae","bh","kw","om","qa","sa"],
});
});
});

Butterfly

should I place inTelInput inside js/jquery/intlTelInput.js

magefms

yeah

basically

Butterfly

currently it is like js/intlTelInput.js

magefms

is it not there? I mean currently where did you put it?

Butterfly

08:30

web/js/inTelInput.js

magefms

wait

yeah it is okay

web/js/inTelInput.js → is okay

I have another solution

try inserting directly in your head

Butterfly

please tell me

magefms

I mean in your web head tag

but before please try this first

in your requirejs-config

use map instead

var config = {

map: {
'*': {
'intlTelInput': 'Ucs_Reson8/js/intlTelInput'
}
},
"shim": {
"intlTelInput": ['jquery'],
}
};

then in your js
require([
'jquery',
'intlTelInput',
],
function($, jQuery) {

"use strict";
$(document).ready(function () {
console.log('sample function 1234567');
$(window).load(function() {
jQuery("#country_code").intlTelInput({
initialCountry: "ae",
separateDialCode: true,
preferredCountries: ["ae","bh","kw","om","qa","sa"]
//onlyCountries: ["ae","bh","kw","om","qa","sa"],
});
});
});
});

it should work now

following above

Butterfly

sure, let me try

Butterfly

08:57

it may hurt you, But what I've gotten is jQuery(...).intlTelInput is not a function

magefms

hmm

require([
'jquery',
'intlTelInput'
],
function($, jQuery) {

"use strict";
$(document).ready(function () {
console.log('sample function 1234567');
jQuery("#country_code").intlTelInput({
initialCountry: "ae",
separateDialCode: true,
preferredCountries: ["ae","bh","kw","om","qa","sa"]
});
});
});

here's another solution

Create default.xml file inside app/code/Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.min.js" src_type="url" />
</head>
</page>

run upgrade
redeploy static content -f
then clean cache

and check if it works

Butterfly

ok, let me try

Butterfly

09:31

Same error. I dont know where am I going wrong.

it is working fine with owlcarousel

Only when I use intelInput it is throwing error

Butterfly

10:38

Issue has been resolved.

I'm such a stupid.

Butterfly

11:04

Thanks for your patience and support. Have a good day

magefms

what was the main issue?

Butterfly

11:39

intelInput js version wich i used doesn't compatible with jQuery version

intelInput js version was 1.15, soreplaced with version 1.9 resolved the issue

Transcript for

Discussion between magefms and Butterfly