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);
      }
    }
  });
});

I am surprised.... well just do the opposite of what you did. Use a flip, like an attribute value to identify which action to take — Flying Gambit
– Flying Gambit, Commented Oct 4, 2016 at 13:04

Rory McCrossan · Accepted Answer · 2016-10-04 13:07:04Z

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>

Well, one question....after its grayed out and i want to activate again....the dialog box still says "Do you want to deactivate entry?" and not activate...

Alok Patel · Accepted Answer · 2016-10-04 13:08:36Z

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.

Collectives™ on Stack Overflow

Multiple Functions When Clicking a Button Twice

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related