JQuery Event executed only once

Question

I am trying to trigger a JQuery Ajax event for a bunch of buttons.

Here is the code in index.php file :

<?php 
foreach($data as $d) {
  $myid = $d['id']; 
  $mystatus = $d['status']; 
  ?>

  <div class="input-group-prepend">
    <button id="submitbtn" type="button" class="myupdatebtn btn btn-success" data-id="<?php echo $myid; ?>" disabled>Finish Task</button></div>

    <li class="nav-item">
      <a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
        <i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
        <p>
          <?php echo $d["title"];
            if ($d['type'] == "task") { ?>
              <span id="updatemsg-<? echo $d['id'];?>" class="right badge <?php if($mystatus == "TERMINATED"){echo "badge-success";} else {echo "badge-danger";}?>"><?php setTerminated($conn, $myid)?></span>
          <?php } ?>
        </p>
      </a>
  </li> 
<?php } ?>

Where the menu items (titles, status and icons) are extracted from a MySQL Database.

Here is the JAVASCRIPT (JQUERY) file with AJAX call :

$('.myupdatebtn').on('click', function() { 
    var id = $(this).data('id'); 

    $.ajax({ 
      url: 'includes/updatestatus.php', 
      type: 'POST', 
      data: {id:id}, 
      dataType: 'html', 
      success: function(data)
      { 
        if (data) 
        { 
          $('#submitComment').attr("disabled", true); 
          $('#customComment').val("");
          $('#updatemsg-'+id).html("TERMINATED").removeClass('badge-danger').addClass('badge badge-success'); 
          console.log(id);
        } 
        else 
        { 
          $('#customContent').load("custom/static/error.html"); 
         } 
       }, 
       error: function(jqXHR, textStatus, errorThrown)
       { 
         $('#customContent').html("ERROR MSG:" + errorThrown); 
       } 
    }); 
});

This is the code for the updatestatus.php file :

 <?php

    include("db.php");
    $id = $_POST['id'];
    $query = "UPDATE mytable SET status='TERMINATED' WHERE id='$id'";
    mysqli_query($conn, $query);
      
    ?>

As you can read from the code, when the button is clicked, it will be disabled and the input will be empty. The problem is that this code runs only once, after that the button will not updated the DATABASE and the DOM will not be updated (only after refresh and press the button again).

Is there a way to terminate the JQuery event after each iteration (Button pressed for every menu item) and make it available again to be executed?

Answer 1

You said you have "bunch of buttons.", I see only 1 in your code.

But if you have bunch of buttons with same class but different id, this code will work.

$('.myupdatebtn').each(function(){
$(this).on('click', function() { 
    var id = $(this).data('id');
    $.ajax({ 
      url: 'includes/updatestatus.php', 
      type: 'POST', 
      data: {id:id}, 
      dataType: 'html', 
      success: function(data)
      { 
        if (data) 
        { 
          $('#submitComment').attr("disabled", true); 
          $('#customComment').val("");
          $('#updatemsg-'+id).html("TERMINATED").removeClass('badge-danger').addClass('badge badge-success'); 
          console.log(id);
        } 
        else 
        { 
          $('#customContent').load("custom/static/error.html"); 
         } 
       }, 
       error: function(jqXHR, textStatus, errorThrown)
       { 
         $('#customContent').html("ERROR MSG:" + errorThrown); 
       } 
    }); 
});
})    

Give appropriate ids to buttons, so that your updatestatus.php works correctly.

$('.mybtn').each(function(){
  $(this).click(function(){
    alert("You clicked the button with id '"+this.id+"' call ajax do whatever");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Bunch of buttons right?</h2>

<button id="1" class="mybtn">btn1</button><br/>
<button id="2" class="mybtn">btn1</button><br/>
<button id="3" class="mybtn">btn1</button><br/>
<button id="4" class="mybtn">btn1</button><br/>
<button id="5" class="mybtn">btn1</button><br/>

I couldn't understand what you meant by this 'Is there a way to terminate the JQuery event after each iteration (Button pressed for every menu item) and make it available again to be executed?', but as I know you need an active event listener, which triggers all the time button is clicked?

And one more thing I noticed, you are using if(data){//code} but what data?, you are not returning anything from php file, return something.

 <?php

    include("db.php");
    $id = $_POST['id'];
    $query = "UPDATE mytable SET status='TERMINATED' WHERE id='$id'";
    if(mysqli_query($conn, $query)) echo "1";
    else echo "2";
  ?>

Then use if(data === 1) {//do task} else if(data === 2){//Do else task}.