Click here to Skip to main content
15,506,757 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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)

See below screenshot for understanding

Image -1 :for Datatable Screenshot here.

<a href="https://drive.google.com/file/d/11yeh5yee4Ey4wjuqKU2J24NMALAdV9Fw/view?usp=sharing">image-1.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/11yeh5yee4Ey4wjuqKU2J24NMALAdV9Fw/view?usp=sharing" target="_blank" title="New Window">^</a>]


Image -2 : if I click on 1st row of datatable then I can get flags in fields

<a href="https://drive.google.com/file/d/1pT1f7576-N5ML53lHXhmvDoYNnrcJmet/view?usp=sharing">image-2.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/1pT1f7576-N5ML53lHXhmvDoYNnrcJmet/view?usp=sharing" target="_blank" title="New Window">^</a>]

Image -3 : If I click on second row of datatable then I have not get flags icon in field.

<a href="https://drive.google.com/file/d/1OH2J3AmsUzcNEmV5TVRV9tJtpsQUgU1G/view?usp=sharing">image-3.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/1OH2J3AmsUzcNEmV5TVRV9tJtpsQUgU1G/view?usp=sharing" target="_blank" title="New Window">^</a>] 


What I have tried:

{% for vr in adduser.adduser.all %} {% csrf_token %} Edit Contact Data ×


<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-->
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900