مشكلة في التعامل مع اضافة intl-tel-input

Samer Alashqar · 24 فبراير 2022

السلام عليكم..

اواجه مشكلة مع اضافة intl-tel-input مشكلتي هي ان intlTelInput يتطلب queryselector العنصر الذي يحوي ال id المتواجد داخل queryselector لم اقم بوضعه من البداية في صفحة html و انما سأقوم بحقنه بعد ان يتم المستخدم بعض الخطوات ، لكن يظهرلي هذا الخطأ و الذي مفاده انه لايوجد id بهذا الاسم (لانني لم اقم بحقن العنصر بعد):

intlTelInput.min.js:7 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at new c (intlTelInput.min.js:7:10123)
    at intlTelInput.min.js:8:1579
    at ajaxer.js:4:27

هذه الشيفرة الخاصة ب intlTelInput:

var phone_number = window.intlTelInput(document.querySelector("#phone"), {
    separateDialCode: true,
    preferredCountries:["sa","kw", "ae" , "dz", "iq", "ma", "bh","ye", "qa", "eg", "jo", "sy", "lb","ly" ,"tn","om","ps"],
    hiddenInput: "full",
    utilsScript:"/js/utils.js"
});

window.iti = phone_number;

function getValue(){
    var number = phone_number.getNumber();
    alert(number);
}

اي حلول ؟

شكرا .

Hassan Hedr · 24 فبراير 2022

يمكن تأجيل تهيئة intlTelInput إلى ما بعد حقن العنصر phone# وذلك لأن التهيئة تعتمد على تواجد هذا العنصر من الأساس

// 01 - #phone حقن العنصر
...

// 02 - intlTelInput تهيئة العنصر مع 

var phone_number = window.intlTelInput(document.querySelector("#phone"), {
  ...
});
window.iti = phone_number;
  
function getValue(){
  var number = phone_number.getNumber();
  alert(number);
}
...

// 03 - getValue الآن يمكن استخدام
...

حل آخر يكون بحقن العنصر مبكرًا ولكن إخفاء ظهوره ضمن الصفحة عبر التنسيق كالتالي

#phone {
  display: none;
}

وبعد اتمام الخطوات نقوم بإظهار العنصر بواسطة javascript

document.querySelector("#phone").style.display = 'block';

مشكلة في التعامل مع اضافة intl-tel-input

السؤال

Samer Alashqar

1 جواب على هذا السؤال

Recommended Posts

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية