Update using javascript for coral touch ui tag based auto complete

[srinivas_chann1]

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.

[arunpatidar]

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

[srinivas_chann1]

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

[arunpatidar]

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]

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.

[arunpatidar]

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]

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.

[arunpatidar]

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]

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

[arunpatidar · Accepted solution]

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

[srinivas_chann1]

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

[srinivas_chann1]

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]

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]

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]

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]

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]

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

});