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.
Related
Odoo 13.
I got two float fields: time_given and timer.
I have created a widget for 'timer' field. My widget works as real-time clock or some sort of timer. The problem I have encountered is that I want to change the style of 'time_given' field based on the following condition:
((time_given - timer) <= 30 sec) i.e less than 30 seconds left
To change the style of the field the widget attached to is pretty easy, but I am not sure hot to get access to other field elements in the form view I need and make some visual manipulations with them if needed.
I was able to get access to other field elements, change their style and add some text but the it is not a proper way.
this.__parentedParent.__parentedChildren
I get array of objects, then I loop through it and look for the field needed. After I found my target field element I am able to play with it.
For example:
$field_name.addClass('text-danger')
The way above works pretty fine but again as I said before, this is definitely not a proper way.
I was trying to find the right field element and add class to it by the following way:
$("[name='field_name']").addClass('text-danger')
It found the element, but did not add the class 'text-danger'.
I was trying my best by googling and reading the source code, but failed.
enter image description here
I have managed to solve this issue. Just used core.bus.trigger method mentioned in the official documentation.
P.s. In case if you are still interested how I did this in more details, just let me know in the comments section below.
I'm working in Microsoft Dynamics 365 and have a problem with the Custom Filters for Lookup Fields.
Right now, when a value is selected for one Lookup Field, this calls some JavaScript that builds a CustomFilter for another Lookup field. This works exactly as it should. The problem though is that occasionally there is a value that was already entered in this filtered Lookup that is no longer relevant, and I'm trying to figure out how best to handle this.
Example:
If Option A is selected, values 1, 2, 3, 4 will appear in the filtered lookup.
If Option B is selected, values 3, 4, 5, 6 will appear in the filtered lookup.
The client is requiring that the filtered lookup not be blanked out if the entered value in the filtered lookup field is still relevant. In the case of the above example, that would be values 3 and 4, but these exact over-lapping values could change down the road so I'm not about to hard-code the solution.
I'm not seeing any quick way to accomplish this. I would rather not perform a separate search based on the filter as that will be extremely time consuming for me to put together given how things have been built up to this point. Also, Dynamics seems to resolve the selection based on pre-filtered criteria, which doesn't help.
Any thoughts or idea?
I gave a second thought about this. You have 3 options to try.
store the selected value from lookup2 on form load/on change of lookup2 in a local variable, then on change of lookup1 fetch the available options based on prefilter query & cross check with local variable. If it’s still a relevant option, then set the lookup2 with local variable value
we can try to stop clearing the lookup2 , not quite sure if it’s possible. Like hooking the onchange of lookup1 & preventDefault when the previously selected option is still a relevant option
convince the client & train the end user to choose lookup2 again as in this is not worth the effort
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.
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'm writing a program to auto fill form blanks in the web pages. With javascript I can deal with normal blanks like username input and passwd input. But when it comes to cascade select, like some web pages asking you to input your address info, there's 3 selects: choose country, choose province and choose city. The content of the second menu is loaded upon the onchange event of the first one, so as to the third select.
I'm wondering how to auto fill these 3 selects, given that I've already known the value for each one of them. Could any one help?
The following code seems not working:
document.getElementById("selProvinces").value='11';
document.getElementById("selProvinces").onchange();
document.getElementById("selCities").value='113';
document.getElementById("selCities").onchange();
document.getElementById("selDistricts").value='1190';
You might have a few problems here.
In some browsers, calling .onchange() won't actually trigger the event. See this answer to How do I programatically force an onchange event on an input? for more details.
If the page you're filling in is ajaxing in the next lot of values in the cascade, 'selCities' might not contain the value 113 just yet. You could set a timeout and poll periodically to see if 'selCities' has some values in it before setting the value
It might not actually be the onchange event that they're using for the cascading. The oldschool way used to be onclick. They might be doing it onblur. Possibly silly, but worth peeking at the source to make sure :)