Quasar QSelect menu with async options - javascript

Quasar's QSelect menu behaves weirdly on the first time I write in the input, at least on computers (I use it with Tauri for native a application).
It should open after the first async request modify the options but it doesn't.
The workflow is that I write in the input, an async request is sent after 500 ms (resuest characterized by a settimeout in my example below).
I thought the menu would open automatically after the options change but it's not the case on the first time I write in the input, unless I hit the enter key or the down arrow key. I tried to use the qselect.showPopup() just after the request, but it still doesn't show initially.
How can I make it show after the first request? Here's a codepen for reproduction :
https://codepen.io/KilianDvs/pen/mdjpXdN?editors=1010

Related

ADB2C branching logic in User Journey via JavaScript

So, I am pretty new to ADB2C Custom Policies but here is what I have:
I have a User Journey. I have a Custom Page with a bit of JavaScript. I already solved one problem thanks to Stack Overflow but ran into another one.
When the user clicks on the login button in our customized frontend, some validation is performed. If this validation fails, we display another button which, if the user clicks it should "call" another technical profile or orchestration step in the Custom Policy.
The way how I imagine it is that this button continues my User Journey at a different predefined step, but I don't know how I would even start adding a button that does that. (I only understand that the Log In button is generated by ADB2C itself with a class "next", I presume the default behavior is that ADB2C just moves to the next orchestration step upon that button being clicked)
The reason I can't make that button just call a link is that our systems architect requested all logic being called through ADB2C, which I don't know if this is actually a good practice.
You can:
Use a custom error content page and add a button out of div with id="api". Handle the click event trough JS and make it call the same (or any other) user journey appending a query param like (policy-url)?byPassStep=2. Then you can map such value to a claim type using a claim resolver like this:
<OutputClaim ClaimTypeReferenceId="byPassStep" DefaultValue="{OAUTH-KV:byPassStep}" AlwaysUseDefaultValue="true" />
And then use it in a pre-condition:
<OrchestrationStep Order="2" Type="ClaimsExchange">
<Preconditions>
<Precondition Type="ClaimEquals" ExecuteActionsIf="true">
<Value>byPassStep</Value>
<Value>2</Value>
<Action>SkipThisOrchestrationStep</Action>
</Precondition>
</Preconditions>
</OrchestrationStep>

How to stop triggering introjs after first walkthrough?

I'm using introjs.
But when a user ends the intro, then refreshes the page, introjs starts up again.
Is there a way to only show a walkthrough once per user?
For example I have it where when a user first signs into my website - introjs will popup. I only want it to pop up for that initial welcome.
Potential Solutions
Maybe there is a way to trigger introjs via the create action like one would with a flash message?
I could replicate all my header, sidebar, and challenges section code into pages/tutorial.html.erb and make a route www.websitename.com/tutorial, but then that would be a lot of code to duplicate and then whenever I change something in the site I would have to change it in tutorial too.
Is there a way to adjust this javascript method in application.js to trigger only once per user $(function () {
introJs().start() })?
I just use data-intro="" for each step of the walkthrough.
You want your application/webpage to remember that the user has already gone through your tutorial.
There are a few ways you can do that. For a start, you can use cookies or localStorage
The gist is that after the user finishes, or otherwise exits your tutorial, you can store a descriptive value to the user's client, by using one of the above methods, and on page load you should first check if this value exists and act accordingly.
EDIT: As mentioned in comments, you will need a server side approach as well.

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

Clear UNDO history of events in browser with JavaScript?

I have a CodeMirror instance written in Javascript that acts as a code editor. I load the code for the procedure the user selects..when the user selects one procedure then another I just call the set the value to the code of that procedure. When I do this and the user clicks CTRL+Z or right click, undo it brings back the previous procedure. I need to clear the undo history when I call set value..can't find out how to do this have looked all over..any help?
What about clearHistory() . it works for me. call it when user selects a procedure.
editor.clearHistory()
or you can completely disable the undo feature by using "undoDepth" in codemirror configuration
undoDepth : 0 ,

Accessible, 508 compliant Ajax Loading Indicator

How do I make an Ajax Loading Indicator Accessible / 508 compliant. My pre-compliance strategy is like so: initiate ajax request, set timeout to show an indicator(div containing a paragraph with text and a spinner in the center of the screen) if the request doesn't finish within one second, if the indicator is showing when the request is complete, remove indicator. I've tried doing things like setting focus on the indicator text to no avail. JAWS version 9 (which does not support WAI-ARIA) is the target screen reader and I am using jQuery though any solution will do.
Thanks!
If your using Jaws 9 there's no way to do this. I can think of two options. One is pop up an alert box telling the user to be pacient. Option two would be to add a read only text field and update that field with the timer value. I think jaws will notice the change if the user enters forms mode but can't test this out since I don't have a setup up for web development. I'd really suggest you push for a new version of Jaws and use WAI-ARIA as a selling point. Live reagons would make this a lot easyer.

Categories

Resources