Country code flag icon is not showing on form in for loop

[KrupaVasava]

I am trying to getting flag icon on every edit form of each datatable row have edit button. but unfortunately I can see flag icon only in 1st row of edit form of datatable grid. and in other rows I am not able to see flag icon. Can you help us how can I modified my javascript so I can see flag icon on every edit form of each row of datatable.

NOTE : We have code is in Django Python and the variable is in DTL (djnango Template Language)

Datatable Code:

{{adduser.brl_name}}

<span class="dt-checkbox-label"> </span> </div> </th> <th>Department Name</th> <th>Name</th> <th>SMS No.</th> <th>WhatsApp No.</th> <th>Email</th> <th>Country</th> <th>City</th> <th>Zip Code</th> <th>Activity</th> </tr> </thead> <tbody> {% for vr in adduser.adduser.all %} <tr> <td></td> <td>{{vr.dept_nm}}</td> <td>{{vr.f_name}} {{vr.l_name}}</td> <td>{{vr.sms_no}}</td> <td>{{vr.whtsp_no}}</td> <td>{{vr.e_mail}}</td> <td>{{vr.country}}</td> <td>{{vr.city}}</td> <td>{{vr.zip}}</td> <td> <a href="#userEditModal-{{forloop.counter}}" data-toggle="modal" class="btn btn-primary" onclick="getCountryCode()"><span class="fa fa-pencil"></span> Edit</a> <a href="{% url 'deleteuser' id=vr.id %}" class="btn btn-danger" data-target="success-modal-delete"><span class="fa fa-trash"></span> Delete</a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> HTML Code : <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/js/intlTelInput.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Edit Form : {% for vr in adduser.adduser.all %} <div class="modal fade" id="userEditModal-{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <form method="POST" action="{% url 'edituser' vr.id %}" class="needs-validation" novalidate> {% csrf_token %} <div class="modal-header"> <h5 class="modal-title">Edit Contact Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!--Form Start--> <div class="form-row"> <div class="form-group col-md-6"> <label for="FirstName">First Name<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Type FirstName here...." value="{{vr.f_name}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-6"> <label for="LastName">Last Name<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Type LastName here...." value="{{vr.l_name}}" required /> </div> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="Address">Address Line1<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="addln1" id="addln1" placeholder="Type Address here...." value="{{vr.add_ln1}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-6"> <label for="Address">Address Line2</label> <input type="text" class="form-control" name="addln2" id="addln2" placeholder="Type Address here...." value="{{vr.add_ln2}}" /> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="Country">City<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="city" id="city" placeholder="Type city here...." required value="{{vr.city}}" /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-4"> <label for="Country">Country<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="country" id="country" placeholder="Type Country here...." value="{{vr.country}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-4"> <label for="Country">Zip Code<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="zip" id="zip" placeholder="Type zipcode here...." value="{{vr.zip}}" required /> </div> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-row"> <div class="form-group col-md-6 smsForm_edit"> <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label> <input type="tel" class="form-control" name="smsno_edit" id="smsno_edit" value="{{vr.sms_no}}" placeholder="SMS No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid contact no.</div> </div> <div class="form-group col-md-6 whatsappForm_edit"> <label for="contact2">WhatsApp No.<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="whtspno_edit" id="whtspno_edit" value="{{vr.whtsp_no}}" placeholder="WhatsApp No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid contact no.</div> </div> </div> <script> const phoneInputField_edit = document.querySelector("#smsno_edit"); const phoneInputField2_edit = document.querySelector("#whtspno_edit"); const phoneInput_edit = window.intlTelInput(phoneInputField_edit, {}); const phoneInput2_edit = window.intlTelInput(phoneInputField2_edit, {}); $(document).ready(function () { $('.smsForm_edit .iti__flag-container').click(function () { var countryCode = $('.smsForm_edit .iti__selected-flag').attr('title'); var countryCode = countryCode.replace(/[^0-9]/g, ''); $('#smsno_edit').val(""); $('#smsno_edit').val("+" + countryCode + $('#smsno_edit').val()); }); $('.whatsappForm_edit .iti__flag-container').click(function () { var countryCode = $('.whatsappForm_edit .iti__selected-flag').attr('title'); var countryCode = countryCode.replace(/[^0-9]/g, ''); $('#whtspno_edit').val(""); $('#whtspno_edit').val("+" + countryCode + $('#whtspno_edit').val()); }); }); </script> <div class="form-row"> <div class="form-group col-md-6"> <label for="email">Email<span style="color:#ff0000">*</span></label> <input type="email" class="form-control" name="email" id="email" placeholder="Type email here...." value="{{vr.e_mail}}" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid email address.</div> </div> <div class="form-group col-md-6"> <label for="Department">Department Name<span style="color:#ff0000">*</span></label> <select class="form-control" name="deptnm" id="deptnm" required readonly> <option>{{vr.dept_nm}}</option> </select> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label>Broadcast list<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" id="brdctlst" name="brdctlst" value="{{adduser.brl_name}}" readonly> </select> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <!--Form End--> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button href="{% url 'broadcastlist' %}" id="UpdateUser" type="submit" class="btn btn-primary">Update</button> </div> </form> <div class="alert alert-info" style="display: none;"></div> </div> </div> </div> {% endfor %} <!--Edit Model End From Here-->

[dropways]

Hello @KrupaVasava

I didn't get you point.
please give me a codepen demo so I can understand your issue.

Thank you.

[KrupaVasava]

Hi @dropways I try to explain with screen shot I hope it will help to you!

As Image -1 ,

I have datatable grid with edit button if I try to click to row 1 on edit button it will show edit model as below image -2.

Image - 2,

As Image -2 it is showing flag in contact fields.

but if I click on to the second row of edit button it will stop showing flag icons in two fields. so, how can I solve this?
Image -3 ,

[dropways]

yes got it your issue

on edit click you need to reinitialize intl-tel-input when modal open.

[KrupaVasava]

yes You are right . but it will showing only on first row of datatable not for either.

[dropways]

you can try modal events shown.bs.modal.

$('#myModal').on('shown.bs.modal', function (event) {
// reinitialize intl-tel-input
})

if this is not working add setTimeout function

[KrupaVasava]

Hi @dropways

Is this correct way declare javascript?

html code:

javascript code:
$('#userEditModal').on('shown.bs.modal', function (event) {
alert("in");
var country_code = document.getElementById("smsno_edit").value();
//alert(country_code);
const phoneInputField_edit = document.querySelector("#smsno_edit");
const phoneInputField2_edit = document.querySelector("#whtspno_edit");
const phoneInput_edit = window.intlTelInput(phoneInputField_edit, {});
const phoneInput2_edit = window.intlTelInput(phoneInputField2_edit, {});

              $(document).ready(function () {
                $('.smsForm_edit .iti__flag-container').click(function () {
                  var countryCode = $('.smsForm_edit .iti__selected-flag').attr('title');
                  var countryCode = countryCode.replace(/[^0-9]/g, '');
                  $('#smsno_edit').val("");
                  $('#smsno_edit').val("+" + countryCode + $('#smsno_edit').val());
                });
                $('.whatsappForm_edit .iti__flag-container').click(function () {
                  var countryCode = $('.whatsappForm_edit .iti__selected-flag').attr('title');
                  var countryCode = countryCode.replace(/[^0-9]/g, '');
                  $('#whtspno_edit').val("");
                  $('#whtspno_edit').val("+" + countryCode + $('#whtspno_edit').val());
                });
              });

        })

[KrupaVasava]

<div class="modal fade" id="userEditModal-{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">

[dropways]

Don't need to create every edit modal you can just on edit click fetch data from the row into modal form

[KrupaVasava]

you mean to say just go with one form model for edit and Add user right?

[dropways]

Yes

[KrupaVasava]

actually we are working in python and in python , we need both model for edit and add user. that's why we are using these two models.

[KrupaVasava]

Hi Ankit , You can mail me on this email id. And As per our company policy we can’t share our personal detail to anyone. So we have to continue our conversion with this email id. Thank You!