I'm trying to use angularify in a project, but I'm facing the given problem:
I'm not able to get my onChange function called when a dropdown value changes. I have a second dropdown box which the listed values depends upon the first one.
How can I achieve the intended behavior with angularify?
I was looking, debugging and trying, and looks like I will not be able to do this because de dropdown directive writes a bunch of div's to my html. There is no select elmeent in any place of the document. How will a div element fire a onChange event?
Here is my markup:
Parent select
<dropdown title="Selecione" class="col-6" ng-model="novoProcedimento.procedimento" ng-change="buscarLocaisExecucao(novoProcedimento.procedimento)">
<dropdown-group class="meudropdown" title="proc.nome" value="proc.nome" ng-repeat="proc in procedimentosPermitidos">{{proc.nome}}</dropdown-group>
</dropdown>
Child select - Depends on parent's selection
<dropdown title="Selecione" id="dente-regiao" class="col-5" ng-model="novoProcedimento.local" ng-change="buscarFaces(novoProcedimento.procedimento, novoProcedimento.local)">
<dropdown-group title="local" value="local" ng-repeat="local in locaisExecucao">{{local.descricao}}</dropdown-group>
</dropdown>
Controller - Intendend to be fired on parent's change.
$scope.buscarLocaisExecucao = function (procedimento){
selecaoProcedimentoService.buscarLocaisExecucao(procedimento)
.then(function(locaisExecucao) {
$scope.locaisExecucao = locaisExecucao;
});
}
Am I using the wrong framework? Am I missing something?
Thank you.
Related
I'm using react JS and I have a problem. I don't know how to get the value from my dropdown and put that value into a onclick button. I have read lots of topics but I haven't find anything really useful for a beginner like me.
I am using "scheduler" that helped me built my dropdown and some other stuffs.
So, my dropdown get data from a local file and looks like this:
{values.map(v => (
<option value={this.value}>{v.value}</option>
))}
console.log(ref)
And my button is like this:
<Button onClick={() => this.decrement()}>
Ajouetr la réservation
</Button>
The decrement method was only there to test if it was working, and it is.
Actually, what I want to do is quite simple: I have some values in my dropdown (from 1 to 7). And I have a state that says there is 30 places available. What I want is when I choose a specified item in my dropdown AND validate with my button and then my state to decrement with the specified number. Because right now it only decrement with 1.
I hope it's clear enough for someone to help me, because I spent 2 days on that problem and I don't know what to do.
Thank you :)
Next time, it's nice to provide an interactive example with your question. Here's a CodeSandbox I made that (I hope) illustrates your example (link). If you want to fiddle with the example, just click "Fork" in the top right corner.
Back to the solution:
I think what you're missing is storing the selected value in your state along with the 30 "places". What you want is to make your <select /> tag into a "controlled component". When someone interacts with the <select /> you want to change the internal state so that it matches the selected value. That way, when you call decrement() from your button, you can use the internal state's value rather than getting it from a ref (I think that's what you were trying to do).
Here's a link to the React doc that explains how to use forms, specifically the <select /> tag: (link).
Take care!
I would say that you can think about this in 2 different steps:
SET THE QUANTITY STATE
Set the state with the current dropdown value - For achieving this, you can just use the onChange method in your select:
<select name="quantity"
value={this.state.quantity}
onChange={this.onSelectQuantity}
>
In your constructor, you create a variable quantity inside your state
Create a function called onSelectQuantity where you will set the quantity state with setState.
Do not forget to bind the function onSelectQuantity on the constructor.
With this, every time that you change the value on select, your state would capture its value. You can log it from the function if you want to test if it works.
DECREMENT FROM THE BUTTON
After this, you can just decrease the value of the state again from decrement function
<Button onClick={this.decrement}>
Ajouetr la réservation
</Button>
You will have a function...
decrement() {
const newQuantity = this.state.quantity - 1;
this.setState({
quantity: newQuantity
})
}
Hope it helps!
I prepared a demo on JS Fiddle to demonstrate the problem.
Please, have in mind that in my real world example I have a lot of custom logic - which I've skipped here - that's why some parts of the code in the JS Fiddle (may) look strange.
===
The problem - if you click on the labels - the wrapper and the inner components get updated and rendered correctly.
However - if you click on the checkboxes themselves - then the wrapper gets updated, but the checkboxes doesn't render correctly.
https://jsfiddle.net/dbjfvsm2/5/
At the same time - if I directly call the property handler from the checkbox - then all is fine:
https://jsfiddle.net/dbjfvsm2/6/
I tried with onChange as well, but same result.
Why is this happening? ... And I really need to have that instance method - onItemClick - that is reused by both the label and the checkbox, this is where some general stuff is happening.
The only thing preventing checkbox to being checked is e.preventDefault(); in onItemClick function. Try removing it and it will work.
onItemClick = (e, id) => {
this.props.handleCheckboxClick(id);
}
Why it didn't work? Your answer is here
I've updated your fiddle in order to get your desired result
https://jsfiddle.net/sabbin/kh4j1Ltp/12/
You should not use the verification in the child component in the first place, also e.preventDefault was causing the an issue in your logic. Also avoid using arrow functions inside the render, you could bind the eventHandler to the class it self
LE:
I changed the checkbox logic in the exaple to use a generator, but you can write them one by one
Instead of
{checkboxes.map((id)=>(
<Checkbox
handleCheckboxClick={this.handleCheckboxClick}
selected={this.state.selectedCheckboxes.indexOf(id) > -1}
id={id}
/>
))}
You can write them directly
<Checkbox
handleCheckboxClick={this.handleCheckboxClick}
selected={this.state.selectedCheckboxes.indexOf("item-two") > -1}
id="item-two"
/>
<Checkbox
handleCheckboxClick={this.handleCheckboxClick}
selected={this.state.selectedCheckboxes.indexOf(item-one") > -1}
id="item-one"
/>
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
I am enhancing a textarea with autocomplete functionality like this:
<MentionAutocomplete ref="autocomplete">
<Textarea ref="editor"/>
</MentionAutocomplete>
The idea is that MentionAutocomplete can use any thing like textarea or input in itself and still work.
This works nicely and its achieved by the autocomplete listening to keyboard events like this:
<div
className="MentionAutocomplete"
onKeyDown={this.handleKey}
onKeyUp={this.handleKeyUp}
>
{this.props.children}
{this.renderAutocomplete()}
</div>
But I recently ran into an issue, where the autocomplete complains that field.value is undefined. I am assuming that the Textarea component might be doing something, or there might be a browser extension messing with it.
So ideally I would like to do something like this:
var self = this;
<MentionAutocomplete ref="autocomplete">
<Textarea ref="editor" onKeyUp={(event) => self.refs.autocomplete.keyUp(event) } />
</MentionAutocomplete>
But I am wondering, is this the right approach? Is there a better way?
If I understand your issue correctly, you can define the event handler on the parent, and pass it through to the child:
<div className="MentionAutocomplete">
{React.cloneElement(this.props.children {handleEvent: this.handleEvent})}
</div>
handleEvent here is a function you define on the parent where you can pass the event or whatever and is available on the child through this.props.
Another approach that seems a good fit for what you're trying to create would be to create a higher order component which essentially wraps a component with another to add functionality.
I'm learning AngularJS and I have a question regarding the databinding for select elements. The databinding for textboxes works without any kind of event handling code. Once the ng-model attribute is set textbox updates when the model property changes and vice versa. There is no need for ng-change attribute.
However, for select elements we need to write functions that will be called via ng-change atribute.
Why does angularjs handle databinding without an ng-change attribute for textboxes but requires functions that will be called via ng-change attribute for select elements?
UPDATE:
Added the fiddle in the comments section. The example is from AngularJS in Action book. Click on one of the stories, change the textbox value and the model is updated. Change the selection in dropdown model is not updated.
UPDATE:
Added a new fiddle in the comments.
Thanks.
I've created a fiddle that works here - The issue is really just the dummy data here. In the original fiddle, the object created in the statuses array for {name:'Back Log'} and {name:'To Do'} are not the same (not ===) as the {name:'Back Log'} and {name:'To Do'} objects created in the dummy story objects.
To make the example work, I pass the indexed statuses into the getStories function. However I think this is really just a case of demo-induced confusion. (I've been looking at the MEAP for Angular in Action as well, and I think it could be simplified a bit like this one, that uses simple string statuses that will pass the === test
var getStories = function(statusesIndex) {
var tempArray = [
{title:'Story 00',
description:'Description pending.',
status: statusesIndex['To Do']
},
{title:'Story 01',
description:'Description pending.',
status: statusesIndex['Back Log']
}
];
return tempArray;
}
I think your confusion might be a result of the select documentation still being incorrect. (See my Disqus comment.) ng-model can and should be used with select. ng-change is optional and it just gives you a hook should you want to do something each time the selected option changes.
Normally you should use ng-options with select.
If i understood your question correctly then I think your guessing is wrong because for select boxes, you do not have to invoke ng-change event in order to fetch the selected option.
<select ng-model='select'>
<option>....</option>
<option value='one'>One</option>
<option value='Two'>Two</option>
</select>
// Your selected option will print below... without invoking ng-change
<div>You selected: {{select}}</div>
Demo: http://jsfiddle.net/jenxu/1/