I've never worked with Ember, and am fairly new to JavaScript, and have for the past couple of days been trying to translate my HTML and JS into the Ember framework (I got some help from a friend). The first feature of the project should simply be able to fill a text-field with longitude/latitude of an inputted address. The second feature of my project is based on a selection from a drop-down menu (drop-down is made of different counties), and fill another text-field with a specific email address depending on which selection was made.
The problem I'm having: I can't seem to figure out how to fire up my setEmail function as I need it to recognize a value (1, 2, 3, 4 etc.) from the selected county from the drop-down, and based on that value; fill in the text-field with the correct email address. I've heard about Ember Observers, but cannot seem to figure out how to implement them for the drop-down I built. I'd really appreciate if someone could take a look at my project and give me pointers on what I could improve, or even do completely differently.
Here is a link to an Ember Twiddle of my project: GeoApp
I appreciate any suggestions and insight! Thank you.
The main idea was right, you were just missing small details. x-select has an "action" hook that you can use which is being triggered every time the value of the x-select changes. This also passed to you as an argument the selected value.
Also there was no need to make the as |xs| part and the options should be set as {{#x-option value='country.value}}country.display{{/x-option}}
Doing all this will make it work. You can find a working twiddle here.
Related
I am using the react-autosuggest library to implement auto-suggestions functionality. I am pretty new to using this library. I went through the documentation, but it seems to be a bit confusing to me in certain things.
I tried to find answers to a few of the things:
What is the complete list of inputProps that can be passed to the component?
How can we open a dropdown with a list of a few default suggestions as soon as the user clicks on the input box instead of showing suggestions only when the user types in?
What exactly is the use of prop: multiSection when the data is of the form [{ name: '', flag: ''}] (just a sample) and we display only name in the dropdown list?
I found a lot of similar working examples using this library but wasn't able to get hold of the understanding properly. Seems like there are lots of missing points in the library documentation.
I found this one basic clean working snippet: https://codesandbox.io/s/react-autosuggest-example-with-hooks-forked-y7lkom. But was unable to add the dropdown functionality to it.
If anyone can help to get through this feature and some above queries, I would be highly thankful.
I'm new to react native.
I need to create the front-end part of an app used to manage products. In this app, a specific screen lets users add a "new product".
I've almost finished the UI part, but I now need to show errors to the user when something is wrong with its input (a missing product ID, a description with less than 10 characters, etc.).
Here's my objective: when the user clics the "publish" button, I check all the inputs. If the input is ok -> nothing happens, if the input contains an error -> the field turns red.
To achieve this, I need to work with states. Here should be an example for the title:
style={[style.inputText, {color: this.state.titleColor}]}
And I can change the state.TitleColor if something is wrong with the title input.
The problem is that I don't want to create a specific state for each input (titleColor, IDColor, descriptionColor, etc.).
How can I do a common state for inputs that are correct, and an other state for inputs that are wrong? I thought of using an array (with inputCorrect:[] ;
InputWrong:[]), but I do not know exactly how to deal with it.
Can someone help me? Thanks.
I'd recommend using a form library to help you with state and validation. I personally like formik, but I've heard good things about react-final-form as well (both are compatible with React Native).
Libraries like this make it easier to manage validation and input state, because they manage the state for you and tell each of your fields whether they're valid or not (passing appropriate error messages if needed).
It's still up to you to build the UI that displays the errors, but having the logic taken care of is a huge help. The formik docs have some good examples showing you how you would achieve your goal of changing a field color to red if that field has errors.
There is a bit of a learning curve to understand how to use these libraries well, but it's well worth it in my opinion.
I've never worked with Ember before, and am fairly new to JavaScript, and have for the past couple of days been trying to translate some HTML and JS into the Ember framework (I got some help from a colleague). What I've tried to accomplish is, first; getting Google Geocoder to function and fill some text-feild with latitude/longitude from an inputted address, and second; filling some text-field with a specific email address based on what selection the user made from a drop-down menu. Everything is working quite good, except that when I select an option from the drop-down it sometimes displays another selection (for example, selecting "Oakland" displays "Butte") - guessing it has something to do with "value", just not sure how to address and fix the issue. Does anyone have any idea on a fix, or perhaps another approach to make it display the correct selection, while still sending the correct email-address to the text-field?
Link to an Ember Twiddle: MyProject
Also, separate question - I'm also not sure how my "dataValue"-variable works (routes/demo.js); my colleague helped me out with that part and I'm just a little unsure of my "setEmail"-function knows what dataValue is supposed to be as I can't figure out where the variable is set. If someone could clear that up for me, I'd very much appreciate it.
I appreciate any suggestions and insight! Thank you.
Your problem is that; various options you create share the exact same "value". To explain; whenever you select an option from the select; all the x-option components recalculates their "selected" computed properties in case the value of x-select changes. I have modified your twiddle and just inserted some console logs to x-select and x-option in order to explain you the situation. See the modified twiddle.
Initially select Oakland and open the console and trace it. As you see; x-select first updates the value to 1; and all counties with value equal to 1 (Oakland, Collier, etc.) outputs their text since they are all selected. Since Butte is the last option in list with value 1; its text is displayed in the user interface. Now just select; Brevard and as expected St. Lucie is displayed in the user interface but all options with value 3 are selected including Brevard and Indian River. Now just select Indian River; this time x-select logs again; but x-options do not log; because the x-select's value did not change (it was 3; and it is still 3 since an option with the same value is selected).
So to sum up; in this implementation you need to give unique option values to every single county. Otherwise; the county that has the largest index inside prepopulatedCounties array will be selected among the counties sharing same value. If you continue selecting another county that has the same value as the last selected one; you will think your code is working mistakenly because select will display it correctly; however that is not the case!
If you intent to use select in ember; I would highly recommend you to use ember-power-select instead of reinventing the wheel.
Regarding your second question; it is related with actions. You send an event to router via this.sendAction('action', this.get('value'), this);
inside x-select and you handle this inside demo.js router because you declared setEmail as the event handler inside demo.hbs with {{#x-select value=model.selectedCounty action='setEmail'}} the last part. I highly recommend you to look at Emberjs official guide for action registration and handling. Good luck.
I am trying to use Angular-Formly together with angular ui-select using $http for results.
The options should refresh as the user types in. When I set the model from another text input, the ui-select updates correctly and show the corresponding results based on what was typed into the text box.
When I however type straight into the ui-select box, I am not getting values back and the templateOptions.options function does not fire and the $viewvalue is not updated.
I also don't seem to have access to the $select.search results which are updated but are not available in the expressionProperties.
Please see the following JSBin that reproduces the error :
http://jsbin.com/peducofaje/edit
I would appreciate help on this.
I have an early Christmas present for you. I've updated the ui-select example to have exactly what you want :-) A few notes on why yours didn't work:
expressionProperties only run when the formState or model changes which is an optimization to reduce the number of watchers (because all expressionProperties share a single watcher). The problem with this is, your model didn't get updated until after an option was selected, so yeah.
The template was using a group-By, but the templateOptions didn't have a groupBy. You could use a templateManipulator to dynamically add a group-by if one is present on the templateOptions, but my solution doesn't demonstrate this.
You weren't handling the case where the address search was empty
Also, checkout the note at the top:
// NOTE: This next line is highly recommended. Otherwise Chrome's autocomplete will appear over your options!
formlyConfig.extras.removeChromeAutoComplete = true;
I hope this is helpful!
I have an object, that describes an application and one property can have several values from a list. I am using JSRender and JSViews for the databinding, I'm getting pretty good with the rendering part and I still have a lot to learn on JSViews.
I have several dropdowns in my application where the correct value is selected but I don't see how I can databind with several values inside a list box.
I created a JSFiddle to demonstrate the concept but again, I have a problem, my fiddle seems to work only when I am logged in, I gave it a name, I can see it in my public fiddles but, when connected as a Guest, I can see the code but it doesn't seem to run.
Here it is: [http://jsfiddle.net/ClaudeVernier/73pyx/]
If you could help me getting this work where the listbox is in the Red rectangle with IDs 100 and 200 selected, that would help me a lot, next, if anyone could suggest a way to have the same thing but we checboxes next to each item in the list box, it would be perfect !!!!
I think it exists as a JQuery plugin but I am not sure, if anyone has experience of such plugin and making it work with JSViews... it would be a dream... :-)
Thanks for any help,
Claude
In your jsfiddle, you are using render(), not link() so in effect you are using just JsRender, not JsViews, and you won't get JsViews data-binding.
Did you see this sample: http://www.jsviews.com/#samples/tag-controls/multiselect? It shows a multiselect listbox using JsViews.