Question

selectively disable delete row button

Forms

Updated May 9, 2024

asked on August 3, 2016

I'm using Forms 10.1 and trying to design a system that combines field lookups in a table with user input. But I need to protect the field lookup rows from being deleted accidentally. The user can add rows, but they can also delete any row, not just the ones they added. The fields populated by lookup are set as read only but that doesn't protect them from being deleted by a palsy clicker.

The attached picture demonstrates my goal.

Thanks for any ideas.

delete row button.png (54.43 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on August 9, 2016

I believe the issue has to do with the delay of doing a lookup. Hopefully this work around can work for you. #q11 is the id of the table add row button

$(document).ready(function(){
  function disableBtn() {
  	$("#q12 .cf-field input").each(function(index){
      if($(this).is('[readonly]')) {
      	console.log('readonly');
        $(this).closest("tr").find(".action .cf-table-delete").addClass('hideBtn');
      }
    });
   }
  $('#q11').click(function() {
    disableBtn();
  });
});

0 0

replied on August 9, 2016

That workaround will work for us. Thank you for working through this with me!

0 0

replied on August 9, 2016

No problem, i'm glad it worked!

0 0

Replies

replied on August 3, 2016

Hi Erik,

This just requires one line of css. Just replace the #q36 with the id of the table input

#q36 tr:not(:last-child) .action .cf-table-delete {display: none !important}

0 0

replied on August 3, 2016

Thank you. That is very close to what I need. Please see the attached picture. In testing I added two rows, and can only delete the latest one. I can roll back the deletes row by row, but not delete a specific row unless it is the most recent. Is there a way to more precisely identify it than tr:not(:last-child)?

delete row button 2.png (41.92 KB)

| Download

0 0

View 1 previous reply

replied on August 3, 2016

I want to protect every row filled by the lookup rules. That could be 0 rows, or many rows.

0 0

replied on August 4, 2016

To do this will require some javascript as well. Add the css rule to your styles, and then add the script.

.hideBtn{display: none !important;}

$(document).ready(function(){
  $("#q48 .cf-field input").each(function(index){
    if($(this).is('[readonly]')) {
    	$(this).closest("tr").find(".action .cf-table-delete").addClass('hideBtn');    
    }
  });
});

0 0

replied on August 5, 2016 • Show version history

It seems the scripts are running BEFORE the lookup fields finish running so they aren't properly applied to each row. Is there a trigger or event I can watch for that lookup fields are finished loading on a page?

0 0

replied on August 8, 2016

Try this instead:

$(document).ready(function(){
  $("#q48 .cf-field input").change().each(function(index){
    if($(this).is('[readonly]')) {
    	$(this).closest("tr").find(".action .cf-table-delete").addClass('hideBtn');    
    }
  });
});

0 0

View 2 previous replies

replied on August 9, 2016

Thank you for your repeated suggestions Xavier. Would you please take a look at this screenshot and see if I'm implementing it incorrectly? The delete buttons remain on read only rows.

delete row button code.png (62.68 KB)

| Download

0 0

replied on August 9, 2016

Did you add .hideBtn{display: none !important;} to the css? If you inspect the delete button through web dev tools is the class added?

0 0

replied on August 9, 2016

.hideBtn{display: none!important;} is in the css section in the screenshot. When I inspect the delete button, hideBtn does NOT appear in the list of classes on button.

0 0

replied on August 9, 2016

Strange, it works on my end. Can you add a console.log('readonly'); statement inside the if block?

0 0

replied on August 9, 2016

I'm not getting anything in the console. That if statement doesn't appear to be happening. This is what my javascript looks like now. This should be writing to the console every time a field with readonly changes right?

$(document).ready(function(){
  $("#q4 .cf-field input").change().each(function(index){
    if($(this).is('[readonly]')) {
      	console.log('readonly');
      	$(this).closest("tr").find(".action .cf-table-delete").addClass('hideBtn');
    }
  });
});

0 0

replied on May 9, 2024

Might there be a way to accomplish the same thing within Designer Mode? I know JavaScript code needs to be called in a completely separate way compared to Classic Mode, but I don't know enough to know what pieces to convert to make them work within Designer.

Thanks for anyone that can assist, or alternately please let me know if I should do up a separate post for this!

Thanks in advance...

Marty Gaffney
Town of Okotoks

0 0

You are not allowed to follow up in this post.

Question

Question

selectively disable delete row button

Answer

Replies

Sign in to reply to this post.