SOLVED
Coral UI select multiple field can't remove all value
Hi Friends,
I am using selected multiple field. But it have problem, when I remove all values that I selected and save it. It can't save with none value selected.
Example: I selected one value and save ok.
after that I go to "Views properties" to edit that field and remove selected value.
When I save it comeback again.
If I selected more than one options and save. After that I remove some option and keep one or more than one selected and save, it work fine. If I remove all options and save it, It come back the option before I remove.
Example: I select 2 options and save ok.
I remove one option and save it work fine.
If I select 2 options and remove all and save, it back to.
My code to bind data into select field and check option fields as below.
The Json data as below: http://localhost:4502/.abcbenefits.json/
[{"id":"1","description":"asdf à","langCode":"en"},{"id":"2","description":"asdf ádf","langCode":"en"},{"id":"3","description":"adsf sadf","langCode":"en"}]
<script>
$(document).ready(function(){
var host_url = window.location.protocol + "//" + window.location.host + "/.abcbenefits.json/";
var benefitSelectedValue = abcbenefits.values;
// load property check on edit page or created page.
var pageNameID = document.getElementById("cq-sites-properties-form");
// is create page
if(pageNameID === null) {
//loadServiceDataFromURL(host_url);
}
// is edit page
else {
benefitSelectedValue = abcbenefits.values;
loadServiceDataFromURL(host_url);
}
function loadServiceDataFromURL(host_url) {
$.ajax(host_url, {
dataType: "json",
contentType: "application/json",
async: false,
success: function(rawData, status, xhr) {
try {
benefitBindData(rawData);
} catch (err) {
console.log(err);
}
},
error: function (xhr, status, err) {
console.log(err);
}
});
}
function benefitBindData(data) {
$("#abcbenefits> coral-select-item").remove();
var x = document.getElementById("abcbenefits");
var selectedItem = [];
data.forEach(function(item) {
var option = document.createElement("coral-select-item");
option.innerHTML = item["description"];
option.value = item["id"];
x.appendChild(option);
if (isSelectedBenefit(item["id"], benefitSelectedValue)) {
//option.selected = true;
selectedItem.push(option); //push selected item into an array
}
});
setTimeout(function(_selectedItems){
_selectedItems.forEach(function(option) {
option.selected = true;
});
}, 100, selectedItem)
}
function isSelectedBenefit(benefitId, benefitSelectedValues){
for(var i = 0; i < benefitSelectedValues.length;i++){
if(benefitId == benefitSelectedValues[i]) return true;
}
return false;
}
});
</script>
Please help me,
Thank you so much,
1 Accepted Solution
Hi,
I would suggest you to first try to populate dropdown using datasource instead of DOM manipulation.
Adobe Experience Manager Help | Using Granite DataSource objects to populate AEM Touch UI objects
Thanks
Arun
Arun Patidar
Hi,
Can you try to create a sling servlet and registered with resourceType and use this resource type in datasource node.
Inside Sling servlet you can make a ajax request to get json and parse that json and convert into ValueMap and add to datasource.
Example :
https://github.com/arunpatidar02/aem63app-repo/blob/master/java/HelloWorldCompDDServlet.java
Arun Patidar
