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.
Related
I'd like to improve the usability of a form that I have that allows the user to select an area which can be highlighted on a map.
I want to retain the drop-down list for the user to browse but also for them to be able to type in the field as free-text and have a part-match on their input and filter the list to items that resemble their input.
Some of the entry's are quite long and a few words, eg. ideally "Middlesbrough South and East Cleveland" would appear in the list as the user inputs "Cleve" along with any other close matches.
The page looks like this at the moment
I have a simple Django form:-
class ConstituencyForm(forms.Form):
description = "Use the dropdown to select an area:-"
lstRandom = [(0, 'Random')]
lstChoices = lstRandom + list(constituency.objects.values_list('id', 'name'))
ConstituencySelection = forms.ChoiceField(choices=lstChoices, widget=forms.Select(),required=False, label="")
The form is instantiated and passed in this extract from the view:-
frmCons=ConstituencyForm()
if not request.GET.get("ConstituencySelection") or int(request.GET.get("ConstituencySelection"))==0:
intConsId = random_cons_view()
strConsType = "random"
else:
intConsId = int(request.GET.get("ConstituencySelection"))
strConsType = "selected"
objCons=get_constituency_view(intConsId)
context={
"consform" : frmCons,
"consgeom" : json.loads(objCons[1]),
It appears here in the template:-
<form method='get' action=''>
Select an area:-<br>
{{ context.consform }}<br><br>
Select a maptile:-<br>
{{ context.tileform }}<br><br>
<input type="submit" value="Update" >
</form>
I'm researching as best as I can, but struggling to piece together how to make this change.
Something like:-
-Change the Form field type to a type that accepts choices and free-text (like a combo field in MS
Access)
-Use a filter with "title__contains" in the view? Can I still keep all the choices in the form object?
-Use JavaScript to recognise a key-up event in the field and refresh the list? I'm not at all skilled in JS but would like to give it a go.
What are the steps I need to take and how would it be coded?
Please could you help me to achieve this? Many thanks to a great community,
Phil
I have managed to get something working in the end having taken a course in JS.
Ultimately, html alone won't get close to combining a select input with a text input in a single control.
A combination of a text input right above a select input with appropriate java script events to synchronise the select with what the user types in the text input is close enough in my opinion.
The event listener responds as follows:-
On text input keyup (the user is typing looking for a part match) - go through the select options array and set hidden to true or false as the input string develops to increasingly filter the list using a non case-sensitive includes method on each option label. The size property of the select input is also dynamic showing between 1 to a maximum of 5 options based on the options remaining.
On select input change or click (the user selects an option), a separate read-only text input is set with the value of the selected option and the user can click on a corresponding button to find the data for that option.
On clicking a clear button: the options in the array have their hidden property reset to false.
There are a few other bits I added to improve functionality - eg use a regular expression to break a input with punctuation into multiple part matches and look for both but this is contextual for the use-case.
The code is quite lengthy and bitty so I've attempted to explain this solution contextually assuming appropriate JS knowledge. I'd be happy to provide more detail if anyone has a specific use case they'd like support with.
I have a reactive form with nested formarray group. I have an input that is added on when user type/select **other: ** (there is a space after the colon ( : )) . But the input is showing everywhere not just next to the selected/parent input it shows up next to all the inputS that have the same name.
Here is the code .
How can I have the other input field show just next to parent input?
code with CSS
From what I understood from your question you are trying to change some flags per row, but you write values of those flags to a global variable.
What you can do is to pass personRow as parameter to the function which handles the change and then depending on the event type set the flag in the personRow object itself. That way you can achieve higher level of granularity in control over the behaviour of your form.
Modified stackblitz can be found here
P.S. please consider separating your component into a set of smaller/reusable ones, it will be easier to manage and easier to modify.
I am using jQuery autocomplete with multiple input boxes interconnected, i.e. when inserting some value in the first input box and losing focus, the following input boxes get affected (i.e. values are filtered accordingly). Then I can focus and another input box and start typing some value, so that I get both filters applied (typed value and according to previous input box value).
Also, I setup an event for cleaning ALL input boxes when deleting all characters from an input box:
if (inputBoxTrigger.val().length == 0 && (event.keyCode == BACKSPACE || event.keyCode == DELETE)) {
jQuery.each(inputObjectArray, function (i, obj) {
obj.val("");
});
}
So, I cleanup everything when I just removed last character in the current input box. However, I could do the following:
1) Select the content of an input box (e.g. via mouse or holding shift)
2) Start typing something in this input box without pressing backspace or delete buttons
In this case, the input box gets cleared and a new character is inserted, but I do not catch this situation.
I attempted to drop the check on the backspace/delete button keyCode, but is does not work: when leaving an input box, the new input box is empty, so I just clean up everything (including previous input boxes).
Any ideas?
Maybe a more complex algorithm to detect string similarity?
If strings are very similar then it may be a simple correction, if not then it may be a completely different item and you may reset the form. You can also chain a length/direction comparison with a similarity comparison to fine tune it (i.e. do the similarity comparison only when going from a long string to another long string, ...).
On string similarity:
Compare Strings Javascript Return %of Likely
javascript text similarity Algorithm
http://andrew.hedges.name/experiments/levenshtein/
I'm using jQuery autocomplete to populate suggestion for a textbox and it works perfectly.
Trouble is when user intends to enter their own custom value. Below given code gives me the selected value:
change: function(event, ui) {
if (ui.item)
{
values=values+ui.item.value;
}
}
My issue far more complicated as user intends to add their own custom value which means I have to to grab the exact value the user has typed in. As per my requirement I need to add a special character like a ? (question mark) after every selected value from the autocomplete suggestion which has to used to do an exact search. If the user was limited to select only from the autocomplete it would have been way too easy and I could append that character inside the if. But how can I differentiate between custom value and suggested value?
How can I attain this?
Simply make a new dropdown div, and have a script:
b.value = a.value
to constantly replicate the value typed in. Run the autocorrect on the second value but not the first. Then add an event listener to the second event that changes
a.value = b.value
Once clicked.
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.