Update using javascript for coral touch ui tag based auto complete | Community
Skip to main content
srinivas_chann1
srinivas_chann1
Level 7
July 26, 2019
Solved

Update using javascript for coral touch ui tag based auto complete

  • July 26, 2019
  • 16 replies
  • 4958 views

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.

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

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();

16 replies

Show previous replies
srinivas_chann1
srinivas_chann1Author
Level 7
October 30, 2019

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

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
November 2, 2019

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
srinivas_chann1
srinivas_chann1Author
Level 7
November 14, 2019

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

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
November 14, 2019

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
srinivas_chann1
srinivas_chann1Author
Level 7
November 15, 2019

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

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
November 16, 2019

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
Terms & ConditionsAccessibility statement

Loading footer...