We Keep Coding

select("Acura", :from=>'js-emu-make-id', visible: false) is not reflected when running save_and_open_page. It still appears to be blank. Why?

I am practicing/testing capybara and ran into a problem with selecting items from a dropdown menu.
The way the website works is that you can only go to the next dropdown if you filled in the one before and I am able to fill in the last dropdown but when I open the page, the previous two boxes remain empty.
internet = Capybara.current_session
url = "https://repairpal.com/estimator"
internet.visit url
internet.select("Acura", :from=>'js-emu-make-id', visible: false)
internet.select("1993", :from=>'js-emu-year-id', visible: false)
internet.select('Integra', :from=>'js-emu-base-vehicle-id', visible: false)
internet.fill_in('address', :with => '10018')
internet.save_and_open_page
real output
expected/desired output
The expected result is that when I open the page, everything is filled in; however, when I open the page what I see is two blank dropdowns but the third one is filled with "Integra" so only that part is working. Thanks so much for the help.

save_and_open_page save the current state of the html elements with their attributes. That doesn't include the state of the html elements properties, so it may not reflect the actual current state of the page (eg. changing the value property of an element does not change the value attribute, and the attribute is what gets saved). If you really want to see the current state you should be using save_and_open_screenshot.
Additionally, is there a reason you're passing visible: false to all those select calls? If you really need to use visible: false to find the elements then the select should be failing since you'd be doing something a user couldn't.

Trying to add functionality to select option

In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});

Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);

Attempting to change text of label in accordion row via item in accordion detail

I have an accordion that uses the datasource Competency, which stores a list of core competencies for their employees and the related metadata (such as a description). Inside the Accordion's detail, I have a panel that uses the Comment datasource. A user can then enter a comment that will get related to the Competency datasources with some unrelated logic.
Right now, I have an empty checkbox (check_box_outline_blank) in the Accordion Row. When a user enters text, I want the checkbox to have a check (i.e. change the value from check_box_outline_blank to check_box) The problem is that I'm not able to figure out a way to select the checkbox.
Selecting with widget.parent.parent.parent.parent.parent.parent.children.DetailAccordionRow.children.CompletionIcon.text = "check_box"; results in the error
Cannot read property 'children' of undefined
at CheckinSubmit.RootPanel.FormPanel.AccordionPanel.DetailAccordion.DetailAccordionDetail.AccordionDetialPanel.CommentFormPanel.CreateCommentForm.CreateCommentFormBody.Field.onValueEdit:1:78
Selecting with app.pages.CheckinSubmit.children.RootPanel.children.FormPanel.children.AccordionPanel.children.DetailAccordion.children.DetailAccordionRow.children.CompletionIcon.text = "check_box";
Throws the error:
Cannot read property 'children' of undefined
at CheckinSubmit.RootPanel.FormPanel.AccordionPanel.DetailAccordion.DetailAccordionDetail.AccordionDetialPanel.CommentFormPanel.CreateCommentForm.CreateCommentFormBody.Panel3.onValueEdit:1:140
Both commands were put into the Submit button's onValueEdit trigger.
I've been using AppMaker's autosugguestions to generate both of these commands. I'm not sure how else to select this item. Here's a screenshot with the UI and outline:

Did you try to use binding? It seems, that you are adding Comments to the Competency, so maybe this binding for the label's text will work?
#datasource.item.Comments.length > 0 ? 'check_box' : 'check_box_outline_blank'
when a user enters text, I want the checkbox to have a check
if you want exactly this behavior, and you have properly configured bindings, then you can bind label's text to something similar to this:
#datasource.relations.Comments.modes.create.item.Comment !== null ?
'check_box' : 'check_box_outline_blank'
Note that bindings will be reevaluated on focus loss of the Comment input (but there is a workaround for that).

How can I change the value of an Oracle APEX page item using JavaScript?

