Hello Bubblers. Just a interesting function we discovered to add any text in any position and at caret / cursor position inside a text input… Thanks for @NigelG help.
The following code works in Bubble:
Just add this code inside HTML Script:
jQuery.fn.extend({
insertAtCaret: function(myValue){
return this.each(function(i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == ‘0’) {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
})
}
});
$(‘#test’).click(function() {
$(“#textarea”).insertAtCaret(‘text’);
});
And than add a button id called “test” and a text input id called “textarea”
This is really helpful for adding text at any position in a text field.
What I am trying to achieve and struggling with is the following use case (please refer screenshot)
Select value from Dropdown (Name)
Click on Generate Text button
Expected Result:
The Multiline text field gets the corresponding value (Description) from the database matching the Name field.
Actual Result:
Nothing happens
I have set up a workflow when pressing the button, but it doesn’t seem to be right. Can you please help? Sorry if this is basic, but I’m not very proficient in this as yet.
I don’t mind resetting the Multiline text field to reflect the updated value (Description) from the database
I dont Think I can Help. But id try the find and replace option in your multiline text. So you can set the specifics texts from Dropdown to be Replaced .
Ex. (JujuNickName) --> Juan Costa.
( User ) --> current user
Yes, I did tinker around a bit more just today and auto-binding on parent element’s thing did the trick.
Would also like to share that since I was pulling the data from the Database, any modifications in the multiline input were changing the text in the Database App Data. I had to first create a copy of the template in another table (Type) and then let the user modify the data there.
I am trying to click on the emoticon but nothing happens on the input box. I am not sure if i am making some mistake here.
I have added the snippet to the Page HTML element and have added the the test and Textarea as ID attributes in the Emoji’s and Multiline Input Respectively.
Should i create a workflow for the same? Any help here would be great.
Thank you for this. Looks great unfortunaly , the editor doesn’t open.
Can you explain step by step the workflow implemented and what to do in the input text when you go to the “design mode” ? what should we set in intitial content ? how it looks ?
Thank very much, it would be very helpfull.
The “Page HTML Header” field is not only for scripts, so you’ll have to put this javascript code inside a script tag. Just type “” after it and the code should execute.
