Har*_*sha 5 ajax query-builder aem
我有以下代码库与您分享列出通过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>
Run Code Online (Sandbox Code Playgroud)
如果你有更好的想法,我想知道这一点.
干杯,
另一种方法是使用选择xtype的"options"属性,通过servlet或sling选择器从AJAX调用中获取下拉列表选项.小部件api(http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - 搜索"选择")对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获取选项.
归档时间: |
|
查看次数: |
1247 次 |
最近记录: |