0

Hi I have a datatable with button that will pop-up a modal once clicked. This modal serves as the edit button of the data. The datetimepicker works only on the very first row but not for the other rows

Code

<td> <button type="button" class="btn btn-warning" data-target="#updateInt<?php echo $row['id'] ?>" data-toggle="modal"><i class="fa-solid fa-pencil"></i></button>

     <div class="modal fade" id="updateInt<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="updateInt" aria-hidden="true">
        <div class="modal-body">
          <div class="form-group">
          <label for="ester">Start Date</label>
          <input type="text" class="form-control" name="datetimepicker1" id="datetimepicker11" value="<?php echo $row['ybegin']?>" required/>
        </div>
        <div class="form-group">
          <label for="ester">End Date</label>
          <input type="text" class="form-control" name="datetimepicker2" id="datetimepicker12" value="<?php echo $row['yend']?>" required/>
         </div>
        </div>
     </div>
</td>

Script

<script type="text/javascript">

    jQuery(function(){
    
        jQuery('#datetimepicker11').datetimepicker({
            format:'Y/m/d',
            timepicker:false
        });
        
        jQuery('#datetimepicker12').datetimepicker({
        
            format:'Y/m/d',
            onShow:function( ct ){
            
                this.setOptions({
                    minDate:jQuery('#datetimepicker11').val()?jQuery('#datetimepicker11').val():false
                })
            },
            
            timepicker:false
        });
    });
</script>

Datatables

<script>
$(document).ready(function() {
    var table = $('#intake').DataTable( {
        dom: 'Qlfrtip',
        order: [],
        columnDefs: [{
                searchBuilder: {
                    defaultCondition: "=",
                },
                targets: [1]
            }]
    } );
} );
</script>

I have tried checking the browser console for some errors but nothing was showing up. I just don't understand why it is not working.

typicalguy
  • 45
  • 7
  • `"The datetimepicker works only on the very first column but not for the other data"` - do you in fact mean the first row rather than column? I suspect that you have duplicate IDs in your HTML which is why it will not work - please show more of how the HTML is generated – Professor Abronsius May 07 '23 at 07:04
  • Hi @ProfessorAbronsius. I meant in datatables, the first row is the only part where datetimepicker works. As for the other rows, it is not working anymore and I have 19 data in that specific table. – typicalguy May 07 '23 at 07:06
  • Hi @ProfessorAbronsius, I have added a photo so that you could check it. Thanks – typicalguy May 07 '23 at 07:09
  • 1
    Hi, in every td tag you have that pop-up html . If yes , then issue is with duplicate ids change that to class and see if that works . – Swati May 07 '23 at 07:24
  • Hi @Swati. Thank you. It worked. I forgot that ID where meant for only single element. Thank you – typicalguy May 07 '23 at 07:31
  • You are incorrectly using your `label` elements. A `label` must be associated with an input element of some type either using `for=element ID` or by wholly encapsulating the input element. As it seems the source of your issue revolves around duplicate IDs I suggest the latter approach - wrap the input within the label and remove the ID completely – Professor Abronsius May 07 '23 at 08:46
  • @ProfessorAbronsius Thanks for the note. I haven't entirely checked everything since I've been copy-pasting codes in my system since the concept is pretty much the same with every other page. – typicalguy May 07 '23 at 11:21

1 Answers1

0

Thanks to Swati, the problem was resolved. As mentioned, I just converted the code from ID to Class

Code

<td> <button type="button" class="btn btn-warning" data-target="#updateInt<?php echo $row['id'] ?>" data-toggle="modal"><i class="fa-solid fa-pencil"></i></button>

     <div class="modal fade" id="updateInt<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="updateInt" aria-hidden="true">
        <div class="modal-body">
          <div class="form-group">
          <label for="ester">Start Date</label>
          <input type="text" class="form-control datetimepicker11" name="datetimepicker1" value="<?php echo $row['ybegin']?>" required/>
        </div>
        <div class="form-group">
          <label for="ester">End Date</label>
          <input type="text" class="form-control datetimepicker12" name="datetimepicker2" value="<?php echo $row['yend']?>" required/>
         </div>
        </div>
     </div>
</td>

Script

<script type="text/javascript">

    jQuery(function(){
    
        jQuery('.datetimepicker11').datetimepicker({
            format:'Y/m/d',
            timepicker:false
        });
        
        jQuery('.datetimepicker12').datetimepicker({
        
            format:'Y/m/d',
            onShow:function( ct ){
            
                this.setOptions({
                    minDate:jQuery('.datetimepicker11').val()?jQuery('.datetimepicker11').val():false
                })
            },
            
            timepicker:false
        });
    });
</script>
typicalguy
  • 45
  • 7