Multiple Functions When Clicking a Button Twice

Question

So I currently have a table where I can press a button and "deactivate" a row. By deactivating the row, all that happens is the opacity changes and the row appears grayed out signifying the row is "Deactivated." The "Deactivate" button also changes to "Activate." What I am wanting is to be able to then hit the "Activate" button and be able to un-gray the row and the button would then change back to "Deactivate."

Here is some of my code...

HTML/PHP:

<tr>
  <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
  <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
  <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
  <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>     
  <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
  <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
  <td><button class="edit" name="edit">Edit</button>
  <button class="deactivate" name="deactivate">Deactivate</button></td>
</tr>

JavaScript:

// ----- Deactivate Row -----

$(document).ready(function() {
  $('.deactivate').click(function() {
    var $this = $(this);

    if ($this.html() === 'Deactivate') {
      $this.html('Activate');
      var result = confirm("Are you sure you want to deactivate this entry?");
      if(result) {
        $this.closest('tr').css('opacity', 0.5);
      }
    }
  });
});

Answer 1

To achieve this you just need to slightly restructure your logic to incorporate a class on the tr element which can be used to signify it's active state. Try this:

 $(document).ready(function() { $('.deactivate').click(function() { var $this = $(this); var $tr = $this.closest('tr'); var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate'; if (confirm('Are you sure you want to ' + action + ' this entry?')) { $tr.toggleClass('deactivated'); $this.text(function(i, t) { return t == 'Deactivate' ? 'Activate' : 'Deactivate'; }); } }) });

 .deactivated { opacity: 0.5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="mr_id" contenteditable="false"> MR_ID </td> <td class="mr_name" contenteditable="false"> MR_Name </td> <td class="buyer_id" contenteditable="false"> Buyer_ID </td> <td class="poc_n" contenteditable="false"> MR_POC_N </td> <td class="poc_e" contenteditable="false"> MR_POC_E </td> <td class="poc_p" contenteditable="false"> MR_POC_P </td> <td> <button class="edit" name="edit">Edit</button> <button class="deactivate" name="deactivate">Deactivate</button> </td> </tr> <tr> <td class="mr_id" contenteditable="false"> MR_ID </td> <td class="mr_name" contenteditable="false"> MR_Name </td> <td class="buyer_id" contenteditable="false"> Buyer_ID </td> <td class="poc_n" contenteditable="false"> MR_POC_N </td> <td class="poc_e" contenteditable="false"> MR_POC_E </td> <td class="poc_p" contenteditable="false"> MR_POC_P </td> <td> <button class="edit" name="edit">Edit</button> <button class="deactivate" name="deactivate">Deactivate</button> </td> </tr> <tr> <td class="mr_id" contenteditable="false"> MR_ID </td> <td class="mr_name" contenteditable="false"> MR_Name </td> <td class="buyer_id" contenteditable="false"> Buyer_ID </td> <td class="poc_n" contenteditable="false"> MR_POC_N </td> <td class="poc_e" contenteditable="false"> MR_POC_E </td> <td class="poc_p" contenteditable="false"> MR_POC_P </td> <td> <button class="edit" name="edit">Edit</button> <button class="deactivate" name="deactivate">Deactivate</button> </td> </tr> <tr> <td class="mr_id" contenteditable="false"> MR_ID </td> <td class="mr_name" contenteditable="false"> MR_Name </td> <td class="buyer_id" contenteditable="false"> Buyer_ID </td> <td class="poc_n" contenteditable="false"> MR_POC_N </td> <td class="poc_e" contenteditable="false"> MR_POC_E </td> <td class="poc_p" contenteditable="false"> MR_POC_P </td> <td> <button class="edit" name="edit">Edit</button> <button class="deactivate" name="deactivate">Deactivate</button> </td> </tr> </table>

Answer 2

It's good idea to play with classes instead. So if the button/row is deactivated give a class to it and toggle the same on click of a button.

So the code might look like this,

$('.deactivate').click(function() {
        var $this = $(this);
        var parentrow=$(this).parents('tr');
        if (parentrow.hasClass('deactivated')) {
            var result = confirm("Are you sure you want to activate this entry?");
            if (result) {
                $this.html('Deactivate');
                parentrow.css('opacity', 1);
            }
        } else {
            var result = confirm("Are you sure you want to deactivate this entry?");
            if (result) {
                $this.html('Activate');
                parentrow.css('opacity', 0.5);
            }
        }
        parentrow.toggleClass('deactivated');
});

In above code we're first check if the row has class called deactivated , if yes we will ask user if he/she wants to activate it again and do the changes accordingly.

If the row doesn't have class called deactivated we will ask user a confirmation to deactivate the same and do the changes accordingly.

We've used parents() method of a jQuery to access the parent of a clicked element.