We Keep Coding

How to reset list to blank using javascript in Oracle apex

I have a select list component in Oracle apex and one button
Select list drop down as below values I can choose any one
-
A
B
C
On button click I have written a java script
if $('#P1_DROPDOWN').val() == 'A'
{
alert.message('A value is selected')
}
else
{
apex.item.setvalue(index[0]) -- blank
or
reset the list to none selected
}
How do I reset the List item to none o original state

Here is an example for a select list that has "Display Null Value" set to "Yes" and no value for "Null Return Value".
if (apex.item( "P1_DROPDOWN" ).getValue() == 'A') {
alert('a was clicked');
} else {
apex.item( "P1_DROPDOWN" ).setValue( "" );
}
If there is a return value for the Null value, then change the setValue accordingly.
Side Note: Instead of clearing the selected value a validation indicating why the selected value is not the correct one might give a better user experience.

vuejs Computed data detecting if model has been updated

I'm trying to detect if a Model Data has not been changed within a Vue Computed data.
I have two sets of Variables that need to be checked,
before Computed:filteredItems should return a new list or current list.
Below are two data i'm checking
text ( the text input )
selectedInput ( currently selected item )
Current Behavior:
I've changed, selectedInput to null, this updates Computed:filteredList to be triggered. which is expected.
The first Condition is to make sure that this update returns current list if text === selectedInput.text, work as expected
However, I need a second condition to detect if text has not been changed.
<input v-model="text" />
<ul>
<li v-for="item in filteredItems" #click="text=item.text"></li>
</ul>
{
data():{
text: 1,
items: [],
tempList: [],
selectedItem: {text: 1}
},
computed: {
filteredItems(){
// when selectedItem.text === current text input, do not run
if (this.selectedItem.text === text) return this.tempList;
// how do i detect if selectedItem.text has not been changed
if (this.selectedItem.text.hasNotChange??) return this.tempList;
}
}
}
Data Flow: 1update the text > 2filter list > 3click on listItem, update (1) text
[input(text): update on type ] >
[li(filteredItem): filter list on type by value (text) and (selectedInput.text) ] >
[li(item)#click: update (1), and also another value(selectedInput.text) input(text) to equal (item.text) ]
This cycle works until I have action somewhere else that updates selectedInput.text
is there something i can do with a setter/getter for the Text model.

Create a variable, changed. Watch selectedItem.text, and set changed to true. In a watcher on text, set changed to false.

I got this to work using a temp variable
data(){
return: {
text: "",
temp: {
text
}
}
}
computed(){
filteredList(){
var temporaryList,originalList,filteredList
if ((this.text === $store.state.selectedText )||
(this.text === this.temp.text ) ) {
return temporaryList || originalList
}
// update
this.temp.text = this.text
return filteredList
}
}
thought it would be a bad practice to update variables within a Computed method.

How to ignore fields in search while being able to search using the API?

My table contains thre columns; "name", "description" and "status". I have a dropdown field which filters the table on the status column. Essentially:
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$('#dt').DataTable().column('status:name').search(value).draw();
}
});
This works, but the problem is the standard free-text search input field includes the status field in the free-text search.
Setting searchable: false on the status field causes the dropdown to stop working since Datatable ignores it.
{
data: 'status',
name: 'status',
searchable: false // Stops table.column().search(value) from working :-(
}
Ideally, the (standard) free-text search field should ignore the stuatus column, but the dropdown code should still be working.

This works:
Set the column to searchable: false. This makes the table ignore this column in free text searches.
Add a custom search which uses the original row data, settings.aoData, instead of the data array (it doesn't contain the column because of 1.)
Redraw the table when the filter dropdown changes.
Code:
$('#dt').DataTable(defaults)
.on('init.dt', statusHandling);
function statusHandling(e, settings, processing) {
// Redraw table on dropdown status change
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$(options.table).DataTable().draw();
}
});
// Our custom search function which adds an AND 'status = foo' condition
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var input = $('input[name=status]').val().toLowerCase();
// Use original data instead of 'data' because status is not searchable
var status = settings.aoData[dataIndex]['_aData']['status'];
return status.toLowerCase().indexOf(input) === 0;
}
);
}

knockout: remove one element from multiselect control when other is selected

