Develop Reference

How to use. selectOption() in autocomplete?

On page load I want to initialize the autocoplete with one specific option. I am using MaterializeCSS The documentation says
Select a specific autocomplete options.
Arguments
Element: Element of the autocomplete option.
instance.selectOption(el);
I tried
//autocomplete.selectOption("Radek")
//autocomplete.selectOption({"Radek"})
autocomplete.selectOption({"Radek":null})
but nothing worked. Could you suggest how to select autocomplete option programaticaly?
var elemOptions = {
data: {
"Radek Surname ": null,
"Radek": null,
"Radoslav": null
},
minLength : 2,
}
var elemAutomplete = document.getElementById('autocomplete-input1')
var autocomplete = M.Autocomplete.init(elemAutomplete, elemOptions);
//autocomplete.selectOption("Radek")
//autocomplete.selectOption({"Radek"})
autocomplete.selectOption({"Radek":null})
and working jsFiddle

Wow I just notice this question.
Let's just clear out something, basically Materialize Autocomplete is just a normal Materialize Input-Field but with an extra feature like dropdown options showing up when you click or type some text.
So, in order to do what you want, you must set the text value as exactly as the previously selected options text. This will make the label overlapping so you must add class active to the Autocomplete label (just like normally setting text value to an input field).
var elemOptions = {
data: {
"Radek Surname ": null,
"Radek": null,
"Radoslav": null
},
minLength : 2,
}
var elemAutomplete = document.getElementById('autocomplete-input1')
// getting the label element
var elemAutompleteLabel = document.getElementById('autocomplete-input1-label')
var autocomplete = M.Autocomplete.init(elemAutomplete, elemOptions);
// set the input element value
elemAutomplete.value = "Radek"
// then add class 'active' to the input label
elemAutompleteLabel.classList.add('active');
You must note that the elemAutomplete.value must be match with one of the elemOptions data.
[edited]
Only Dogfalo and God who knows what .selectOption(); did.

Hiding field of custom-multi-field using javascript in listener

I have customized form of multi-field in a component having two variations.
In one variation of my component I want to hide a field (title) which is inside custom-multi-field . I am using the following JavaScript code in listener.
This code is not working. Where am I wrong?
function() {
var dialog = this.findParentByType('dialog');
var contenttype = dialog.getField("./type").getValue();
var teaserlinks = dialog.getField("./teaserlinks");
var title = dialog.getField("./teaserlinks").getField("./title");
alert(title);
if(contenttype == 'variation-1'){
teaserlinks.show();
title.hide();
}
else if(contenttype == 'variation-2'){
teaserlinks.show();
}
}

Try using the hidden property of node. Initially set the hidden property to true and in javascript file change the hidden property to false (or as per your requirement).

Few imp points first before answer:
you have to write listener in your widget file only.
below is the sample code where in I have 2 fields. 1st field is mytext field and another field is myselection. On changing the value in myselection field I am toggling visibility of my text field.
Below is snippet:
this.mytext = new CQ.form.textField({...})
this.myselection = new CQ.form.Selection({
fieldLabel:"my selection",
type:"select",
width : "325",
allowBlank:false,
defaultType:"String[]",
fieldDescription : "Select value from dropdown",
options: "/a/b/c.json",
listeners : {
selectionchanged : function(){
var mytext = this.findParentByType('mywidget').mytext;
mytext.hide();
}
}
});
I hope this will be helpful.

