I have an Ember.Select which I've extended in order to encapsulate the options & some logic when things change. What I'm trying to accomplish is to set the value (i.e. the selected index) of the Ember.Select when an event is triggered by the controller. I've created a jsbin here: http://emberjs.jsbin.com/avoXOnOd/5/edit
You'll notice that when you enter a number in the textbox (say 3 for example) and click on the button next to it, the console is displaying the correct value, but the selected index of the select does not change. What I'm after is to be able to change the selection when an event is triggered by the controller.
Have updated the bin to make it work. Link. Fore more information, refer to selection attribute in Ember.Select here.
I have reduced the number of options, and the selected option would be 1 plus the entered number. So input 0-3 in the text box to see it working
Related
I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.
I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/
The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user:
When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:
javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');
Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.
I found better solution(and cleaner), upon clicking (+) Column Link is passing:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#');
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#');
javascript:$s('P4_SET_COST','#PRICE#');
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');
Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
the output is: '012345678910'.
How can I pass all values to modal region and make it to work with new values every time its being called ?
You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.
First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article.
Eg, with the column name for the select list being QUANTITY, selecting the list would be:
td[headers=QUANTITY] select:visible
Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with
input[name=f02]
Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :
function openModal(pThis, pMethod){
//fetch the value of the select list on the same row
//I use the second method of selecting here
var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
...
}
You'll also need to adjust your call to openModal:
javascript:openModal(this, 'addExtraDetails');
When trying to deselect the currently selected item in chosen through a knockout binding it seems to get reset back to what it was before the reset:
Here's the example:
http://jsfiddle.net/WPpH2/7
Select jQuery from the drop down and click "clear" to see this behavior.
Here's how the data bind is being done:
data-bind="value: selected, chosen: {}">
Any thoughts on how I can make this actually reset?
The reason you're seeing this is because of how the control works. When you click clear, you set the observable to null. The plugin then tries to find an option that has the value null. Because it doesn't find it, it resets your selection to what was last selected.
In your jsfiddle, if you change this line:
myViewModel.selected(null);
to this line:
myViewModel.selected("");
then your example will work. The reason is that you have an option where the value is an empty string.
Also, if you want your plugin to update on the UI, you will need to use this as well:
$(".chosen").trigger("chosen:updated");
Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes
try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find