I created the links in the left-most column to target a JavaScript function and I can successfully pass through the value of the row ID to that function.
Once clicked, a modal pops up to present a form to update the fields. However, I need the fields in the modal to be populated with the information from the row clicked. I figured I could create a hidden page item (P2_SONG_SELECT) to store the row ID so that I can use the value in my query for the data. My problem is I haven't been able to assign the row ID value to the application item.
Here is my JavaScript:
Each 'Edit' button successfully uses this URL target:
javascript:viewEditSong$(#Row_ID#).val();
to call this function:
function viewEditSong(Row_ID) {
alert(Row_ID); // successfully alerts the Row ID
$("#P2_SONG_SELECT").val() = UA_ID; // fails to assign
$("#EditSongWindow").dialog('open'); // open the modal
}
How do I properly assign the page item the value passed in?
Elsewhere I use simliar syntax effectively:
ajaxRequest.add("P2_FILE_MAIN", $("#P2_FILE_MAIN").val()); // this works fine

By 'application item' I presume you meant 'page item' as per your question title, since you're prefixing with page number.
Use this to set a value on the browser.
$s('P2_SONG_SELECT', 'xyz')
http://docs.oracle.com/cd/E59726_01/doc.50/e39149/javascript_api.htm#AEAPI269

Scott's post effectively solves your problem by using the built in APEX set method, but as an aside, you are attempting to use the jQuery val() method in the wrong way.
Instead of:
$("#P2_SONG_SELECT").val() = UA_ID;
You should use:
$("#P2_SONG_SELECT").val(UA_ID);
Have a look at the documentation for val().
http://api.jquery.com/val/#val2
You can see that the usage of the function differs depending on whether you want to set or retrieve a value.

Looking for example logic to pull a DOM value into a Custom Script Adobe DTM data element

Actual Question:
Does anyone have any basic example logic of how to pull the value of a DOM element in to a custom script data element?
Background:
I'm trying to build some custom data elements in Adobe Dynamic Tag Management (DTM). I want to capture specific sections of my breadcrumb in to elements - e.g. Given breadcrumb trail Home >> Category 1 >> Category 4 >> Page 1, I would want X = Category 1, Y = Category 4, Z = Page 1
Unfortunately, the anchors in the breadcrumbs do not use consistent identifiers, so I need conditional logic in order to select them. Example: When I'm on the Category 1 landing page, the category's element has ID "Current" but otherwise it has the id "L1Link" - therefore I would want the following logic:
if(#L1Link exists)
X = #L1Link
else
X = #Current
Unfortunately, I'm not sure how to select a DOM element in my Custom Function. I don't think _satellite.$data is what I want (I don't want data, I just want the text of the hyperlink). I tried using cssQuery, but I don't really have a callback to pass anything back to (and contrary to the documentation, it seems to get very upset if I don't have a callback).

Go to Rules > Data Elements and create a Data Element with the following:
Name: category_1
Type: Custom Script
Then click on "Open Editor" and add the following:
var x = document.getElementById('L1Link')||document.getElementById('Current');
if (x) return x.innerText||x.textContent;
else return '';
This will first look for #L1Link and failing that, will look for #Current. If it is found, it will return the link's text.
Based on your post, set Remember this value for as "Pageview"
Save Changes
Next, navigate to
Rules > Page Load Rules
If you don't already have a general page load rule setup that is set to pop on every page load, create one and name it something like "every page".
In the Conditions > Criteria choose Data:Custom from the dropdown and then click Add Criteria
Then add the following in the Custom textarea:
return _satellite.getVar('category_1')||true;
This condition will explicitly invoke the data element to ensure that it gets invoked, because DTM is moody and sometimes may not evaluate data elements. It falls back to true to ensure the condition always returns true, so that the condition will not cause the rule to fail to execute.
Then in the Adobe Analytics section of the rule, choose whatever eVar and/or prop you want to set (e.g. prop1) and set as %category_1%
Save Rule
You will want to repeat this process for each item you are looking to make a data element to pop an Adobe Analytics variable for, though you only need one rule, and one condition for all of them. The condition code would be:
_satellite.getVar('category_1');
_satellite.getVar('category_2');
//etc..
return true;
NOTE: DTM has some caveats of order of execution vs. load/timing of things. This is in part due to the nature of async loading but there is also a mislabeling of order of execution in the documention (see my Issue #2) that Adobe has acknowledged. Basically, you may need to play with the Trigger rule at setting in the page load rule vs. what you set the "Load Adobe Analytics page code at" dropdown to in the Adobe Analytics Tool General config section and hope for the best. I setup a test page to verify all this in my post and pretty much anything I chose in either one worked, but then my test page had virtually nothing on it except the DTM page code and a link.

Very interesting this post, always your explanations are very clear #crayon. By the way, you know how call data elements into script on Thirth party tags (HTML non sequential)? I'm trying to do and honestly, I miss.
When use a Java script non sequential I can take Data element, but my intention is pass Data Element value into image pixel, like:
<img src="//t.qservz.com/tr.aspx?campaign=169779d3852b32ce8b1a1724dbf5217d&type=ppl&retmode=4&orderid=[[orderid]]&totalprice=[[totalprice]]&level=**ValueDataElement**&redirect_url=[[URL]]" border="0" width="1" height="1"><img style="border: 0;" width="1" height="1" src="https://tags.qservz.com/pixel?id=1901&type=img" />
If you can help me, I'm grateful,
Julià.