I don't have much experience with javascript so I' not sure if/how this can be done. So I have a number of select components with a couple of options. One of these options for all of the components is "All".
Now I need to make sure that no more than one component has "All" selected. I'm using some input fields and making some validations to make sure this condition stands. However I can't see how I can do the following. When a user selects "All" from a field, and this is not allowed because there is already an "All" on the page, put the previous selection in it's place.
So far what I have is (component being the current select component):
selectedName = component.options[component.selectedIndex].innerHTML;
if (selectedName == 'All') {
if (emptyAllSpace() == 1) {
//here I do all the mumbo jumbo needed and assign to the hidden field the name of
//the component
}
else {
//Here is where I should put back the old selection value.
}
}
Now the else branch is where I need to figure something out. So how can I / how difficult would it be to get the selected option before the currently selected one.
I'm also interested how difficult it would be because I could also go another route and just put as selected the first option that is not 'All' but I would rather avoid this if it's no too time consuming.
Regards,
Bogdan
Use the onchange event for the select. First store the default value, and reassign it on change. Or use 2 variables which keep the last 2 selected options(?).
UPDATE
Use the onfocus to get the value before it changes, http://jsfiddle.net/gQHqj/ .
In this handler you could register the following onchange, and have that value stored in the closure (onfocus's scope object).
UPDATE 2
I knew something was a bit suspicious, but didn't have time to inspect, if the user doesn't move to another element or click somewhere the element is still in focus, and the onfocus will not be called, while onchange will (if the user changes the value), with the wrong prev value. So I came up with a bugfix, you should have this structure : http://jsfiddle.net/gQHqj/4/
You could keep the previously selected value in a variable. This variable's value would be populated on form/page load and update only in case the selection is correct. Otherwise, you will revert the selection to its value.
Related
Good evening!
I'm making a page in Oracle Apex, which leads to creating a document. This page has many fields like "text field" or "select list" and so on with its own logic, and I've got stuck with two ones - the shuttle field (let it be named A) and the text field (let it be named B), which should depend on the first one. The scheme of their interaction is this:
Shuttle A has values "A", "B", "C", "D" and "others";
If one chooses value "others" among others from the shuttle, one also should fill the text field B. In other words, in this case field B should be required.
The problem I have is that I can't make the field B to behave depending on field A values. I've already tried to use JavaScript function triggering from "onChange" event, which should have been working, if the right half of the shuttle B had got "others" value. But this way didn't work as I wanted, because "onChange" event arises on every click on both halfs of shuttle, and I need to have it arosen only on moving the value "others" (what can be done in two ways: on double click or due to click on arrow icon on shuttle).
So the question is: how to synchronize shuttle and text field in "master-detail" logic?
p.s. I'm using Oracle Apex 4.2.6.0003. Also I know that I can have a workaround, using only select lists, but I'd like to try to solve the problem with using shuttle, especially considering that the last one could have almost infinite count of values.
With static values as list of values for shuttle:
STATIC:A;A,B;B,C;C,Others;OTHERS
Using jvascript code like this:
$("#P40_SHUTTLE").change(function(){
console.log(apex.item(this).getValue().indexOf("OTHERS") != -1);
})
Will return true when OTHERS has been selected (it is in the values of the shuttle). Change is the correct event to listen for here!
Translating that to a DA:
On change of the shuttle
Use the "When" condition of type "JavaScript expression" and use this code:
apex.item(this.triggeringElement).getValue().indexOf("OTHERS") != -1
You can then use the True and False actions of the DA to for example show and hide the text field as required. I'd not go further than that on the front end. Maybe show a required label for the textfield, as it'll only get shown when the field is shown.
Add a server side validation (on submit) on the textfield where you'll inspect the shuttle values for the existence of the OTHERS value. If it's present, then the text field should be required.
Validation created on the textfield.
Condition of type "PLSQL Function Body"
DECLARE
l_vc_arr2 APEX_APPLICATION_GLOBAL.VC_ARR2;
BEGIN
l_vc_arr2 := APEX_UTIL.STRING_TO_TABLE(:P40_SHUTTLE);
FOR z IN 1..l_vc_arr2.count LOOP
IF l_vc_arr2(z) = 'OTHERS' THEN
RETURN TRUE;
END IF;
END LOOP;
RETURN FALSE;
END;
Type of the validation: IS NOT NULL
Item: the text field.
The validation will only fire when others is present in the selected values, and then will require the text field to be required.
I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary
I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here
I noticed that change() can be triggered for a <select> even if the option was not changed.
See my jsfiddle example.
Changing the selection will change the text input displayed. However (and I do know it's a bit of stretch) if you:
select the drop down by clicking on its label Selection:
press down on the keyboard (assuming Show A was selected)
then select Show A with the mouse pointer it will trigger change().
Is there an easy workaround for this (right now I'm thinking of using a variable to keep track what the last selection was upon change())?
EDIT:
It seems it is a Chrome-specific problem. I was able to fix the problem by using a variable to keep track of what the last selected item was. I guess this a bug left for the jQuery/Chrome developers.
I would store the current value as data on the element (rather than a variable) like this:
$('#variable').data('currentval', $('#variable').val()).change(function() {
var t = $(this);
if (t.data('currentval') != t.val()) {
$(this).data('currentval', $(this).val());
$('#listA').toggle('fast');
$('#listB').toggle('fast');
}
});
http://jsfiddle.net/emMx6/2/
I have a Dropdownlist or maybe better described as a "select" control. This list can have 50 to 100 items in it. Lets just say it's showing numerically 1 through 50.
I would like the control to show on the form with no selected value, however when the user clicks/focuses on it - I would like to have what appears to the user as the expanded list showing on items 20-40, with say item 30 being selected or highlighted.
Right now I have tried it with a focus event, and setting the selected value - however I have to set the selected value about 9-10 past what I actually want centered in the list.
Also, if the user ends up clicking outside of the box accidently I will end up capturing the default value I set.
Any ideas?
Thank you.
This is not doable with the generic <select> tag, and seems painfully nitpicky. You might want to consider either (a) not caring, or (b) using Javascript to create your own dropdown control.