Forum Academy Marketplace Showcase Pricing Features

Any way to auto-update auto-bound dropdown on page load?

I’m basically trying to have a field within a thing, that will log which user last interacted with that particular thing.

The log needs to remain in the database even if the user leaves the page through any other means than a “save and progress” button (eg if they close the browser or something, it’s important that it still logs their interaction).

So currently I have a workflow on page-load adding the user id to a list of IDs within the page’s thing. Then on completion of that page, it just marks the thing as being completed by that user. So this requires a workflow run at the start and end of each user interaction.

But I had the idea that this might be possible with auto-binding instead, a way for the user to be logged at the start without using that additional workflow run. If i can do this i can basically use half the workflow runs per user interaction, which would mean i could support twice as many users.

However, loading a page with an auto-bound input will always load with the previous data… i cant figure out a way to have the data auto-update without the user having to actually change an input (which is impractical). And I don’t think it’s possible to use custom states, since these wont be saved if the page is closed etc.

Anyone have any ideas? It’d probably be kinda of a hack anyway, but that’s fine!

Thanks :slight_smile:

It occurs to me also, that this feature, if possible, could be used to mark messages within the app as read/seen without wasting workflow runs. Simple read receipts are incredibly nice to have, but would not be worth using double the workflows just for that. Is there a better way?

It’d probably be useful in lots of apps, if anyone know’s a way it’s possible? Cheers

Could do this with javascript, alter an Input text’s value and trigger its .change() event, to simulate a user interacting with the element. I haven’t tested this to see if the auto binding works to update the database.

Great, that sounds like it might work! :slight_smile: How do you actually put javascript into a Bubble page? I’ve looked for that feature before but could never find it!

My knowledge of javascript is very limited but i can probably cobble it together with a few hrs…

Basically all the code needs to do is onLoad change Dropdown A (there’ll actually only be one option in the dropdown, but on loading it’ll be blank). Or a command to toggle a checkbox on load would also be very useful. I’m hoping those things are pretty much just one line of code each?

Thanks!

Basic outline here, to get started:

More complex implementation in the signature pad example, with an app to look at:

There’s a few other examples of using javascript in the forum, worth a search IMO.

Good that you’re aware of onload, note that the first time the javascript runs, the input element likely won’t be ready to be changed. The javascript in the HTML element will run at load, and again every time any dynamic values in it are updated.

I’ll be interested to see if autobinding does update the changed value to the database.

Happy cobbling!

1 Like

Ok thanks here’s another post that explained a lot too (for future readers):

So i think I have everything set up right… still trying to figure out why it’s not working… i didn’t quite understand the explanation right at the end of that “language” post so it’s pretty liekly i’ve messed something up, just not sure what…! Any more pointers would be helpful while i try figure it out in the meantime! :slight_smile:

(BTW i did the time delay thing with a custom state (“ready?”) on the repeating group, as explained in the other post, so this code should run 1 sec after the whole page is loaded)

It looks close : ) The “bubble-element” can be removed if you want, but it makes it more robust. Try changing it to:

<script type="text/javascript">
if ("dynamic_value_to_run_this" === "yes") {
  var seen = "yes";
  $('.bubble-element .Input[placeholder="read"]').val(seen).change();
}
</script>

Only one dynamic value needed.

Oh ok, i figured it meant to replace “bubble element” with the dynamic input… otherwise how does it know which input to change? (yeah indeed there’s only one input, but still…)

Is it referencing the input via that placeholder bit? Coz otherwise the placeholder isnt needed, since this whole repeating group will be hidden anyway.

Also what is $ doing? I just copied that from the previous example, but i dont really know what it means… (sorry, i’m very much a Javascript n00b!)

But, indeed, now it appears to work perfectly, and autobinds! SUCCESS!! :smiley:

[EXCEPT, it doesn’t work when the element is hidden(???) … i had to just set the borders and background of the input to ‘none’ then make the text colour the same as the background…]

Cheers!

1 Like

you mentioned read receipts, do you guys know how to do that with emails? That is a future hurdle for me -
Thanks in advance

$('.bubble-element .Input[placeholder="read"]')

$ is the variable name usually assigned to JQuery.

$('selector') is how to tell JQuery which DOM (HTML) element to look for. It returns an array of objects that match the selector string.

.bubble-element .Input The dot in front means class name, for example it would match “.bubble-element” excludes other possible input elements added by javascript libraries, etc.

.Input[placeholder="read"] Yes this is the same placeholder text you put in the Bubble editor for the input element.

If you are confident that the page will only ever have one input element, then '.Input' would be enough for a selector.

.val(seen) is telling JQuery to set a value in an input control.

.change() triggers the change event for the same input control. We can daisy-chain it straight after .val() because .val returns the same JQuery object.

You can play with these expressions in the Browser console if you press F12.

Edit Yes, the Input element isn’t rendered to the DOM when it is hidden. I usually do the same as you, plus set the width and height to 1, set “this input is disabled” to stop tabbing into it, and place it underneath another element.

Another option is to give it an invisible style from the javascript, but then it will show before disappearing.

Awesome result!

@proust007, email is an unrelated topic, and depends on the app’s choice of email service and how it interacts with Bubble.

Awesome, cheers! Didnt realise JQuery was involved… I dont exactly know the difference but now I know where to start looking next time i need to do something like this! Thanks for the help :slight_smile:

BTW after i got the read-receipts working, i added a more complex thing to solve my initial problem, but it turned out to be a little unreliable, and the function i needed HAD to be totally reliable so i abandoned it. Moral of the story being that this is a good option for non-critical stuff like read-receipts, but probably not a good idea to build a core function of your app around it (unless you’re will to do way more extensive testing to fix the problem).

And also, having autobound fields disguised but now actually ‘hidden’ on screen, means users can access those fields and change the data at will. So again, also a bad idea if your data needs to be un-tamper-able!

Cheers

Could do it without JQuery, but it is loaded by Bubble anyway. Some javascript needs to take into account quirks of different browsers, so can get complicated.

I often find that something unreliable is due to incorrect timing, for example a function being accessed before it has loaded, if the loading takes slightly longer. But yes, getting it right can eat up a lot of hours, and is sometimes not worth the effort.

I think being disabled, small, and behind another element is a good enough prevention for user access, in general. But yes your point stands, autobinding misses out on the protections offered by workflow event conditions.

Thanks for explaining your journey :slight_smile:

This topic was automatically closed after 70 days. New replies are no longer allowed.