Question

我有以下代码库与您分享列出通过AJAX调用使用查询构建器获取的页面。我们必须传递URL和参数以从我们提供的URL中获取子页面。

我已经安装了一些console.log来跟踪每个州的值。用你的项目替换它。

<featurearticles
    jcr:primaryType="cq:Widget"
    fieldLabel="Article Pages"
    itemId="selectauthorId"
    name="./authorselect"
    type="select"
    xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection"/>
    <listeners
        jcr:primaryType="nt:unstructured"
        loadcontent="function(box,value) { 
        CQ.Ext.Ajax.request({ 
            url: '/bin/querybuilder.json', 
            success: function(response, opts) { 
                console.log('Response from the ajax'); 
                var resTexts = $.parseJSON(response.responseText); 
                var selectopts = []; 
                console.log(resTexts); 
                $.each(resTexts.hits, function(key, page) { 
                    console.log(page); 
                    selectopts.push({value: page['path'], text:page['name']}); 
                }); 
                console.log(selectopts); 
                box.setOptions(selectopts); 
            },  
            params: {
            'type' :'cq:Page', 
            'group.1_path' : '/content/<PROJECT_NAME>/Feature_Articles' 
            } 
        }); 
       }"
       selectionchanged="function(box,value) { 
        var panel = this.findParentByType('panel');
        var articleTitle = panel.getComponent('articleTitleId');

        CQ.Ext.Ajax.request({ 
            url: value + '/_jcr_content/par/featurearticleintro.json',
            success: function(response, opts) {
                console.log('success now');
                var resTexts = $.parseJSON(response.responseText); 
                console.log(resTexts);
            },
            failure: function(response, opts) {                    
                console.log('server-side failure with status code ' + response.status);
            }
        });            
    }"/>
</featurearticles>

如果你有更好的想法，我想了解这一点。

干杯，

Answer 1

另一种方法是使用选择xtype的“options”属性，通过servlet或sling选择器从AJAX调用中获取下拉列表选项。小部件api（http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - 搜索“selection”）对options属性说明了这一点：

如果options是字符串，则假定它是指向JSON的URL 返回选项的资源（与上面相同的结构适用）。这应该是绝对URL，也可以使用路径使用占位符编辑的内容资源（Selection.PATH_PLACEHOLDER =“$ PATH”），例如： $ PATH.options.json。

因此，构建一个将使用JSON响应AJAX请求的servlet可能是一种更简洁的方法，然后将此servlet作为“options”属性。例如，属性可能类似于options="/libs/myServlet"或options="$PATH.options.json"之类的内容。这可能会使对话更清晰（不需要监听器），并且它使用内置的CQ功能通过AJAX获取选项。

Answer 2

我们可以使用动态下拉列表，如下所示：

<item
    jcr:primaryType="cq:Widget"
    fieldLabel="Item"
    name="./item"
    optionsRoot="root"
    options="/bin/service/item.json"
    type="select"
    xtype="selection"/>

选项：url将返回选择xtype

的json格式

optionsRoot：json

的根项的名称

optionsTextField：文本字段的名称（默认值：“text”）

optionsValueField：值字段的名称（默认值：“value”）

json示例：{“root”：[{“text”：“Item 1”，“value”：“Value 1”}，{“text”：“Item 2”，“value”：“Value 2 “}，{”text“：”第3项“，”值“：”价值3“}}}

Selection xtype

如何在CQ5中添加包含页面列表的下拉列表？

2 个答案: