I have an implementation where I have to select from a drop-down (Image or video). On the basis of this selection, Image path field and Alt Text should be displayed in dialog on the selection of Image (other fields should remain hidden)and Video ID and Alt Text should be displayed on selection of Video (other fields should remain hidden)from the drop-down. This entire thing has to be implemented in multi-field. Each multi-field will have drop-down along with fields.
Could anyone help me with this?
On the component create a clientlib -
example
/yourcomponent/clientlib/authoring.js
On authoring.js create the javascript code to handle the hide/show functionality for your fields
Yourcompany.authoring = {
hideFields: function(this, value, sChecked){
//your code goes here
}
}
Using cq5's extJs API
In your AEM instance download the package called Using ExtJS Widgets (v01) from Package Share and install
On the drop-down node add a listeners node of type nt:unstructured and add a property selectionchanged with the following value:
function(this, value, sChecked ) {
Yourcompany.authoring.hideFieds(field, value, isChecked);
}
Hope the below serves your requirement:
http://adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/
Related
I'm trying to set a value for a selection dropdown using javascript. Please see the pictures below. When I manually change the value of the dropdown list (by clicking), the timeline changes in accordance to the new value.
selection dropdown
timeline
When I do the following with javascript:
myDropdown.selectedIndex = 4;
The value is changed in the dropdown, but it doesn't update on the timeline. Is there any way to trigger this update?
I solved it by going through a huge javascript file.
What eventually worked was to call the dropdown change function with: $(".timeslotdrop").change();
I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');
Trying to load an edit profile page for a musician site. There is a select2 box that lists the instruments that the user plays, and it pulls this information from the database. But I can't figure out how to get the existing instrument list to display on the select2 on render, it always displays as an empty select2 box (the actual search and select functionality of the box works).
(this is coffeescript in meteor)
On render, it runs:
populator = Meteor.user().profile.instrumentsPlayed
$("#e9").select2()
the populator variable defines properly and has a value of
["acoustic guitar", "piano", "ukulele", "piano"]
I've tried many variations including:
$("#e9").select2("value", populator)
None of the variations worked, and I have a hard time finding and implementing the exact thing I need from the select2 documentation... can someone point me in the right direction?
Summary: need to load select2 box with existing data instead of just empty select2 box
See the documentation here: http://ivaynberg.github.io/select2/#programmatic
They use "val" and not "value" to programmatically set the values.
Try this:
$('#e9').select2();
$('#e9').select2('val', populator);
edit:
Perhaps the confusion was the select2() should be called before select2("val",...).
Here is a jsfiddle http://jsfiddle.net/JFMbt/ showing both methods (comment out one of them)
I've made table with celleditor similar to this:
http://demo.qooxdoo.org/current/demobrowser/#table~Table_Cell_Editor.html
-row 'Status' with selectbox (I need to remember in this selectbox for items - name and ID).
But problem is like in this example - when I select an option and deactivate this editor (edit other row, or click somewhere else), and then return to edit it again, then it is selected other option than it was before - always first element on list.
I think it's a bug in qooxdoo (version 1.4.1), but do you have any solution for this (too keep correct element selected when I edit this cell again?
I believe the standard solution to this problem is to keep a 'presentation model' of the user interface state. When the widget is shown again, you reconfigure it with the selection box showing the last used item or whatever you consider appropriate.
I have an asp:ListBox control on my web page. I am trying to select an item in the list using javascript. After looking at the underlying structure I have tried:
catListBoxCtl[0].Selected = true;
Which does indeed set the 'selected' value to true but it doesn't highlight the appropriate row. I am just trying to replicate what a user does when you select a row using a mouse. How do you select a row programatically so that it get's highlighted etc?
Thanks.
I think you're missing the reference to the options. Try:
catLIstBoxCtl.options[0].selected = true;