Add an eventhandler to a select filed in options dialog

[herr_lange]

Hi,

I'm developing a component for AEM 6, now I'm stuck. I need to change the shown tabs in the options dialog, on an onChange event (or something similar) hopefully thrown by the select field I'm using.

Here is the code for my select field:

<graphtype jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" emptyText="Please select a charttype." fieldLabel="Charttype" name="./chartType"> <items jcr:primaryType="nt:unstructured"> <chart1 jcr:primaryType="nt:unstructured" value="line" text="Line Chart" selected="{Boolean}true"/> <chart2 jcr:primaryType="nt:unstructured" value="bar" text="Bar Chart"/> </items> </graphtype>

And the tabs in need to switch:

<diagramm jcr:primaryType="nt:unstructured" jcr:title="Chart" sling:resourceType="granite/ui/components/foundation/section"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" margin="{Boolean}false"/> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> ... here some options ... </items> </column> </items> </diagramm>

These tabs all have a similar structure, but important divergences between their content.

My Questions:
Is there a way to activate one of these tabs an hide the other, depending on the selected item in the select field shown above?
How to implement this solution?

Thanks for your help.

[edubey]

Take a look at OOTB List components, it does same where tabs are hidden / shown based on item in select field.

You can see the listeners which does this in list component @ /libs/foundation/components/list/dialog

[herr_lange]

Thanks for your answer. But I need an implementation example for the Touch UI and their is this way not suported. I tried the way using jQuery from here: https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html.

I tested with this code:

(function($) { "use strict"; $(document).on('dialog-ready', function(){ alert('dialog opened'); }); $(document).ready(function(){ alert('Document ready\nTest'); // this is the only event I got }); })(jQuery);

But it seems to me that the dialog didn't throw any event.

[herr_lange · Accepted solution]

Found it. I had the wrong clientlib directory. It works fine now.