So I have the sandbox of code right now which is plotting polyline data based on the option selected the issue is right now from the code i have provided if you run the first one initially then quickly hit the button again to pause it then change the select value to option 2 and run again it seems to plot a line between the two. Where as I want the replayMap to re render itself when the options selected changes so that the data that is going to be plotted is only the data from the current select menu value. So basically cannot figure out how to set nextPosition state or props.activityData back to empty after the user chooses a new select menu option:
code sandbox link: https://codesandbox.io/s/distracted-sun-jwk3dg?file=/src/ReplayMap.js
I have been at this for hours but still cannot seem to find where I am going wrong can anyone that is more experienced in react spot my fault
Related
I am using ng2-select in a dropdown
ng2-select
On load of the page I have a few items which need to be displayed in the dropdown, then when searching if the values don't exist in the previous items it should add a new item and be able to save it.
I have tried using a typed event and achieved what I want partially I'm able to add a new value to the items list but on tab out or focus out of the textbox the value which we entered is disappearing.
Below is the stack blitz example which I tried.
stackblitz
Is it possible to add a new value on the fly in ng2-select?
Any help is much appreciated.
Thank you.
I have a website which has 3 select boxes at the top. These select boxes are used as filters for a table I am displaying underneath it. When you change something on the select box I filter the table.
If I change the select box values and go to a new page and hit the back arrow at the top and return to the same page all of my select boxes changes are still there. However, the filter that I applied to the tables using javascript does not match the filter displayed. The table displays data for the default filters.
I though if I just run the filter function on page load, things would work again. But turns out the filter function runs way before chrome resets the value of the select boxes from the cache. When I set the breakpoint and started debugging the progression on returning back to page is:
1. The select boxes resets to default values (i.e the order of the `<option>` tag)
2. The table filters based on the default values
3. Chrome at some point decides to readd the filter
How do you guys deal with this?
I'm trying to create (what I thought) was a basic Scheduler component for a current project.
EDIT: I have found my own solution, and the answer is provided below. Bonus for any help solving the select all features, which I have shelved for the moment :)
tldr;
Question: Why if I pass in a disabled row, enable it, and begin to edit, that row becomes disabled? If I enable all rows OnInit, everything works as expected.
Editor StackBlitz: Editor StackBlitz for Angular FormArray Table
App StackBlitz: App Stackblitz for Angular FormArray table
The goal is to allow a user to select and/or deselect specific days or time ranges within a form. If that column or row is selected, then their elements will toggle their 'active' state.
So, I toggle the Sunday column and Morning Row. Only the value pertaining to Sunday and Morning time ranges will be active.
I'm using *ngIf or hidden to hide elements from the user, so they cannot edit. If the form input is active, then they can view it an edit that field.
However, the issue comes when I initialize my form with rows that aren't active. So, I have the Morning Row active ngOnInit, and then the user can toggle rows once the state initializes.
When those disabled rows are enabled, and a user begins to edit, that row's active state disables. This is where I'm confused. I'm in the weeds and I can't seem to locate the issue.
After debugging, I have solved my issues. For anyone who runs into a similar use case, my solution involved how I handled setting the active states on toggling the FormControl's values.
Previously I was toggling active values through Angular's getter function:
[FormControl].value.[ActiveFormField] = !active_state
Which wasn't updating the form's proper values.
Instead, I needed to set the values as such:
[FormControl].value.[ActiveFormField].setValue(!active_state).
By setting the value, the form was then properly updated, and my toggle states performed as expected.
I also cleaned up the nested for-loops I referenced; however, I still need to tackle select all and deselect all states.
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 extract and assert on the text of the currently selected option in a drop down, and finding it harder to do than I expected.
The situation is as follows:
Open browser page with a drop down list on it
Assert that the currently selected item is X, the default
Click a button elsewhere that changes the value of the drop down
Assert that a part of the page based on the selected drop down has changed
Assert that the currently selected item in the list is now Y
The last step is the part that I can't get to work, and the second to last is what makes me believe that I don't have a timing issue, as other parts of the page have reacted to the altered drop down (this is in an Angular app, though I don't think that's adding to the problem).
The problem I think I'm having is that the selected attribute is set in the HTML and so is not being updated when the displayed value of the drop down is altered. So if I find all the option elements under the select in question, iterate over them and call getAttribute("selected") then the results of that don't change even though I can see that the displayed text in the drop down has been updated.
Attacking it from a slightly different angle, I tried to getText of the select itself, but that gives me back the text values of all the possible options, which makes sense.
The Java API has a getFirstSelectedOption which I was hoping to replicate, but it appears to do exactly what I'm describing above!