How to populate dynamically generated select boxes with ajax - ajax

I haven't been able to find a solution for the particular problem I'm having with this project. I need to the following: dynamically add rows to a table that contain two select boxes AND use ajax to auto-populate the select options of the 2nd select box, based on the value of the first select box... in the respective table row (that was dynamically added on the fly by some js).
Still with me?
I can easily populate, dynamically, a select drop-down using ajax/javascript based on the value of the first drop-down, in the first row. I can even populate three or more select boxes in the same row, using ajax/js functions to load each additional select. Yet, this is not my goal.
Here's what I have... My form contains a simple table with 3 columns. First is a checkbox, the second is the "State" select box and the third column is the "City" select box. I have two buttons above the table that allow me to "Add Row" and "Delete Row". Mind you, the first row (which is programmed-in), works perfectly for loading the city names of a state using ajax.
Upon clicking the Add Row button, I'm able to create the second row dynamically, which contains the checkbox, state select and city select fields. The state select is populated based on the innerHTML content of the original column, but the city select is obviously null because it is expecting ajax to fill it. Note: the names and ID names of these fields are iterative... city_id, city_id_1, city_id_2, city_id_3 and so on... so I have that uniqueness to work with.
My problem lies in the fact that when I select a state from the 2nd or 3rd (and so on) rows, only the firstcity select changes. Why? Because the js/ajax processing function says to operate only on the element with name "city_id"!! Which is the name of the city select box in the first row.
I have not (yet) found a way to dynamically pass the name of the element I need updated to the onreadystate ajax function. When I've needed to populate two or three select boxes in a row (same row), I've had to have complementary ajax functions for each drop-down - which are static, mind you... but what if I create the element dynamically?? I can't pre-program that many functions into my page... or must I?
If you have any ideas on how to accomplish this I would be soo damn appreciative!!!
Thanks!

var i=1; // put here the number of the column being added now.
var x=document.getElementById("city_id_"+i);
// populate x

Related

SSRS Dynamically Show Data

I am wondering if you can have other tables show based on the value selected in the main table. I am not opposed to drill-down either.
My main table is the summary and was hoping to show additional data when the user clicks on a Type. When clicked another table would be visible. For example, in the screenshot, the Pool table would be visible when the Pool type is clicked in the main report. As mentioned if this is easier as a drill-down then I will do that, but not sure how. The report currently has a dataset for each table. Do I need to combine the datasets to do a drill-down?
Main and child tables
The best way to accomplish what you described is with a drill down and you would need to combine the datasets into one.
Combine your datasets
Add a table to your report and reference the single dataset
Add your detail row group to the table - from your child table (Area, Average)
Add a parent group to your details row, group your detail row group by Type, it should add a Type column to your table. Delete this column and it will ask you to delete the associated group as well. Select the option to delete only the column.
Recreate your table by adding rows, be sure to match the grouping indicators (brackets) on the left side
Right-Click on the bottom row in the box where the bracket is to highlight the entire row, click Row Visibility. For the option "when the report is initially run:", select Hide. Check "Display can be toggled by this report item" and select the name of the textbox that contains [Type]. If you don't know what this is, exit out of the dialogue box and right-click on the cell [Type] and click Textbox properties, the Name will be in there
Repeat step 6 for the label row for your details row (second row from the bottom)

Oracle Apex 5.1: Report column based on LOV(List of values) showing returned value not display value

I have created an interactive report with a form. In the form I have two select lists. The first select list is a list of values defined in the shared component. And the second select list is another list of values which is also defined in the shared component but this select list populates its LOV based on the selected item in the first select list.
Let the names of the select lists are:
Region.
Country(which is dependent on the selected item in Region field).
Now when I press save/create button in the form, a row is created in the report. The Region column and Country column in the report are both "Plain Text(based on List of Values)". But what I see is the Region column is showing the correct display value of the LOV but the Country column is showing the returned value of the LOV.
I want both of these columns show the display values rather than the returned value. Could anyone help me find the solution?
Are you using the same LOVs in form and interactive report? If so and in the conditional LOV (countries) you refer your form item (ex. PX_REGION) it will not work correctly in IR. Probably IR is showing the returned value because the option "show extra values" is checked.
If this is the case my suggestion is to change your IR and instead of a "Plain Text(based on List of Values)" you make it plain text and change the query to an inline query in IR query to obtain the value you want to show.
If you don't want/like to put your LOV queries in different places I suggest you to use this approach shared by Nick Buytaert
Hope this helps you solve your problem.

Rich Select with different value but same label is not behaving correctly

I have a rich:select dropdown which has different values but some labels are same.
For example:-(A-a,B-b,C-a,D-a)
So whenever, i'm selecting D-a select item, its submitting A-a, i.e. the first select item with same label.
So the functionality is not working porperly.
What could be the solution for this?

Using XPath to locate on a button within a table

I have a table with several columns. The first column contains unique data, the 5th contains three buttons (Edit, Assignments and Delete).
I would like to use an XPath expression to locate on the edit button for one of the rows by indentifying the row using the unique data from column one (think that made sense).
I have built some expressions which will allow me to locate on the first column and edit button independantly as follows:
//td[text()='Managers']
and
tr[2]//button[text()='Edit']
The closest I can get to doing what I want is:
//td[text()='Managers'] | //tr[2]//button[text()='Edit']
...However this will locate on the data/button in column 1 AND 5 at the same time, what I want is just for the button in column 5.
The reason I want to do it this way, is so later I can pass in 'Managers' as a varaible in order to select the row (as its unique and meaningful data), and then press the edit button in a different column on that row.
Hope this makes sense!
Thanks
The question isn't very clear as posted, especially because I can't see any relevant part of the HTML. But if I understand this correctly, you can try to select the row that has Manager in it then get corresponding Edit button like so :
//tr[.//td='Managers']//button[.='Edit']

Adding TextBox in FORM with AddNew Button

I am working in Oracle Apex .i want to add TextBox i-e Disease from AddNew Button because i have Multiple Entries for one TextBox.The entries will be selected from another table through POPUP LOV. Below is the picture.
I don't think I can explain it step by step here, but it sounds like you could make use of a Tabular Form in your case.
In a Tabular form, you can dynamically add-update-delete new rows with a button, and for each field you can have Popop LOVS or Comboboxes to select data from.
Here are a few things to note:
When you insert a Tabular Form in your page, you'll instantly get three processes; one for Automated Row Fetching and two for save-update operations. By default, these processes are triggered through a button. You might want to change that since you have other items to submit in your page.
In a tabular form, you define a SQL query and the resulting columns of that query becomes your fields. For each field, you can select whether you want it to be a Combobox, Popup LOV etc.
Since you want to use a single column "DISEASE" in your treatment table, you can use one of the list item types that support multiple values (generally separated by colons (:)) - for example, a Shuttle.

Resources