Readonly textarea element in a repeat group

[mirceat]

Hello,

How can i set a textarea element in a repeat group to readonly only if not empty? I tried this code but i can't make it work, the textarea remain editable:

var element = $('group675').getElements('textarea[id^=aplicatii_cm_tickets_675_repeat___solicitare]');
if (element !=='') { 
$('aplicatii_cm_tickets_675_repeat___solicitare').setAttribute('readOnly', 'readOnly');
$('aplicatii_cm_tickets_675_repeat___solicitare').addClass('readonly');
}

i also tried this code, same result as above:

var i = this.getRepeatNum();
var element = document.id('aplicatii_cm_tickets_675_repeat___solicitare_'+i).value;
if (element !=='') { 
$('aplicatii_cm_tickets_675_repeat___solicitare').setAttribute('readOnly', 'readOnly');
$('aplicatii_cm_tickets_675_repeat___solicitare').addClass('readonly');
}

Thank you

 

[cheesegrits]

Are you trying to do this on load?

Easiest way would be to fire an event from the Element JS events, on load ...

disableEmpty(this);

... then in your form_X.js ...

function disableEmpty(el) {
   if (el.getValue() !== '') {
      jQuery(el.element).prop('disabled', true);
   }
}

That way you don't have to worry about figuring out the repeats, we simply fire the event once for each instance when the form is loaded, which passes a reference to the element's object ("this") , which has a reference to the DOM element (el.element).

-- hugh

 

[mirceat]

unfortunately, i can't make it work

the Element JS events, on load: disableEmpty(this);
i've created a js file in components/com_fabrik/js: 8.js
the textarea field is still editable when i edit the row

You can test it here using the login data from My Sites. The Extplorer component is installed on this website, so you can modify the js file if you want.

Thank you

 

[mirceat]

btw, it might be a good idea to add the option "readonly", "disable" etc in addition to existing actions (hide/show/slide toggle etc) in the JS action list

 

[cheesegrits]

I added disable/enable a week or so ago, it's in github.

Sent from my Nexus 7 using Tapatalk

 

[mirceat]

Indeed, but the disable will remove the content of the textarea and i need to keep it and make the element readonly

 

[cheesegrits]

Try that.

For some reason 'this' seems to be the DOM element, not the Fabrik object, on load. Not sure why.

-- hugh

 

[mirceat]

I'm sorry but I don't understand..what to try? "that" insted of "this" or to use the option "disable"?

 

[cheesegrits]

PS ... I'm adding readonly / notreadonly as JS FX options, it'll be in github soon.

-- hugh

 

[mirceat]

now i saw that you have made a modification in the form_8.js file, it's working for the first textarea but when i add a new group, the textarea field is already set to readonly even if there is no content for this second group.

 

[cheesegrits]

I'm sorry but I don't understand..what to try? "that" insted of "this" or to use the option "disable"?

I fixed your code.

-- hugh

 

[cheesegrits]

now i saw that you have made a modification in the form_8.js file, it's working for the first textarea but when i add a new group, the textarea field is already set to readonly even if there is no content for this second group.

Probably because we clone the DOM form the first group, and although we rest "Fabrik things" to default, readonly is an attribute of the DOM element. So it'll stay readonly. So just add an else that sets the prop true.

-- hugh

 

[mirceat]

should i update to the github version? I'm asking because this code doesn't work, the second textarea is still readonly

function disableEmpty(el) {
   if (el.getValue() !== '') {
      jQuery(el).prop('readonly', true);
   } else {
      jQuery(el).prop('readonly', false);
   }
}

 

[cheesegrits]

Are you running the github changes that introduced the disable / enable? That also had a change that runs element js load events on group duplication. If you don't have that change, your event won't be firing when you add a group.

I haven't committed the changes with the read only event yet.


Sent from my HTC One using Tapatalk

 

[mirceat]

Maybe i'm doing something wrong but i can't make it work even with the latest github version..

 

[cheesegrits]

I committed the changes with the readonly action, btw.

Sent from my HTC One using Tapatalk

 

[mirceat]

Thank you, work fine now.

P.S: somehow related to textarea element: didn't test it before updating to the latest github version, but now i no longer can use autofill and textarea in a repeat group, even if the textarea element doesn't have the wysiwyg editor enabled. you can test this here if you want

require js define jquery as  function m() 5:468:3
fields___field_class attach to form:TypeError: this.options.observe is null  fabrik.js:21:3
fields___field_subscription attach to form:TypeError: this.options.observe is null  fabrik.js:21:3
fields_6_repeat___field_extraoption_0 attach to form:TypeError: this.options.observe is null  fabrik.js:21:3
autofill - couldnt find element to observe  fabrik.js:21:3

 

[cheesegrits]

Autofill doesn't work in repeats, that's one of my ongoing backburner tasks.

-- hugh

 

[cheesegrits]

Try this ...

https://github.com/Fabrik/fabrik/commit/e5da2939a111b4021917341ca40b6bac340ad643

-- hugh

 

[mirceat]

Thank you but unfortunately, it doesn't fully work, it's ok for adding a new record but it doesn't work for editing an existing record, the autofill plugin is no longer triggered, see here