Javascript access bubble db

Need help Database
1

I have a drop down list that is created through javascript on the page. How can i populate the dropdown list from a list of values in my bubble db.

2

Can you share the link to the editor so I can have a look

3

In the “HTML A” look at the “source: source”. This variable needs to be set from the bubble db table as a list, how can i do this?

If you set the source: null, the drop down renders fine.

4

I have just tried to access the editor, no joy. Can you please make it public till the time we sort it out

5

Yep done, all good, please have a look now.

6

Any idea?

7

Have you tried using the Toolbox Plugin? You can define functions that can be used in custom javascript code to interact with Bubble.

For example, you would insert a function from the plugin into your javascript code, lets say storeMyStuff():
function (event) {
console.log("loading my Bubble DB stuff");
bubble_fn_storeMyStuff(doSearchForxyz); //search your Bubble app for relevant data
};

Using that Toolbox Plugin, you would place a JavascriptToBubble element onto the page and define your function (in the case above, that is bubble_fn_storeMyStuff). Then you would add an html element onto the page, and insert your javascript code within script tags along with the fuction you just created - bubble_fn_storeMyStuff.

1 Like
8

Thanks for your help, i am bit stuck with the function. Following is the HTML element javascript that generates the dropdownlist, and the “sourceX” variable is needed from the bubble db.

U
U913Ă—252 18.4 KB

I have placed a javascript to bubble element with bubble_fn_suffix “do_stuff” but i don’t understand how to call this function in HTML element to assign sourceX with bubble db data.

Following is the link to the editor with everything set up, can you please populate the drop down list with vehicle names from bubble db.

“abc00001 | Bubble Editor”

Thank you.

9

Okay, I set it up so that you can populate a dropdown. Try it out.

Here is the code I used to store the Bubble db stuff into the JavascriptToBubble function:

   $(document).ready(function () {               
    //store your vehicle names into an array
    //note that we are using split to create an array from a string
    let cars = "Search for vehicles's name".split(",");
     bubble_fn_doStuff(cars);
    });

You can see the Bubble Dropdown is now popluated withy our list of cars from the database:
bubdbjsexample

You still need to build out your jxDropDownList (unless you want to use the Bubble dropdown in my example), check out this example to help you:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?light

4 Likes
10

Thank you very much you have been AWSOME!!

The line “let cars = “Search for vehicles’s name”.split(”,");" cleared up everything.

Its bit confusing as from the look of it, it seems a string variable “cars” is being created with a value of “Search for vehicles’s name”, but bubble works its magic and it is amazing how this works.

Thank you very much, you have made my life a breeze, i am still amazed how bubble works out the dyamic value in javascript.

11

Glad to help and super glad that code snippet helped clear things up :slight_smile:

Bubble is a powerful tool, no doubt. Feel free to post javascript-related questions, there are more than a few active people on this forum who can help out with that.

1 Like
12

I consider first the issue (you need to show specific thing according to a filter on user). I suggest a way, yes this was not the one that you first talk, but I consider it to be valuable (and less complicated and why bubble exist: no coding).

Now you want to do it javascript. Do it.
Now maybe you can take a look at Toolbox plugin - collection of utility elements