How to use same JavaScript routine on multiple Text Field change? - javascript

In my APEX application I have some calculation routine implemented in Javascript. The input is taken from multiple Text Fields. I want the calculation routine to work each time any of those Text Fields has been changed. Using Dynamic actions, how can I share this Javascript function among multiple Text Field change actions? Preferably avoiding any CSS modifications.

You can select multiple page items when specifying your single dynamic action to fire on change. They are comma separated in the Item(s) field (clue is in the name).
Also, as mentioned in the comments above, you could use a CSS class to group your items. As for whether this is a bad thing, check out this question.
Best practice: class or data attribute as identifier
Personally, I feel comfortable using classes to allow for easy jQuery selectors and it is both very common and natively supported in APEX.

Related

VueJS list of various elements

I have tried and tried searching for the specific use-case I am after but alas, came up empty.
It could be that I am searching in the wrong direction, but here is the question:
Say I have an array of objects that contain, among other parameters, a title field and an input type field. With this array I would like to create a dialog from vuetify, in which I dynamically insert the relevant input elements based on the type field. This can be input, radio, checkbox but also something more exotic like cron scheduling.
So one way would be to set a slot in the dialog on where the input fields should come, but this requires coding on the child component which will implement such dialog. I was thinking more of something like a loop over the array of objects and rendering the specific component based on the type field, Something like a switch-case system.
Is this something I can do, and whether it is smart to do ? Would like to hear others opinions about this :)
I think it can be done by creating a huge form that contains everything and not rendering unnecessary elements due to
v-if="inputType.includes('text')"
In this case, you can use text-1, text-2, text-n for rendering multiple form elements with the same types. I don't think adding is possible because even if you manage to add, how do you set the condition, v-modal, event bindings etc.

How to link HTML5 input to two forms

I have an input that's used by JS to control submitting two forms with different actions, but only one of them will be submitted and it should include this input.
I can do it with a hidden input using JS to change their values when the original one changes but I'd like to know if there is an HTML5 solution.
Here is my JS code to do it:
$(function(){
$('#originalOne').change(function(){
// check if I should disable a form
$('.hiddenOnes').val($(this).val());
})
});
I think I might be understanding what you are asking, correct me if I'm wrong:
"Is there a way to update the values in one form based on the values in another using HTML5 only (without using JavaScript)?"
Unfortunately, the answer there is NO. You will need to attach event listeners and handle changes using JavaScript. I had previously suggested using a <fieldset> to group the inputs that you wanted to disable independently, but this method does not work for multiple form actions.

How to implement a Tag Bar in javascript / css

I'm trying to implement a search bar for a web page having basically the same properties of the Tag bar appearing when you ask questions on Stack overflow:
It should have the following properties:
Allow the user to directly type in it.
Pull up entries with same letters as the user is typing.
Allow to delete an entry by either deleting on keyboard or pressing on inserted elements.
I'm interested in understanding the underlying structure of such an element and how to setup listeners and functions that call each other, not simply the code. Could anyone please help me figure out the skeleton of the functions I need to implement?
Besides just using a jQuery UI plugin, the simplest way to do it would be with a text input box and a ul. You can use jQuery (or something else depending on if you are using a framework) to listen to any change in the input box.
At that point you have a choice depending on the rest of your app: The filtering can happen in the front end or the backend. Because databases tend to be fairly quick, it might make sense to filter within it if you have a very large set of data. Otherwise, you could just grab the entire list and use JS to filter it.
Either way, have a callback occur on that change that initiates the filtering and then renders the results into the ul.

Add a not-predefined amount of input boxes to a webpage (and use that with Google App Engine)

In GAE it's easy to set up an HTML page with 1 (or any other predefined number) of text input fields and then deal with the data you get. My question is how is it possible for a user to start with 1 text box, and using a button (like "Add more") to add any number of additional boxes he wants.
I'm not sure both about the HTML implementation of this (I think it'll require JS, but I'm pretty much a noob with these stuff), and the GAE implementation of this (How to write code that'll accept an arbitrary number of inputs?)
An answer to either would be very welcome; perhaps the GAE problem is not even a problem. It'll be easier for me to ponder on once I get the html/js part right.
The Answer depends on what size of information you expect. One option is an Expando Class where you add to it as needed.
Or the easier to implement if your input is small enough you probably can get away with a db.StringListProperty and use object.append(var) to add more fields in the post.
You will certainly need to use JavaScript to create the additional text boxes. Then loop through the submission in the post to add the data to either option.

Replace hintText with predefined list

I'm working on a project using jQuery Tokeninput. The plugin is described as such:
Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they
type to find each item.
See a working version here: http://jsfiddle.net/WGmrr/
Is there a way that I can show the entire predefined list once the user clicks the inputbox but before the user starts typing, effectively replacing the hintText that reads Type in a search term?
You could use an entirely different UX approach here and go with Harvest's Chosen plugin, using Multiple Select:
It looks wonderful, works well, and can be re-used in different contexts.

Categories

Resources