What’s up,
So I’ve recently been writing some of my own custom Javascript within a HTML Element. To get the full functionality that my custom program needs, I need to download the list.js library. To do this, I attempted to append “” to my HTML Element. However, the web page seems to be ignoring my attempt to download list.js entirely. Is there any obvious reason for this that I’m missing? How else could I be able to use list.js within my app?
Thanks
I would put this in the header of the page, at the page level.
Be aware that when you start coding things it can break stuff and we can’t really help debugging these.
Thanks for the pointer! Yeah, I’m aware that things can get hairy when you start to program over a framework like this.
This is actually stemming from another problem - bubble has been unable to sort some data I have requested from an external API. Using Blockspring, I requested deals from Hubspot and displayed them onto bubble formatted like this:
[
{
id: 123123,
advisor: ‘some string’,
monthly_rent: 123123,
sf: 123123,
desired_location: ‘some string’,
more properties…
},
{
id: 123123,
more properties…
},
more JSON objects…
]
Is there any reason this list of JSON objects wouldn’t be able to be sorted, even though Bubble can display them perfectly fine in a repeating group?
Why can’t you use ‘sorted’ at the repeating group’s data source level?
I’m having some challenges with the HTML element. I assume “run mode” refers to running “preview” as opposed to seeing results while in editing mode.
I have looked at my script execution settings in my browsers (Safari and Chrome) - and this all seems to be fine.
Useful Tip: I realised that when you use “Background style” as “flat” in the Bubble editor that it briefly shows the executed script, but then wipes the screen with the background color if a mouse event is detected (bug maybe?)
It seems if you put all .js scripts into the page HTML header field that it will execute, but the moment the page or HTML element makes reference to external libraries it fails to execute. Am I doing something wrong? I’d love to create a plugin in future to contain the script and wrap it with an API, but for now, I just want to test the execution of script.
Any help will be appreciated.
The page HTML header should have scripts that belong in the page header, i.e. loading from external libraries and style sheets.
Then put page body scripts into the HTML element.
What sort of challenges are you having?
Hi - thanks for the reaponse. The trouble I’m having relates to external script reference. An example would be using an open source js library. The library would therefore be located outside of my app and using script with src=external library does not work.
Would I need to get that code into my app? Or could I find a way to let the app load it online while running? Not sure if there is a way to do something like this.
To get code usable by the app, you can do any or all of:
Copy code into the page header or HTML element.
Reference another hosted source in the page header or HTML element.
I usually look for a cdn hosted minified source if using a popular library. Could possibly reference a github file too.
If you want to see a working example, the signature pad example loads a library and has copied code / css …
There is the possibility that what you reference is clashing with something in Bubble. Don’t be shy about providing details here.
Thanks for the help! I got it to work based on your example. Much appreciated.
