How to change selected value of aria listbox using javascript? - javascript

I'm trying to change the listbox option[shown in image below] to JPY ¥ using javascript
however there are a lot of issues that come here and I just don't know how to go about it...
A thing to notice is, on changing to JPY the right hand side gift-total value also changes from 0.00 to 0
this is the external showcase of the listbox
and these are the listbox options(the id changes every refresh to the webpage)
If you open the listbox dropdown and try to pick an option
aria-activedescendant and aria-owns attributes dynamically get added into the div listbox html element
which are using the id of the listbox options
^Source for definition images:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
What I have tried:
Now I have tried changing innerHTML of the element
however apparently that only changed the visual aspect, as currency never changed to japanese yen on the next page that would you know charge you some amount
any way on how I should go about to directly change its value using javascript without resorting to clicks and all
Spent a few hours on stackoverflow and google but only one similar question which no one has answered unfortunately
TLDR;
most likely tldr; change selected value of aria listbox using javascript
except this thing doesn't use aria-selected which is causing me major pain to understand how to make an autofill for it.
Link to try for yourself:-
https://examplegroup.chatango.com
=> You would have to sign up/register to view the svg (triple bars/rectangles) at bottom right corner.
=> Clicking on "Extended Features" and then clicking on "Purchase an original account" will result in reaching my starting line from which you can replicate and assist further in figuring a solution to it.

Related

Showing and hiding a list box on a spawned template page in Adobe Acrobat Pro

I'm struggling here and I'm hoping I'm just missing some small detail.
In a nutshell, I have a PDF file that by default has three pages shown and five hidden template pages. A drop-down form on the first page has five options and depending on the selection one of the five template pages pops up at the end of the document (as page 4).
On one of those template pages is a drop-down with two choices, "High" or "Low". If "High" is selected it shows another drop-down with a few different options and a list box with multiselect enabled. The listbox populates different choices depending on that second drop-down's selection. If "Low" is selected the drop-down and list box are hidden and four checkboxes are unhidden.
All of this works perfectly on the actual template pages, I don't have the exact code with me as of right now (as it's at my work )of the High/Low drop-down, but the code is set as a simple if/else if/else on the drop-down to display.visible/hidden based off of the selection.
The issue I'm running into is that I can not get the listbox to hide when the template pages is hidden and the 4th page is spawned. I have updated the JavaScript to Acrobat's p4.PageName.FormItem format and I've tripple checked my JavaScript and I can't see any errors. Everything else will toggle hidden/visible without an issue, but just not the listbox... If I'm on the template page and I delete and readd the exact same JavaScript it works, but as soon as I spawn a different page and then respawn that one it goes back to not working (which makes sense).
So... What in the world am I doing wrong, or how exactly do I go about fixing this?
I just wanted to provide an answer to my own question, as I was able to finally figure this out. The issue was a simple one, the person that originally made the pdf had a JavaScript code that, for some reason I still don't fully understand, made sure the list box and a few other form fields were always set to visible. Once I removed that everything worked like a charm. Should have probably looked into that first!

On page refresh, my select option dropdown value is getting selected to default, how to stop it?

On page refresh, my select option drop-down value is getting selected to default. I want to set it to the previously selected value. On page refresh it should not reset. How i can achieve it in html, java, js.
Your question is quiet tricky and you don't really explain it accurately in your original question.
Since you are using Content Presenter, that means this code resides in WebCenter content and Oracle ADF itself cannot control its behaviour, as it is just loading the content!

MVC Razor ListBoxFor customize/restrict selections

I have a ListBoxFor and the first item is All Values. I already have the list box set to allow multiple selections. I would prefer to make it so that if a user selects the All Values option they are either asked if they want to clear out all other selections (Use All Values) or keep their current selections (De-select All Values). I would be ok without the user dialog asking them what to do and just automatically clearing out selections, but that is less preferable.
At first glance it seems that Javascript/jQuery is the best route to go about for this. I wanted to check to see if anyone knew of built in functionality for ListBoxFor that does this. The other option that I see is building a custom html extension. Even with this I still only see JS/jQuery being built and auto generated.

Toggle/Formatting with Javascript

I posted awhile ago and got great insight on hide/show text with javascript... Now I need to take this one step further. Can't find the right combination to make it work.
Here's what I NEED:
When a viewer comes to this page, the first hide/show element is displayed in the text box AND
That element is also highlighted a certain color to display that it is active.
Lastly, as every hide/show element is clicked, that stays highlighted until the next is selected.
Here's a link to my dev site. I think it's easier this way.
http://verus.exigodigital.com/services/
Here was my previous post on the hide/show text:
Showing & Hiding Text with Javascript
REALLY appreciate the help, guys! :)
You could make 2 CSS definitions, one for the currently selected textbox, and one for textboxes that aren't selected
When someone clicks on one of the textboxes to edit its contents (the onfocus event), you just call a function that runs through all of your textboxes, and for each one checks if it's the one with focus - if it is, set the className variable of the element to "selected" or something, and it it's not the one with focus then set it's className variable to "normal" or something
If I didn't understand the question or you need more info, just let me know :)

Triggering Javascript on cached page?

I'm pretty sure I can't do what I'm actually asking, but am wondering if there is some sort of workaround for the issue.
I have a page that has a drop down SELECT form element with several options. If one particular option (in this case, the first item) is selected, we show additional content (via jQuery). This works fine.
What happens, though, is that if I select item 2, the additional content disappears, as it should. I then go to a different page and then hit BACK. A that point, the page properly has kept that additional content hidden (as it was the last state) but the SELECT menu has been reset to the first item. I then have to click the SELECT, pick a different option, then select it again picking the first option, which finally brings the additional content back.
I can't trigger Javascript from what I can tell on a cached page (or is there a way?) Any other clever options?
One option I've come up with is to apply some sort of mouseover action to the area that houses the SELECT menu that does a quick 'reset elements' check. This seems a bit hacky and, of course, will produce an odd screen redraw unexpectedly for people.
You can record that the user action has taken place and re-execute it using JavaScript. You can store it in a cookie, then check for it on page load and reset the elements you want.

Categories

Resources