-1

I saving notes for a datatables row with a modal. It works fine until I filter the table with YADCF plugin for datatables. The id is empty or from the last openend modal. What is going wrong? My code:

//PHP to echo the button to open modal for saving notes
echo '<td><button class="btn btn-primary" id="note-'.$project->case_id.'" data-id="'.$project->case_id.'" data-toggle="modal" data-target="#noteModal">Notities</button></td>'; 

//The Modal
<!-- /.modal -->
<div class="modal fade bs-modal-lg" id="noteModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Notities</h4>
         </div>
         <div class="modal-body">
            <div class="form-group">
               <label for="caseId">Case ID</label>
               <input type="text" class="form-control" name="caseId" id="caseId" value="" />
            </div>
            <div class="form-group">
               <label for="caseId">Notities</label>
               <textarea id="note" class="form-control" name="note"></textarea>
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary" type="submit" id="submit-note">Opslaan</button>
            <button type="button" class="btn dark btn-outline" data-dismiss="modal">Sluiten</button>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

//The script to open and save modals with id. Sometimes this id is empty or the last open which is opened
<script>
   $(document).ready(function() {

       $('button[id^="note"]').click(function() {
           var id = $(this).data("id");
           $(".modal-body #note").val('');
           $(".modal-body #caseId").val(id);

            $.ajax({
             url: "notitie?id="+id,
             dataType: 'json',
             async: false,
             success: function(data) {
               $(".modal-body #note").val(data);
             }
           });
       });

       $("#submit-note").click(function() {
          var id = $('.modal-body #caseId').val();
          var note = $('.modal-body #note').val();

          $.ajax({
               type: 'POST',
               url: 'notitie/opslaan',
               data: '{"id":"'+id+'","note":"'+note+'"}', // or JSON.stringify ({name: 'jonas'}),
               success: function(data) { 
                   location.reload(); 

                },
               contentType: "application/json",
               dataType: 'json'
           }); 
       });

   });
</script>
Mark
  • 41
  • 6

1 Answers1

0

This did the trick

$('#table-projects').on('click', 'button[id^="note"]', function(){
Mark
  • 41
  • 6