In one of my dialogs, I have a field with an xtype of "pathfield". Depending on the value of this field, I want to change the options of the "select-box" (xtype="selection",type="select").
I have used listeners and added a function on events "change" and "dialogclose" for "pathfield" field.
I can call the servlet and it is sending the JSON response with options, however, I am unable to populate the select-box with these options.
The following is code of the dialog.xml
<select-product jcr:primaryType="cq:Widget"
fieldDescription="Select Product (Product Details Page)"
fieldLabel="Select Product"
height="{Long}40" key="productPath"
name="./productPath"
style="height:21px"
width="{Long}350"
rootPath="/content/MY_MSM_PATH"
xtype="pathfield">
<listeners jcr:primaryType="nt:unstructured"
change="function(){ var selectBox=$('select[name=features]');
$.getJSON('/bin/featuresservlet?path=' + this.value,
function(jsonData){
$.each(jsonData, function(i,data){
$('<option>').val(data.value).text(data.name).appendTo('select[name=features]');
});
}); }"
dialogclose="function(){
var selectBox=$('select[name=features]');
$.getJSON('/bin/featuresservlet?path=' + this.value, function(jsonData){
$.each(jsonData, function(i,data){
$('<option>').val(data.value).text(data.name).appendTo('select[name=features]');
});
}); }" />
</select-product>
<features jcr:primaryType="cq:Widget"
fieldLabel="Select Features:"
key="features"
name="./features"
type="select"
xtype="selection" />