Level 4

coral-checkbox issue in Carousel

Forum|Forum|7 years ago
January 17, 2019
2 replies
3626 views

Dear All,

I have a checkbox item called Add Button in my Carousel and the requirement is that when somebody will check the checkbox Add Button , then button text and button link will be visible.

So below is the cq.dialog

<addbutton

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

name="./includebutton"

text="Add button (bottom)"

value="{Boolean}true"/>

<buttontext

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldLabel="Button Text"

name="./btntext"/>

<link

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="Button Link"

name="./link"

rootPath="/content/Sunita"/>

Below is the HTL and JS for this requirement.

/************************* HTL ***********************/

<a class="landing-marquee-btn btn btn-trp-primary ${item.btnstyle}" href="${item.link @ extension='html'}" target="${item.newWindow?'_blank':''}">${item.btntext}</a>

</sly>

<a class="landing-marquee-btn btn btn-trp-primary btn-trp-primary" href="${item.link @ extension='html'}" target="${item.newWindow?'_blank':''}">${item.btntext}</a>

</sly>

</div>

/************************* JS ***********************/

(function ($, $document) {

$document.ready(function () {

$document.on("dialog-ready", function() {

if($("coral-checkbox[name='./includebutton'] :checked").length === 1){

$("input[name='./btntext']").parent().show();

$("input[name='./buttonLink']").parent().show();

} else {

$("input[name='./btntext']").parent().hide();

$("input[name='./buttonLink']").parent().hide();

}

$("coral-checkbox[name='./includebutton']").on("click", function() {

if($("coral-checkbox[name='./includebutton'] :checked").length === 1){

$("input[name='./btntext']").parent().show();

$("input[name='./buttonLink']").parent().show();

} else {

$("input[name='./btntext']").parent().hide();

$("input[name='./buttonLink']").parent().hide();

}

});

}(jQuery, jQuery(document)));

The issue here is , when I am trying to check the Add button checkbox then automatically in every carousel item the btntext and buttonLink is coming ,

as shown in below figure.

You can observe in the last picture that in the 2nd item , though Add Button is not checked in , still the button text is coming.

******************** BEFORE CHECKED IN ADD BUTTON****************************************

************** AFTER CHECKED IN ADD BUTTON****************************************

Please help me on this.

Thanks in advance

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

smacdonald2008

Level 10

Are you modifying the AEM CORE Carousel component?

S

sunitac70336244Author

Level 4

Hi Donald,

No I am not modifying the AEM CORE Carousel component. Actually this carousel component was developed in AEM 6.0 and it is migrated to AEM 6.4

So now in the existing carousel Business want to add three more items called Add Button , button text and button link.

My code is working fine without carousel , but in the carousel when I am clicking on the Add Button checkbox then automatically in every item , it is coming.

Gaurav-Behl

Level 10

You are using jQuery named selector which is not appropriate to handle this use case. Below is an example with explanation. Assume these are the textboxes in carousel, one per carousel item

Now when you use $("input[name='./btntext']"), it would select all the items with name './btntext' and not just a single element. You can check $("input[name='./btntext']").length in console to validate which would give you result as 3 and not 1

The solution is to use specific selectors or ids etc. to identify each unique element of carousel item 1, 2 & 3. There are various ways to achieve that.

E.g. https://api.jquery.com/multiple-attribute-selector/

HTH

kautuk_sahni

Community Manager

This might help you: AEM 6 Touch UI Show/Hide Checkbox Component Extension - Extension to the standard checkbox component. It enables hiding/…

Kautuk Sahni

S

sunitac70336244Author

Level 4

Dear Kautuk,

Thanks for the response and currently working what gaurav suggested. Once completed , i will inform everybody.

Gaurav-Behl

Level 10

Dear All,

I tried lots of option for showing the value of button text on click checkbox for multi field. But still I am facing the same issue.

While I select the one checkbox then automatically second checkbox value is showing , as shown below.

Option-1

I changed my java script like below and still was not able to fix.

//For the Load purpose $("coral-checkbox[name='./includebutton']").each(function() { toogleDiv($(this)); }); //For the Click purpose $("coral-checkbox[name='./includebutton']").on("click", function() { toogleDiv($(this)); }); function toogleDiv(_this) { var related_div = _this.next('div'); if ($(':checkbox', _this).is(":checked")) { related_div.show(); } else { related_div.hide(); } }

The conntent.xml for dialog is below in Option-2

Option-2

I followed the steps mentioned in the below URL and no luck. I have pasted my content.xml for dialog and below JS file.

AEM 6 Touch UI Show/Hide Checkbox Component Extension - Extension to the standard checkbox component. It enables hiding/…

***************************** Content.xml for dialog*********************************************************

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

jcr:primaryType="nt:unstructured"

jcr:title="Hero Poster Marquee"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[trowecorp.landing.poster.carousel]"

width="900px">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<carousel

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true"

fieldLabel="Carousel Slides">

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container"

name="./NestedSlides">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<headerSize

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldLabel="Header Size"

name="./headerSize">

<font32

jcr:primaryType="nt:unstructured"

text="Font Size-32,Line-height-46"

value="hero-title32"/>

<font45

jcr:primaryType="nt:unstructured"

defaultValue="true"

text="Font Size-45,Line-height-46"

value="hero-title45"/>

<font50

jcr:primaryType="nt:unstructured"

defaultValue="true"

text="Font Size-50,Line-height-60"

value="hero-title50"/>

</items>

</headerSize>

<header

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldLabel="Section Header"

name="./title"

useFixedInlineToolbar="{Boolean}true">

<format

jcr:primaryType="nt:unstructured"

features="*"/>

<justify

jcr:primaryType="nt:unstructured"

features="*"/>

<lists

jcr:primaryType="nt:unstructured"

features="*"/>

<paraformat

jcr:primaryType="nt:unstructured"

features="*"/>

<links

jcr:primaryType="nt:unstructured"

features="*"/>

<image

jcr:primaryType="nt:unstructured"

features="*"/>

<findreplace

jcr:primaryType="nt:unstructured"

features="*"/>

<subsuperscript

jcr:primaryType="nt:unstructured"

features="*"/>

<spellcheck

jcr:primaryType="nt:unstructured"

features="*"/>

<misctools

jcr:primaryType="nt:unstructured"

features="*">

<trademark

jcr:primaryType="nt:unstructured"

entity="&#8482; &nbsp;"/>

<copyright

jcr:primaryType="nt:unstructured"

entity="&#169; &nbsp;"/>

<registered

jcr:primaryType="nt:unstructured"

entity="&#174; &nbsp;"/>

<mdash

jcr:primaryType="nt:unstructured"

entity="&#151; &nbsp;"/>

<leftdoublequote

jcr:primaryType="nt:unstructured"

entity="&#8220; &nbsp;"/>

<rightdoublequote

jcr:primaryType="nt:unstructured"

entity="&#8221; &nbsp;"/>

<servicemark

jcr:primaryType="nt:unstructured"

entity="&#8480; &nbsp;"/>

</chars>

</specialCharsConfig>

</misctools>

<styles

jcr:primaryType="nt:unstructured"

features="*">

</styles>

</rtePlugins>

<inline

jcr:primaryType="nt:unstructured"

toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">

<justify

jcr:primaryType="nt:unstructured"

items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

ref="justify"/>

<lists

jcr:primaryType="nt:unstructured"

items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

ref="lists"/>

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

<styles

jcr:primaryType="nt:unstructured"

items="styles:getStyles:styles-pulldown"

ref="styles"/>

</popovers>

</inline>

</cui>

</uiSettings>

</header>

<backgroundimage

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

fieldLabel="Background Image"

name="./bgImage"

rootPath="/content/dam/trowecorp"/>

<toggle

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/checkbox"

class="showhide"

id="toggle"

name="./toggle"

showhide-target=".showhide-target"

text="Show/Hide Toggle"

value="true"/>

<someContainer

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container"

class="showhide-target"

showhide-target-value="true">

<someInput

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/textfield"

fieldLabel="Some Input"

name="./someInput"/>

</items>

</someContainer>

</items>

</column>

</items>

</field>

</carousel>

</items>

</column>

</items>

</content>

</jcr:root>

and my java script for above dialog is below.

(function (document, $) {

"use strict";

// listen for dialog injection

$(document).on("foundation-contentloaded", function (e) {

$(".showhide").each(function () {

showHide($(this));

});

// listen for toggle change

$(document).on("change", ".showhide", function (e) {

showHide($(this));

});

// show/hide our target depending on toggle state

function showHide(el) {

var target = el.data("showhideTarget"),

value = el.prop("checked") ? el.val() : "";

// hide all targets by default

$(target).not(".hide").addClass("hide");

// show any targets with a matching target value

$(target).filter("[data-showhide-target-value=\"" + value + "\"]").removeClass("hide");

}

})(document, Granite.$);

Can you please help me on this. Thanks in advance.

I don't see the recommendations being implemented in the code. The issue is with this code:

$("coral-checkbox[name='./includebutton']") will pick up multiple elements. You need to use ids like

$("#carousel_id1").click(function(e){ // do something});

$("#carousel_id2").click(function(e){ // do something});

$("#carousel_id3").click(function(e){ // do something});

I'll see if I can fix it later today and share it.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded