Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Update using javascript for coral touch ui tag based auto complete

Avatar

Level 8

Hi,

Does any one have any inputs as how can i fill tags when i get json response in javascript

I tried with below javascript code but the below tags does not show up under tag field when  touch ui dialog is loaded

========================================

$("#TagIdcomp").val(["/etc/tags/asset/guide"]);

or

$("#TagIdcomp").val("/etc/tags/asset/guide");

or

$("#TagIdcomp").val(["Asset:Guide""]);

=====================================

I have the tag

<tagRegion

         jcr:primaryType="nt:unstructured"

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

         fieldLabel=" Tag"

                                        multiple="{Boolean}true"

         name="../../tagsRegion"

        granite:id="TagIdcomp"

         mode="contains">

          <datasource

           jcr:primaryType="nt:unstructured"

           sling:resourceType="cq/gui/components/common/datasources/tags"/>

          <options

           jcr:primaryType="nt:unstructured"

           sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>

          <values

           jcr:primaryType="nt:unstructured"

           sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/tags"/>

                                    </tagRegion>

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

Yes below code is enough, with below code you are selecting item from list insteadof manual selection.

var tagVal = asset:guide"  ;

$(#TagIdcomp).find('ul.js-coral-Autocomplete-selectList > li[data-value="'+tagVal+'"]').click();



Arun Patidar

View solution in original post

16 Replies

Avatar

Community Advisor

Try below:

var tagList = $('#TagIdcomp').find('ul.js-coral-Autocomplete-tagList');

var tagTitle = 'Asset : Guide';

var tagVal = asset:guide

var nameProp = '../../tagsRegion';

tagList.append('<li role="option" tabindex="0" class="coral-TagList-tag" title="'+tagTitle+'"><button class="coral-MinimalButton coral-TagList-tag-removeButton" type="button" tabindex="-1" title="Remove"><i class="coral-Icon coral-Icon--sizeXS coral-Icon--close"></i></button><span class="coral-TagList-tag-label">'+tagTitle+'</span><input type="hidden" value="'+tagVal+'" name="'+nameProp+'"></li>');



Arun Patidar

Avatar

Level 8

Thanks  the Dialog showed  exactly as expected but with one issue.

Only when i try to remove the dialog that was added using javascript  that is 'Asset : Guide'  is not getting removed .It just stays there on the UI,but other tags which i select Manually from auto selection gets removed.

Do you have any idea how it could be solved??

Avatar

Community Advisor

Could be issue with event registeration.

you can write below code as well in same file to remove optionn but please validate end to end after adding and removing values from dialog and check values in node as well.

$(document).on("click",".cq-dialog-content .coral-TagList-tag-removeButton",function() {

    $(this).parent().remove();

});



Arun Patidar

Avatar

Level 8

Thanks again  now removing is works totally fine and data is saving in crxde properly.

But when tag  is add using  javascript  that is 'Asset : Guide'  and manually i select the 'Asset : Guide' it shows 2 times the same selection on dialog tag field. But the same does not happen with other tags it shows once.

Could we limit the tag display for 'Asset : Guide'  to 1 when selected manually it does not add again on dialog ui.

Any inputs on this will help.

Avatar

Community Advisor

Hi,

You can check if tag is already selected manually your script will not add tag.

And for reverse I need to check, but anyways when dialog is reopened it will show tag once.



Arun Patidar

Avatar

Level 8

Hi,

Yes like you mentioned the tag will show up once when opened.But for the tags which were added using javascript .I can select the same tag once more and shows on UI dialog as twice that would be confusing to authors.Hence need your inputs on that.

Avatar

Community Advisor

Hi,

It seems there are event written on selection and removed to avoid duplicate selection.

You can simply do click when your option is in the list.

No need to write the code for remove also.

Example

$('#TagIdcomp').find('ul.js-coral-Autocomplete-selectList > li[data-value="asset:guide"]').click();



Arun Patidar

Avatar

Level 8

Hi ,

Did you mean the below is enough now

var tagVal = asset:guide"  ;

$(#TagIdcomp).find('ul.js-coral-Autocomplete-selectList > li[data-value="'+tagVal+'"]').click();

        

Also i can remove the below variables  from previous discussed code

var nameProp = '../../tagsRegion';

  var tagList = $(#TagIdcomp).find('ul.js-coral-Autocomplete-tagList');

    var tagTitle = "Asset:Guide"

tagList.append('<li role="option" tabindex="0" class="coral-TagList-tag" title="'+tagTitle+'"><button class="coral-MinimalButton coral-TagList-tag-removeButton" type="button" tabindex="-1" title="Remove"><i class="coral-Icon coral-Icon--sizeXS coral-Icon--close"></i></button><span class="coral-TagList-tag-label">'+tagTitle+'</span><input type="hidden" value="'+tagVal+'" name="'+nameProp+'"></li>');

Avatar

Correct answer by
Community Advisor

Hi,

Yes below code is enough, with below code you are selecting item from list insteadof manual selection.

var tagVal = asset:guide"  ;

$(#TagIdcomp).find('ul.js-coral-Autocomplete-selectList > li[data-value="'+tagVal+'"]').click();



Arun Patidar

Avatar

Level 8

Hi Arun,

I had a similar requirement for tagfield. If you have any solution please provide inputs on https://forums.adobe.com/thread/2653668#11257215

Avatar

Level 8

Hi Arun,

I had a similar requirement for tagfield. If you have any solution please provide inputs on https://forums.adobe.com/thread/2653668#11257215

Avatar

Community Advisor

Hi,

I don't have a sample code but it will a single line change, please check the DOM structure and find a selector for tags instead of autocomplete



Arun Patidar

Avatar

Level 8

Hi Arun,

I need your help on this .If you could provide inputs will be really helpful.

Above we populating for dialog  on load using $(#TagIdcomp).find('ul.js-coral-Autocomplete-selectList > li[data-value="'+tagVal+'"]').click();

But  on submit i need to capture the values from autocomplete dialog  in JavaScript. So that i could process those in java using ajax

Could you please provide inputs as what will the javascript code will be very helpul.

Thanks

Avatar

Community Advisor

you can get values of dailog fields in dailog using like below:

e.g. in below code I am getting value of color input fields, similar you can get any input value when you submit dialog.

(function($, $document) {
   "use strict";
   $(document).on("click", ".cq-dialog-submit", function(e) {
   var $form = $(this).closest("form.foundation-form");
   var field = $form.find("input[name='./color']");
   if (field !== typeof undefined) {
   var fieldVal = field.val();
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(fieldVal)) {
   // console.log("value = " + fieldVal);
   field.val(hexToRgbA(fieldVal));
   // console.log("after value " + field.val());
  }
  }
  });


Arun Patidar

Avatar

Level 8

Thanks a lot Arun,

I tried with above for autocomplete but it just shows only first value of tag i have selected . It does not provide values for other tags i have selected.

var field = $form.find("input[name='../../tagsRegion']");

field.val();

I have added the same question here if you provide respose on the below url will be helpful.

Update using javascript for coral touch ui tag based auto complete

Avatar

Community Advisor

Hi,

Multi select values are store in multiple-input elements one for each. you need to get value in loop.

var field = $form.find("input[name='../../tagsRegion']");

field.each(function( index ) {
   $( this ).val();
});



Arun Patidar