I'm using knockout and I have a list of item, let say:
Tomato,
Potato,
Broccoli,
Bean
all those item are allowed to user to select from multiselect form-control.
<select class="form-control" multiple
data-bind="selectPicker: Types,
optionsText: 'Name',
optionsValue: 'VegetableTypeId',
selectPickerOptions: { optionsArray: AvailableVegetableTypes }">
</select>
Except one scenario - when the user selects tomato, potato should unselect.
I was trying to use subscription on selected items array:
this.Types.subscribe(changes => {
var VegetableTypes = this.AvailableVegetablesTypes();
var company = VegetableTypes.First(element => element.VegetableTypeId == changes[0].value);
if (changes[0].status == "added") {
if (Vegetable.IsTomato) {
this.Types.remove(element =>
VegetableTypes.First(baseElement =>
baseElement.VegetableTypesTypeId == element && baseElement.IsPotato));
} else if (Vegetable.IsPotato) {
this.Types.remove(element =>
VegetableTypes.First(baseElement =>
baseElement.VegetableTypesTypeId == element && baseElement.IsTomato));
}
}
}, null, "arrayChange");
Problem is that I'm using ObservableArray.Remove, so it's again call my function before current run is finish. This should not be a problem, because after remove first change is "deletion" type, so whole logic should not be executed.
But after this, when I select tomato/potato again, nothing is fired. In the end I actually have both tomato and potato selected.
Then, when I deselect one of these two and select it again, everything works fine, and then the whole situation repeats.
Do you have any ideas?

I didn't understand why you are using selectPicker bindings instead of the normal options and selectedOptions bindings available in Knockout.
However, I built a simple demo which implements the desired behaviour. You can find it here:
http://jsbin.com/fofojaqohi/1/edit?html,js,console,output
Note that, whenever you select Tomato after Potato, Potato will become unselected.
You were on the right track: you need to subscribe to the array of selected items and check if there are any invalid selections. I hope this helps.
For reference, here is the code:
HTML:
<select class="form-control" multiple="true"
data-bind="options: availableVegetableTypes, selectedOptions: selected">
</select>
JS:
var availableVegetableTypes = ['Tomato',
'Potato',
'Broccoli',
'Bean'];
var selected = ko.observableArray();
var unselectMap = {
'Tomato': 'Potato'
};
selected.subscribe(function(selectedOptions){
var keysToUnselect = [];
console.log("Selected", selectedOptions);
selectedOptions.forEach(function(selectedOption){
if (unselectMap[selectedOption] != null) {
// This key exists in the unselect map
// Let's check if the value is in the array
if (_.contains(selectedOptions, unselectMap[selectedOption])) {
// The invalid key exists. Let's mark it for removal.
keysToUnselect.push(unselectMap[selectedOption]);
}
}
});
if (keysToUnselect.length > 0) {
console.log("Unselect", keysToUnselect);
var reject = function(v){
return _.contains(keysToUnselect, v);
};
filteredSelectedOptions = _.reject(selectedOptions, reject);
console.log("Filtered", filteredSelectedOptions);
selected(filteredSelectedOptions);
}
});
ko.applyBindings({
availableVegetableTypes:availableVegetableTypes,
selected: selected
});

How do I clear / reset a Kendo DropDownList with only javascript?

I have a Kendo DropDownList (name=Function) that contains 3 options. When one option is selected, it triggers an ajax call to get data to populate a different DropDownList (name=Parents). This works as-expected. However, if the user then changes the original DropDownList "Function" back to a different selection, I need to clear/reset (remove all options) and disable the "Parents" DropDownList.
function LoadKendoDropdownContents(dropdownBoxId, data) {
var dropdownBox = $("#" + dropdownBoxId).data("kendoDropDownList");
if (data === "" || data === null || $.isEmptyObject(data)) {
var dataSource = [];
}
else {
var dataSource = data;
}
dropdownBox.setDataSource(dataSource);
}
It's really the "var dataSource = []" that is giving me problems. It's like the "Parents" DropDownList isn't refreshing/rebinding when that is applied. All of the options except the one that was selected get removed, but how do I remove the one that was previously selected? I want it to be "empty" again.
Thank you.
---- Solution I used ----
function LoadKendoDropdownContents(dropdownBoxId, data) {
var dropdownBox = $("#" + dropdownBoxId).data("kendoDropDownList");
if (data === "" || data === null || $.isEmptyObject(data)) {
var dataSource = new kendo.data.DataSource({
data: []
});
dropdownBox.text(" --- ");
dropdownBox.value(-1);
}
else {
var dataSource = new kendo.data.DataSource({
data: data
});
dropdownBox.text("[Select]");
dropdownBox.value(-1);
}
dropdownBox.setDataSource(dataSource);
}

It might be easier to use the cascading dropdown feature.
When you change the dataSource, it removes the dropdown items, but you also need to clear the selected text and disable the box, by calling:
dropdownBox.setDataSource(dataSource);
dropdownBox.text('');
dropdownBox.enable(false);

If you have defined a data source for both the parent and child drop down then you could use the cascadeFrom('parent') method in the child and set a value that you can identify as null or clear.