I have no knowledge about aem and Adobe CQ5 but I can give you some hints how to debug your script.
First of all don't use alert for debugging! (BTW what does alert(title); show?)
I would recommend to open the browser console (e.g. Press <F12> on Firefox and switch to the tab "Console").
Herein the browser displays all exceptions and error messages. Additionally you can output some text with console.log("...");` from your script.
Here is my edit of your program. Perhaps the output can help you.
function()
{
var dialog = this.findParentByType('dialog');
var contenttype = dialog.getField("./type").getValue();
var teaserlinks = dialog.getField("./teaserlinks");
var title = dialog.getField("./teaserlinks").getField("./title");
console.dir(title);
console.log(contenttype);
teaserlinks.show();
if(contenttype == 'variation-1')
{
title.hide();
}
else if(contenttype == 'variation-2')
{
title.show();
}
}
And, console.dir(<object>); shows you the object structure to one level deep.

Backbone/Marionette with select2 v4.0, editing the tags

I have this fiddle which is an extension of the Backbone/Marionette playground fiddle. I included select2 js and css files.
Is it possible to edit a tag that is not the last tag? You can edit by backspacing in the box, but it only lets you touch the last one. I would like it to act like a gmail 'to' list where you can double click on one and edit it, then it goes back to a tag on blur.
this.$('#foo').select2({
data: [{
id: 1,
text: "test1.com"
}, {
id: 2,
text: "test2.com"
}],
multiple: true,
allowclear: true,
tags: [],
placeHolder: "Click Here!",
tokenSeparators: [',', ' '],
minimumResultsForSearch: 1
});

Unfortunately, there is no way to do this using just the select2 out-of-the-box functionality. But it's quite extendable, so here's what does the trick:
var $select2 = this.$('#foo').select2({ tags: true });
var select2 = $select2.data("select2");
$(document.body).on("dblclick", ".select2-selection__choice", function(event) {
var $target = $(event.target);
// get the text and id of the clicked value
var targetData = $target.data("data");
var clickedValue = targetData.text;
var clickedValueId = targetData.id;
// remove that value from select2 selection
var newValue = $.grep(select2.val(), function (value) {
return value !== clickedValueId;
});
$select2.val(newValue).trigger("change");
// set the currently entered text to equal the clicked value
select2.$container.find(".select2-search__field").val(clickedValue).trigger("input").focus();
});
And a JsFiddle, of course.

How to change Ext Js Button tooltip at runtime?

I have the following:
var panel = headerPanel.add({
id: 'recentcommands_button_id',
xtype: 'button',
text: "Recent Commands",
tooltip: "Sample Tooltip Text"
});
Followed later on by:
Ext.getCmp('recentcommands_button_id').tooltip = "TEST";
Which sets the tooltip value properly if I check the button's properties, but which does not actually change the value on the screen.
I tried using:
Ext.getCmp('recentcommands_button_id').tooltip.update("TEST");
This did not work either.
Any ideas?

You can use setTooltip method:
Ext.getCmp('recentcommands_button_id').setTooltip("TEST");

How to remove label after removing a component?

By removing a field in a fieldset, it's label is not removed. How can I remove it? I'm using ExtJS 2.0.2. Code follows:
var predicateArguments= new Ext.form.FieldSet({
id:'predicate_arguments',
layout:'form',
title:'Predicate Arguments',
defaultType:'textfield',
autoHeight:true,
autoWidth:true,
autoScroll:true,
items:[
{
xtype:'textarea',
id:'description',
fieldLabel:'Description',
name:'description',
readOnly:true
}
],
buttons: [
{text: 'Add',
handler:function(){
//this will submit the form's fields
predicatesForm.getForm().submit();
}},
{text: 'Reset Fields',
handler:function(){
//this will reset the form's fields
predicatesForm.getForm().reset();
}}
]
})
var predicatesForm = new Ext.FormPanel({
id:'predicates-form',
region:'center',
split:true,
labelAlign:'right',
layout:'column',
items:[availablePredicatesGrid, predicateArguments]
})
var dateField = {xtype:'datefield',
fieldLabel:'Date',
name:'date',
id:'date_field'
}
var numberField = {xtype:'numberfield',
fieldLabel:'Number',
name:'number',
id:'number_field'
}
//when a rule is clicked do the following...
availablePredicatesGrid.getSelectionModel().on('rowselect', function(sm,_rowIndex,_rule){
predicatesForm.getForm().loadRecord(_rule);
var _ruleType= _rule.store.getAt(_rowIndex).get('type');
//removes previous existing fields (but not labels!)
predicateArguments.remove('date_field');
predicateArguments.remove('number_field');
//creates new fields according to the selected rule types
for(i=0; i<_ruleType.length; i++){
if(_ruleType[i]=='date'){
predicateArguments.add(dateField);
predicateArguments.doLayout();
}
else if(_ruleType[i]=='number'){
predicateArguments.add(numberField);
predicateArguments.doLayout();
}
}
});

Instead of calling remove on your Ext.Element reference, do this instead:
Ext.getCmp('id_of_your_form_field').getEl().parent().parent().remove();
EDIT: this is intended for use on form field components, as it removes the wrapper div containing the label and the component

I don't know extjs, but, normally, how would you do this (and how you should do this) is by simply adding the input and its label in a or and then, when you want to remove the input (and its label in the same time), just do:
obj = document.getElementById( ID-OF-ELEMENT )
obj.parentNode.html = '';
or just delete its parent in any other way you might find to not have empty spans lying around:
obj.parentNode.parentNode.removeChild( obj.parentNode );
or, if you know that the label is just before the input, you can just do:
obj.parentNode.removeChild( obj.previousSibling );
or just combine them to suit your purpose