Why my link does not show up the modal and populate the data using Jquery

Question

Why my link does not show up the modal and populate the modal with data i set in the jquery?

This is my modal and jquery instruction.

// show edit modal form with emp data
            $('#listRecords').on('click','.editRecord',function(){
                alert('ok');
                $('#editEmpModal').modal('show');
                $("#empId").val($(this).data('id'));
                $("#empJenis").val($(this).data('jenis'));
                $("#empJarak").val($(this).data('jarak'));
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="modal fade" id="editEmpModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <form id="editEmpForm" method="post">
        <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Edit Employee</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <div class="form-group row">
            <label class="col-md-2 col-form-label">Jenis</label>
            <div class="col-md-10">
              <input type="text" name="empJenis" id="empJenis" class="form-control" placeholder="Name" required>
              <input type="hidden" id="input_id"  name="input_id" class="form-control " value="{$input_id}">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-md-2 col-form-label">Jarak</label>
            <div class="col-md-10">
              <input type="text" name="empJarak" id="empJarak" class="form-control" placeholder="Age" required>
            </div>
          </div>                
          
          
         
        </div>
        <div class="modal-footer">
         <input type="hidden" name="empId" id="empId" class="form-control">
         <input type="hidden" id="editinput_id"  name="editinput_id" class="form-control " value="{$input_id}">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="btnEdit">Update</button>
        </div>
        </form>
      </div>
      </div>
    </div>

Thank you in advance for your help. Even when i click the link with editRecord class , even the alert message ok does not work.

How to solve it?

Thank you.

Without information such as the html of `listRecords` then it's hard to provide an answer that is not a guess, but try using `("#empId").val($(this).attr('data-id'));` — Carsten Løvbo Andersen, Sep 09 '20 at 07:42
What does `console.log($("[id=empJenis]").length)` give you? Could be that there's multiple elements with the same ID and you're setting the one that's not on the modal - you could try `$("#editEmpModal #empJenis").val("test")` — freedomn-m, Sep 09 '20 at 07:47
From the above: you should narrow down what the problem is as it could be either the selector `$("#empJenis")` or the value `.val($(this).data("jenis"))` (or something else) - so use `$("#empJenis").val("test")` and `alert($(this).data("jenis"))` and see which does/doesn't work. — freedomn-m, Sep 09 '20 at 07:48
Looks like you're not even "showing the modal", so speculating on whether it populates the data and how to fix that is completely pointless! (as it may be populating it fine) - do you get the `alert("ok")`? — freedomn-m, Sep 09 '20 at 07:49
@freedomn-m he states `even the alert message ok does not work.` so I think the function does not fire. — Carsten Løvbo Andersen, Sep 09 '20 at 07:50
@CarstenLøvboAndersen thanks - guess I'm cherry-picking what I'm reading :) I keep jumping to the comments before reading the whole thing — freedomn-m, Sep 09 '20 at 07:50
@AmeenHamid Have you looked in the console to see if you get any errors — Carsten Løvbo Andersen, Sep 09 '20 at 07:50
Try changing your event to `$(document).on('click','.editRecord'` - you're using event delegation but if the `#listRecords` is *also* dynamically created, then it still won't work. — freedomn-m, Sep 09 '20 at 07:51
@CarstenLøvboAndersen so how does he know it's not populating, if the code isn't even being called? *sigh* Which people could diagnose their issues a bit better - *"why my link click event doesn't get called"* would be a much "better" title (though not fantastic) — freedomn-m, Sep 09 '20 at 07:53
@freedomn-m I totally agree, but with or without a better title, information like how the table is created/populated or just how it looks would most likely solve the problem — Carsten Løvbo Andersen, Sep 09 '20 at 07:54
@freedomn-m after using your suggestion to use $(document).on('click','.editRecord' the modal shows up and populate my form. Thank you guys — Eidul Ameen Sahul Hamid, Sep 09 '20 at 08:06
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Sep 09 '20 at 08:18
Glad we found the root cause. Event delegation can be a bit tricky - I tend to always use `$(document)` just to be safe (and clear to me that it's event delegation) - but I've been berated for that on SO before with the suggestion to use the nearest *static* content (ie not dynamic) (but no reason for this given, just that it's "better") — freedomn-m, Sep 09 '20 at 08:20
@freedomn-m thank you for the info. it helps me understand better. — Eidul Ameen Sahul Hamid, Sep 09 '20 at 08:23

Why my link does not show up the modal and populate the data using Jquery

0 Answers0