Copy To Clipboard: Click Twice To Work?

Configuration: Node, MySQL, localhost

I have successfully used the Browser component's copy to clipboard feature on other pages so this one is puzzling. And I don't believe this is a bug, just a result of my understanding of some Wappler elements.

I have the following code in my .ejs page:

<a href="#" class="card-link text-secondary" dmx-on:click="scGetSocialUsernames.load({tag: 'Instagram'});browserMain.writeTextToClipboard(scGetSocialUsernames.data.varFanList)"><b>Fans List</b></a>

This link calls my API "scGetSocialUsernames" and passes the "tag" variable. The API is working and filters the query based on the tag passed in. The API looks like this:

The odd behavior, noticed by me adding the returned variable "varFanList" to a notifications element in the page, is that the first click on the link calls the API and executes without issue, but the value of 'varFanList' in the notification message is blank and pasting from my clipboard reveals "undefined". If I click that same link a second time, the notification message shows the correct return value of 'varFanList' and pasting from my clipboard reveals the correct query result.

My assumption was that these two events in the dmx-on:click would run in series (first the server connect, then the copy to clipboard), where the 'varFanList' value would be available to the copy to clipboard event.

I'm stumped as to why it doesn't work on the first click, but does on the second. Thanks in advance for any assistance.

You would've been right 20 years ago :slight_smile: (and you still are in certain programming languages like Go, but not in JavaScript)

JavaScript background

The trend when it comes to front-end has been to perform asynchronous, non-blocking operations, to prevent hanging the entire UI while an operation is in progress. Synchronous HTTP requests were deprecated a long time ago.

This means HTTP requests are asynchronous, any function calls to perform an HTTP request return immediately (internally they return a Promise [a JavaScript object], a Promise that the HTTP request is going to be executed and the results given afterwards).

Wappler behaviour

The first time you click, the HTTP requests starts, the data is empty, and you copy that to the clipboard. Then the request completes, and the result is unused. The next time you click, the HTTP request starts, the previous data is present, you copy that to the clipboard. Then the request completes, and the result is unused.

Perhaps you may consider adding a Dynamic Event to your Server Connect, so that when it's done you run that clipboard thingy. I believe that's what's considered "industry-standard".

2 Likes

Thank you @Apple. The non-blocking operations makes sense to me. I do have to remember that, as I understand it, Wappler is a lot of JS and event listeners judging by what exists in my project's 'lib' folder. I definitely fought against it in my first month or so of Wappler development. Old habits die hard...

I'll look again at my approach. I posted my first attempt at building the requirement, but thankfully there are still more options. Appreciate your explanations and suggestions.