Develop Reference

Populate page items based off an interactive grid

I am using oracle apex version 22.1 and i'm trying to populate a page item (P617_ROW1) with some client side interactive grid data from some javascript code. So far i've been able to successfully do this through the Selection Change [Interactive Grid] event that triggers this code:
var full_record
model = this.data.model;
if(this.data != null){
if(this.data.selectedRecords[0] != null){
full_record = model.getValue(this.data.selectedRecords[0], 'LIMITTYPE')+ "/" + model.getValue(this.data.selectedRecords[0], 'AMTPERTRANS')+ "/"
+ model.getValue(this.data.selectedRecords[0],'AMTPERDAY') + "/" + model.getValue(this.data.selectedRecords[0],'NUMPERDAY')+ "/"
+ model.getValue(this.data.selectedRecords[0],'AMTPERMONTH') + "/" + model.getValue(this.data.selectedRecords[0],'NUMPERMONTH') +"/" + model.getValue(this.data.selectedRecords[0], 'SECCODE');
}
}
apex.item("P617_ROW1").setValue(full_record);
The code successfully grabs the data in each cell and formats it correctly in my page item so I can then use it for processing. The only issue is that this event forces the user to unclick and re-click the interactive grid's row selector checkbox to populate the page item. It would be a lot more efficient if this code could be triggered by another event that would not require manual user interactions (key down, page change, etc...) and would populate the page item as the user types/right before they submit. I am not proficient in JS by any means so any links that would help build my understanding of using js in oracle apex to achieve goals like this would be appreciated.
I guess I should add that I have a maximum of 4 IG rows that I need to be able to select into their respective page items. So I use the code above 4 different times with the only difference being the selected record row number (this.data.selectedRecords[n]) and the page item (P617_ROWn).

Jquery autocomplete crashes when trying to update other textbox (asp.net core project)

