0

I have some problem.

I'm doing update and delete operation using php and bootstrap only. I'm currently stuck at update because only first row in table my modal detect the detail of id. on others row, my model does not detect and not appear the detail based on id selected.

This is my modal button, the delete is working but the update is not. It works for data at first row.

<td>
 <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editModal" id="edit" 
  period_id="<?=$claimlist['period_id']?>" 
  year="<?=$claimlist['year']?>"
  month="<?=$monthName;?>" 
  start_date="<?=$claimlist['start_date']?>" 
  end_date="<?=$claimlist['end_date']?>" >Edit</button>
</td>

My modal process:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Claim Period Information</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
     </div>
     <form action="editperiodprocess.php" id="form" method="post" name="form">
       <div class="modal-body">
         <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
           <tr>
             <td>Month/Year: <input type="hidden" name="period_id" id="period_id" value="" ></td>
             <td><span id="monthyear"></td>
           </tr>
           <tr>
             <td>Start Date:</td>
             <td><input type="date" name="start_date" id="start_date" value="" class="startdate"></td>
           </tr>
           <tr>
             <td>Start Date:</td>
             <td><input type="date" name="end_date" id="end_date" value="" class="enddate"></td>
           </tr>
         </table>
        </div>
       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" form = "form" value="Approve" class="btn btn-primary">Submit</button>
       </div>
     </form>
   </div>
 </div>
</div>

My Ajax:

<script>
  $( function() {

    $("#edit").on("click",function(){
      $("#period_id").val( $(this).attr('period_id') );
      $("#monthyear").html( $(this).attr('month') + " " + $(this).attr('year') );
      $("#start_date").val( $(this).attr('start_date') );
      $("#end_date").val( $(this).attr('end_date') );
    });

  } );
</script>

I don't know why it is not working for different row in table.

user3239674
  • 67
  • 6

1 Answers1

0

You have ID "#edit" on each row. ID can only be used once. Please see Several elements with the same ID responding to one CSS ID selector

So you should remove the ID from the button, add a class to the button instead e.g. editMe so in your code you'd have class="btn btn-primary editMe"

Then update your jQuery to:

$(".editMe").click(function(){
    //do your stuff here
});

This should now work for every button as it's triggered by class (many buttons) rather than ID (first button only)

Onimusha
  • 3,348
  • 2
  • 26
  • 32
  • Wow..just wow...it solve my issue.. Thank you!! really appreciate.. last question.. do i need to assign different class for button if I want to create another button modal? – user3239674 May 15 '20 at 04:07
  • That depends on what you want to do. If it'll do exactly the same as what you have in `$(".editMe").click(` function then no need for new class name. If the new button does something else then you can create another click event using the new class name. Remember to mark the above answer as solved if it's solved your issue. – Onimusha May 15 '20 at 04:12