I need a Mootools based autocompleter that retrieves data by ajax, and will fill in multiple form input elements when an option is selected. I.E, a user searches for "foo", and one of the options might be "foobar", which has associated with it the variables objecttype AND objectid, both of which need to be set in the form when the user clicks on "foobar".
I've been looking at two autocompleters: Meio.Autocomplete and AutoCompleter as my best bet, but neither of them really seem to handle what I need them to handle.
I'm considering either rewriting/extending one of those, or possibly using the Meio version (which handles a single value) and storing my multiple variable in the form in one field, possibly as a json object that can be parsed client side with jsonParse and inserted into the form with an additional function after the selection is made.
Does anyone know of a simpler solution?
You could use the Meio.Autocomplete's onSelect event with an identifier, that JSON encodes all of the needed properties.
var data = [
{value: 'name1', identifier: {
id: 'id1',
type: 'type1'
}},
...
}
I made a quick example
Related
I have a simple form that's in a dialog fragment used to submitting two fields for log-in auth.
For simplicity I was hoping to not have to use data binding, but rather use some method to gather all data inside my sap.ui.layout.form.SimpleForm.
I added a name property to each input element which says in the docs it is " Defines the name of the control for the purposes of form submission."
https://openui5.hana.ondemand.com/#/api/sap.m.InputBase/controlProperties#name
However hard as I try to find there doesn't seem to be any getFormData methods.
All SO questions and guides either use data binding to a model, or hard-code references to the individual input controls with .getValue() methods.
And looking further into the form API, there doesn't seem to be a Submit event either.
Given an arbitrary form, what would be the best way to gather all submission values without hard-coded references or data-binding?
Would a method that walks though all the children elements of a form looking for all submission values work? I think it might, but there are more submission input types then just the input component.
You can get the value of the fields by directly using;
var oField = sap.ui.getCore().byId('IdOfTheFieldAtTheDialog');
var sValue = oField.getValue();
But it's always better and convenient to use data binding which keep things neat.
And If I assume that you have the id of parent form container, you can iterate over the items and get the sap.m.Input elements in it without knowing the IDs of the individual inputs, and you may check the name property of the fields if you want. Check this snippet;
https://jsfiddle.net/hdereli/9e92osfk/3/
I'm working on an application that reuses a lot of constants. I know that I can use wire IDs to use the same data in multiple places, but I'm not sure if I'm supposed to create a new globally unique ID every time I want to use that data.
This is a simplified example of what I'm working with:
const colors = [
{value: 'red', label: 'Red'},
{value: 'blue', label: 'Blue'}
]
class MyElement extends HTMLElement {
constructor() {
super()
this.html = hyperHTML.bind(this)
}
connectedCallback() {
this.html`
Hi, ${this.getAttribute('name')}! What is your favorite color?<br/>
<select>
${colors.map(option => hyperHTML.wire(option)`<option value=${option.value}>${option.label}</option>`)}
</select>
`
}
get name() {
return this.getAttribute('name')
}
}
customElements.define('my-element',MyElement);
hyperHTML.bind(document.body)`
<my-element name="Alice"></my-element>
<my-element name="Bob"></my-element>`
I know that unless I specify a wire ID, the options will only appear in one place. I could use :${this.name} as the wire ID, but I have to figure out what to do if there are two people with the same name, and if I want to have one form for "What is your favorite color?" and another for "What color is your shirt?", I have to make another unique ID for that.
Is there a way to somehow scope wire IDs or do I have to make globally unique ones?
There is a subtle issue in your logic, you'd like to map an array of items to themselves, instead of contextualizing their value.
Example: you are wiring the option object, out of usage, situation, context, instead of wiring the Custom Element instance to some data it's using to render itself.
As you can see in this CodePen example, you can simply wire the Custom Element context, and make the option information unique, in terms of scoped id, simply pointing at its value, through its owner:
hyperHTML.wire(this, `:option:${option.value}`)
At this point you'll have a single option element per each node so that you can easily select anything you want instead of moving the same option node globally all over the place.
Actually, the global ID is an anti-pattern as it is, I believe, in every other keyed framework such React or Vue so ... just use the instance, as your wire context/reference, and create a unique id for it with ease.
I hope this solved your issue.
I am building a multi-step application form with React. Having first built it with pure internal state I am now in the process of refactoring to Redux using redux-form.
Having used the example here as a basis: http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a we have come a good way.
However the problem appears when i have two forms which are supposed to have the same value. During one of the pages i have a name field, that is supposed to be duplicated on the name field of the next page. The opposite should happen if you go back from the last page. Any tips to how this could be achieved?
Using the wizard, you are basically working with the exact same form that's split into multiple pieces. Ultimately it's the same form, because redux-form tracks them by name. It is how the library identifies the pieces of the same form - using the name.
form: 'wizard',
Here you can see that the exact same instance of the form will be shared throughout the pieces. fields work in a similar manner. Each field is defined as part of a form.
As long as you use the same field constants inside the fields object that you pass into the reduxForm function and as long as the value for form is the same, so that they use the same underlying form object, it should work for you just fine.
On one page you should pass in
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'someOtherFieldThatShouldOnlyBeHere',
},
...
And then on the other page:
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'thirdFieldHere',
},
...
Also, make sure you keep destroyOnUnmount equal to false if you want to navigate back-and-forth.
Hope that helps.
So I have this use case:
I have a list of contacts on a page, and want to allow the user to add new ones to the list.
In order to add a contact, there is a form with two inputs which can be filled out and there is a button to send out the form.
This is pretty straight forward in Meteor. I bind the submit event to the form as in this snippet:
Template.contacts.events
'submit #new_contact': (event) ->
event.preventDefault()
firstName = $('#first_name').val()
lastName = $('#last_name').val()
Contacts.insert(firstName: firstName, lastName: lastName)
$('#new_contact input').val('') # Clear the inputs
So well, this is also pretty easy, but I don't like the idea of referencing specific ids in the form, getting them with JQuery and then inserting a new contact to the list. I also think this has to scale very badly, if the form had 20 fields, I'd have to search for 20 elements in the form, which doesn't seem very clean.
I'd like to know if there is a better way around this problem, like binding the form inputs to an object / collection so that it gets updated automatically when the user introduces data in the form and then only persisting it when the form gets submitted.
There is automatic support for this planned (I think), but in the meantime, you can probably get around most of your objections by using the template object:
Template.contact.events
'submit form.contact': (event, template) ->
firstName = template.find('input[name=first_name]').value
Alternatively, in the body of a event helper, this.currentTarget is the form itself.
I have a form object in jquery, and I'd like to select all inputs of this form.
Let's suppose my form object is called form. If the form has an id, I can just do
var id = form.attr('id');
var inputs = $('#' + id + ' input');
If not I can check this, and then manually add a temporary id, do the selection, and remove the id (or just leave it there). But this just looks too complicated, there must be an easier way, but I'm not able to find it.
Another possible way (which I'm not able to make work) would be something like
var inputs = $('input').filter(function() {
var parents = this.parents();
return ($.inArray(form, parents) != -1);
});
but this too seems complicated (and it doesn't work as stated).
By the way, from the performance point of view, which approach would be more convenient?
http://docs.jquery.com/Traversing/find
form.find('input')
should do the trick I would think. Just in case, if you're trying to get all of the input fields to grab their current values and submit them with AJAX you can just use the .serialize method of your form:
data: form.serialize(),
As far as your performance question goes, I believe your first method is more effecient, the second will iterate over every input on the page. As of jQuery 1.4 the first method is definitely more efficient, querying based off of object IDs initially has been significantly enhanced.
Im not sure what you are trying to do here... if there are multiple forms on the page then you have to have some kind of identitfier.. a pernt, and id, a class something. If you only have a single form then its as simple as $('form input').