I have already had great help of this piece of code. I am trying to now update another textbox when a jquery autocomplete option is picked.
I made a couple of changes specifically to display two of the options in the multi dimensional array:
a = $.map(a, function (x) {
return {
label: x.suburb + " - " + x.postCode,
value: x.suburb,
suburbDetails: x
};
The second change however breaks it and I cannot workout what form this line of code needs to be to pick and place the postcode in the #postcode textbox.
I have a Jsfiddle where it works (as an aside css doesnt work either here or in the project select eg "b") when the line is commented out but crashes when its uncommented.
$("#Postcode").val(data.suburbDetails.postCode)
How would you update the postcode textbox with the associated postcode for the suburb given both are/should be accessable via "data.suburbDetails"?

Kendo Grid : how to use a column template so editor always available?

I am trying to create a grid that has a column where the editor is always available, so that editing the cell is a "one click" process. By this I mean rather than having to click on the cell to first switch to edit mode, and then select from the combo box, the user can straight away (using the mouse) click on the combobox down arrow to open it and select a value.
I thought I could do this using a column template (as opposed to editor) as follows...
function createComboTemplate(dataItem) {
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'k-data-text-field="\'display\'" ' +
'k-data-value-field="\'rego\'" ' +
'k-data-source="getCarList()"' +
'k-value="dataItem.rego"' +
'k-on-change="handleDDLChange(kendoEvent, dataItem)"/>';
return tmpl;
}
Full code here
The above shows the combo box, however as soon as I click on it, the cell goes to a text edit field. So I thought that perhaps the cell going into edit mode was causing this, so I set the columns editable property to false , but this made no difference.
IF I set the whole grid's editable property to false, then when I click on the combo box, it stays there, however it is empty.
In this example, the combobox data source is via a function, I also tried setting directly to a global list object (incase it was the function call that was the problem), but this didn't work either.
So, I Have a couple of related questions here.
The first, is to do with the property names in the template.
When I create a combobox in straight code, I have as follows (as in the above demo)
function createCombo(container, options, data) {
var dataField = options.field.split('.');
var fieldName = dataField[0];
var input = $('<input/>')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
value: options.model[fieldName].rego,
change: function (e) {
var dataItem = this.dataItem();
options.model[fieldName]['rego'] = dataItem.rego;
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
So the above snippet has properties like "dataTextField", and "dataSource", etc, but when I created the template, from another example of templates I found, it seemed to use names like "k-data-text-field" and "k-data-source".
Is there any doco, or rules on how these field names map in the "markup" that is used in the templates (I could not find any)? It appear that the property names are prefixed with "k-data", and then the camelcase names converted to the "dash" syntax (similar to what angular does). IS this just the rules that we follow? If not then perhaps my problems are the syntax above is incorrect.
The other question is of course, what have I done wrong to cause the 2 problems
The combobox disappears when I click on it (unless the whole, grid is set to non editable)
Why the combo has no data
Or am I going about this the wrong way.
Thanks in advance for any help!

It appear that the property names are prefixed with "k-data", and then
the camelcase names converted to the "dash" syntax (similar to what
angular does). IS this just the rules that we follow?
Yes - the documentation is here.
The combobox disappears when I click on it (unless the whole, grid is
set to non editable)
This is because the column is editable, so it gets replaced by the default editor. You can prevent this from happening using the technique I described here. I also used it in the demo.
Why the combo has no data
Your template doesn't work; it should be something like this:
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'k-data-text-field="\'display\'" ' +
'k-data-value-field="\'rego\'" ' +
'k-data-source="dataItem.carSource"' +
'k-value="dataItem.car.rego" />';
and for that to work, you need to give each data item a reference to the car data (you can't execute a function there, the template is evaluated against a kendo.data.Model instance).
(updated demo)

Submitting hidden field data on Android/iOS browsers does not work

I am working on a site which connects to a MySQL database and lets you display/edit the data in it. The site uses JavaScript and PHP, with HTML and CSS parts (these are added using JS).
The site works, does everything I wanted it to do, but only from PC. When I try to use it from a smartphone, some of the hidden fields' value doesn't get submitted correctly to the PHP page responsible to working with them.
First, I have a few of this select box:
var maxLvl;
var select = document.createElement( 'select' );
var trooplist = [archerLvl, giantLvl, wizardLvl, balloonLvl, dragonLvl]; //this array contains numbers, which will be used to set the starting option in the select
select.id = "select" + k + " " + i; //k and i are both variables in their respective for loop: k goes from 0 to 2, in it there's another with i.
select.onblur = function() {
var selectid = this.id;
var last = selectid.slice(-1);
if(last==0){
document.getElementById("hiddenArcherid").value = this.value;
alert(document.getElementById("hiddenArcherid").name + " " + document.getElementById("hiddenArcherid").value);
}else if(last==1){
document.getElementById("hiddenGiant").value = this.value;
alert(document.getElementById("hiddenGiant").name + " " + document.getElementById("hiddenGiant").value);
}else if(last==2){
document.getElementById("hiddenWizard").value = this.value;
alert(document.getElementById("hiddenWizard").name + " " + document.getElementById("hiddenWizard").value);
}else if(last==3){
document.getElementById("hiddenBalloon").value = this.value;
alert(document.getElementById("hiddenBalloon").name + " " + document.getElementById("hiddenBalloon").value);
}else if(last==4){
document.getElementById("hiddenDragon").value = this.value;
alert(document.getElementById("hiddenDragon").name + " " + document.getElementById("hiddenDragon").value);
}
};
select.style.position = "absolute";
select.style.left = 250 + (i*(width + (width/10))) +"px";
select.style.top = 110 + height + (rowcounter * (height * 1.5)) + "px";
select.style.width = width;
if(i==0 || i==1 || i==2 || i==3)
maxLvl = 6;
else
maxLvl=4;
for(var l=0; l <= maxLvl; l++){
var option = document.createElement( 'option' );
option.setAttribute("value", l);
option.innerHTML = "Level " + l;
select.appendChild(option);
}
select.selectedIndex = trooplist[i];
IDarray.push(select.id);
document.body.appendChild(select);
This code runs in a for loop, and creates 5 select boxes using data passed by a function. Then, when the user selects a new option, the option's value is stored in a HTML hidden input field with. Like this one:
var hiddenArcher = document.createElement('input');
hiddenArcher.setAttribute("type","hidden");
hiddenArcher.name = "hiddenArcher";
hiddenArcher.id = "hiddenArcherid";
hiddenArcher.setAttribute("value", document.getElementById("select1 0").value);
formNew.appendChild(hiddenArcher);
These input fields have a basic value, which is the default of the select box - 0 if the user creates a new entry, or an already known value if the user wants to modify an already existing entry. All the input fields have the same structure, only the JS var, the name, the id and the default value changes.
The input fields are part of the formNew form, which has multiple submit buttons - pressing those buttons posts the fields' values to a PHP page, which executes the MySQL queries, depending on which button was pressed. For this, I use if/else if (isset). Then the PHP redirects (by using header("Location: http://my_sites_address"); exit();) to the main page - the one I where the select boxes are.
If I try it from Chrome, the site works - The right values get passed, the PHP executes the right queries correctly. I can add new entry, and both delete or modify existing ones. When I try it on Android (via emulator) or iOS (via my friend's phone), although I can select the values I want to change, and the alerts display the correct data, too, when I hit submit, nothing happens within the database, it seems like I did nothing. The browser gets redirected to the PHP, so I guess the submit does happen, but there will be no changes in the database. The PHP simply redirects to the main page, and that's all.
The only function can be used successfully on phone is deleting the entry, most likely because the hidden field responsible for storing the row's ID gets it's value the moment it's added to (a different) form, and the value never changes, only when the user switches to a different entry.
The hidden fields "physically" (based on their location in the file) are declared later than the select boxes.
Currently, the code acts this way on phone:
1) I start editing the entry. The select boxes show up.
2) I can select the desired value.
3) An alert pops up, confirming the value got passed to the hidden field.
4) I press the submit button, comes the PHP, then the redirects, and I am back where I started. There are no changes in the database.
I already tried to switch onchange to onblur at the select boxes; I made sure JS is enabled (which was totally unnecessary, because the images/texts displayed with JS). Right now I have no idea what's wrong.
Are any of you experienced something similar, or has any idea what should I do?

Some browsers fail to correctly and completely recognize the programmatic change of a hidden input's value immediately after it is changed. If you submit the form directly after changing the hidden input's value via javascript, the value sent for that input will be the pre-change value, rather than the value you set in javascript.
Unfortunately, I don't have a list of browsers that exhibit this behavior, nor do I know the exact mechanics behind it. What I do know is that I've run into the issue you're describing, and I have always been able to solve it by triggering a change event on the hidden input after changing its value via javascript.
For those using plain javascript with no external libraries, your code would look something like this (see here):
<input id="myHidden" name="myHidden" type="hidden" value="old value"/>
<script type="text/javascript">
var hiddenInput = document.getElementById('myHidden');
hiddenInput.value = 'new value';
console.log(hiddenInput.value); // = 'new value'
// Submit the form now, and myHidden='old value' will be sent to the server
// Set up and trigger the change event on our input:
var changeEvent = document.createEvent("UIEvents");
changeEvent.initUIEvent("change", true, true);
hiddenInput.dispatchEvent(changeEvent);
// Submit the form now, and myHidden='new value' will be sent to the server
</script>
For those using jQuery or a similar library, the code is a little more concise:
<input id="myHidden" name="myHidden" value="old value"/>
<script type="text/javascript">
var $hiddenInput = $('#myHidden');
$hiddenInput.val('new value');
console.log($hiddenInput.val()); // = 'new value'
// Submit the form now, and myHidden='old value' will be sent to the server
// Trigger the change event on our input:
$hiddenInput.change();
// Submit the form now, and myHidden='new value' will be sent to the server
</script>
Really concise example (one-liner) using jQuery:
<input id="myHidden" name="myHidden" value="old value"/>
<script type="text/javascript">
$('#myHidden').val('new value').change();
// Submit the form now, and myHidden='new value' will be sent to the server
</script>
Here's a working example using a slightly simplified version of the code supplied in the original question.

In our case, the issue was simply that we had this check in PHP:
if (isset($POST['myvalue']) && !empty($POST['myvalue'])) {
// save
}
However, in PHP 0 is considered empty in PHP and thats exactly what the passed value was!

JavaScript Syntax - Listbox onChange Event

First, please forgive me, as I know very little about JavaScript, and am trying to make something work without knowing proper terms and syntax. I am working within the CMS called "ViArt." A lot of what is going on is handled by php, and I only have access in ViArt to add JavaScript to an onChange event for a listbox.
Here is what I'm trying to accomplish:
The product is sunglasses. Different frame colors in a listbox 1 are designated by a numerical prefix. There are 30 different lens color options for each frame color, and these lens colors are chosen in listbox 2.
Using my current code, for each frame, I have to go in the JavaScript for each frame and manually enter the numerical prefix designated to that frame.
This is my current, working code in an onChange event:
=================================
var FrameNo = '01';//ENTER FRAME NUMBER
var ImagePath = 'images/GlassesBrand/Rx/GlassesTest/';//ENTER PATH TO IMAGES
var ImageNamePrefix = 'GlassesTest-XL';//ENTER NAMING CONVENTION
// This changes the IMAGE hyperlink to larger image to match user's selection
document.getElementById('blackImg').href=ImagePath + 'Large/' + ImageNamePrefix + '-Frame' + FrameNo + '-Lens' +
this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].text.substrin g(0,2) + '.jpg';
=================================
The change I want to make, is that I don't want to have to hard-code "FrameNo." I want to call that dynamically within the onChange event, by looking up the selectedIndex of listbox 1.
=============================
In an onChange event for list box 2, named "{property_id}," I am trying to get the selectedIndex of a listbox 1, named "{property_parent_id6385_6773}"
{form_id} value is 6385
{property_id} is listbox 2, and in this example, the value is 6773
{property_parent_id6385_6773} value is 6765, and in this example, this refers to listbox 1
{property_parent_id6385_6773} is named dynamically by a php script or something. For example, on the next form, it may be called {property_parent_id6400_6800}. So I am trying to program the JavaScript to dynamically refer to the property_parent_id####_####, based on whatever form and list box I'm working with.
When I hard-code or semi-hard code it for testing, the following methods work:
this.form.property6385_6765.selectedIndex;
and
this.form.property{form_id}_6765.selectedIndex;
I don't know the syntax, so I thought declaring some things in variables might help me get what I needed.
From my notes:
var FrameBox = [this.form.property_parent_id6385_6773.value]; //WHICH EQUALS "6765"
var FrameNo = 'this.form.property' + {form_id} + '_' + FrameBox + '.selectedIndex';
RESULTS IN:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Framethis.form.property6385_6765.selectedIndex-Lens02.jpg
Whereas, an example of the result I am seeking is:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Frame1-Lens02.jpg
==============================
In summary, I know what I need, but I don't understand enough of the syntax.
I know this could be better phrased, but this is all new to me. On the bright side, I am now inspired to take a class in JavaScript.
Any help would be greatly appreciated.

This is more of a calculated guess but could be worth a try.
this.form.property_parent_id{form_id}_{property_id}.options[this.form.property_parent_id{form_id}_{property_id}.selectedIndex].text