Search code examples
javascriptoracle-databaseoracle-apextabular

targeting oracle apex tabular form columns using javascript

I have a tabular form which I need to disbale and re-enable some of the columns based on some conditions.

I have the below javascript in my dynamic action which is working. I am referencing the columns by their names (f01_0001, f01_0002, f02_0001, f02_0002....)

$("[name='f01']").each(function(i){  

     // columns to be disabled    
     var coltext5 = $("[name='f05']").get(i).id;  
     var checkbox8 = $("[name='f08']").get(i).id.substring(0,8);  

     $("#"+coltext5).prop( "disabled", true ); 
     $("#"+checkbox8).prop( "disabled", true );

})

But the issue I have is, if I switch the position of these columns, or add more editable columns to the tabular form, the name of these columns will be changed. e.g in the above example, if I add one more textbox before coltext5, then coltext5's name will become f06....

Is there any better way to reference the tabular form columns? like ID or class, something that's static and won't be changed even the position of columns are changed?

Thanks

Solution

  • I've hit this issue before, and I've successfully used data attributes to do it - e.g. https://jeffkemponoracle.com/2016/04/05/declarative-tabular-form-dynamic-totals/

    For example, you can set Element Attributes on the "Address" column to data-col="address", and refer to them in javascript using $("[data-col='address']").

    Of course, you have to add this to each column you need to refer to.