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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related