SOLVED
Dropdown in Multifield in 6.2, dynamically show/hide widgets
Below is my custom listener.js code
Hope this will help you.
(function ($, $document) {
"use strict";
//alert("test");
$(document).on('foundation-contentloaded', function(e) {
//alert("contentloaded content ::: "+JSON.stringify(e));
//showHide();
});
$document.on("dialog-ready", function(e) {
var $dialog = $('.cq-dialog-floating'); // (3)
//alert($dialog);
var componentPath = $dialog.attr('action').replace('_jcr_content', 'jcr:content');
//alert("componentPath is ::::: "+componentPath);
$.ajax({
url:componentPath+'.json',
type:'GET',
dataType:'json',
async: true,
success: function(resp) {
var imagesval = resp.images;
if(imagesval){
var olElement = $("ol").children();
$.each(imagesval, function 
{
var thisOlElement = olElement[i];
var imageItem = imagesval[i];
var jimage = JSON.parse(imageItem);
if(jimage.mediaType == 'image') {
$(thisOlElement).find('.coral-Select-button-text').first().text("Image");
$($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL' || obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
} else if(jimage.mediaType == 'video') {
$(thisOlElement).find('.coral-Select-button-text').first().text("Video");
$($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
var camelTitle = jimage.autoPlay.replace(/(?:^|\s)\w/g, function(match) {
return match.toUpperCase();
});
$(thisOlElement).find('.coral-Select-button-text').last().text(camelTitle);
} else if(jimage.mediaType == 'youTubeVideo') {
$(thisOlElement).find('.coral-Select-button-text').first().text("Youtube Video");
$($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
}
});
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("there is some error");
}
});
});
$(document).on('selected.select', function(e) {
var currentLi;
var index = 1;
if($("ol").children().length == 1) {
currentLi = $("ol").children("li:last");
} else {
index = 2;
currentLi = e.target.closest("li");
}
if(e.selected == 'Select') {
if(index == 1) {
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
currentLi.find('coral-checkbox').hide();
} else if(index == 2) {
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
$(currentLi).find('coral-checkbox').hide();
}
}
if(e.selected == 'image') {
if(index == 1) {
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
currentLi.find('coral-checkbox').hide();
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL') {
$(this).closest('.coral-Form-fieldwrapper').show();
}
}));
} else if(index == 2) {
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
$(currentLi).find('coral-checkbox').hide();
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL') {
$(this).closest('.coral-Form-fieldwrapper').show();
}
}));
}
}
if(e.selected == 'video') {
if(index == 1) {
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {
$(this).closest('.coral-Form-fieldwrapper').show();
}
}));
currentLi.find('coral-checkbox').show();
} else if(index == 2) {
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {
$(this).closest('.coral-Form-fieldwrapper').show();
}
}));
$(currentLi).find('coral-checkbox').show();
}
}
if(e.selected == 'youTubeVideo') {
if(index == 1) {
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
currentLi.find('coral-checkbox').hide();
$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').show();
}
}));
} else if(index == 2) {
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {
$(this).closest('.coral-Form-fieldwrapper').hide();
}
}));
$(currentLi).find('coral-checkbox').hide();
$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){
if(obj.innerHTML == 'Youtube ID') {
$(this).closest('.coral-Form-fieldwrapper').show();
}
}));
}
}
});
})($, $(document));
Related Conversations
