Update using javascript for coral touch ui tag based auto complete

srinivas_chann1

26-07-2019

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.

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar

MVP

29-07-2019

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

Answers (15)

Answers (15)

Arun_Patidar

MVP

16-11-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();
});

srinivas_chann1

14-11-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

Arun_Patidar

MVP

14-11-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());
  }
  }
  });

srinivas_chann1

14-11-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

Arun_Patidar

MVP

01-11-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

srinivas_chann1

29-07-2019

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

Arun_Patidar

MVP

29-07-2019

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

srinivas_chann1

28-07-2019

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.

Arun_Patidar

MVP

27-07-2019

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.

srinivas_chann1

26-07-2019

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.

Arun_Patidar

MVP

26-07-2019

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

});

srinivas_chann1

26-07-2019

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??

Arun_Patidar

MVP

26-07-2019

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