I've written a function which gets called when input textbox text changes -
On HTML -
<input id="unique" type="text" data-ng-change="KeywordChange(filterKey)" ng-model="$parent.filterKey">
in Controller
$scope.KeywordChange = function (filterKey) {
//some logic goes here
}
Keyword change function works well when input text box text changes. but I want this function NOT to be called when I change value of input text box like this
$('#unique').val('');
$('#unique').change();
and I've to change textbox value programatically - so is there any option to know keywordChange function is being called by actual text change in textBox or called by programatic call to $('#unique').change();
If you want to change the value of the textbox (that is bound to some data) programmatically in AngularJs, then all you need to do is update the corresponding Model.
Using jQuery to update the UI is most definitely not recommended.
You'd need to just update the property "filterKey" in JavaScript from within your AngularJs code.
Why not just use ng-keyup since all you care about are physical key strokes?
Related
I am using Laravel with Angular JS for forms. I got a text box in the form as below
<input type="text" name="removedSiblings" ng-model="form.removedSiblings"
id="div_removedSiblings" class="form-control">
Using Javascript I am assigning a value (a button click)
var elem = document.getElementById('div_removedSiblings');
elem.value = 'malai';
Got the below code inside the Controller PHP
$removedSiblings = \Input::get('removedSiblings');
logger($removedSiblings);
I always get null value for $removedSiblings variable whenever the field gets value using the javascript.
But, when I type a value manually inside the text box, then that value is printed inside the controller.
Whats wrong here?
The AngularJS framework does not watch the value property of <input> elements. It only updates the model after user input or an update from inside the framework.
Use the ng-click directive for the button:
<button ng-click="form.removedSiblings = 'malai'">
Click me
</button>
For more information, see
AngularJS ng-click Directive API Reference
It's is because of the usage of ng-model which uses two way binding.. Try to set the value on the controller scope variable which is form.removedSiblings.
hope this helps.
I have an html input that has the k-textbox class to make it a kendo styled input textbox:
<input id="LocationInput" class="k-input .k-textbox" data-bind="value:location"/>
Then, when I open the create event popup (which is where the location input text box is located) and I have a user specified parameter for LocationInput with a value they wish to autofill....
I do $('#'+paramData[i].fieldName+'Input').val(paramData[i].recordId);
where paramData is an array of passed parameters, fieldName would be 'Location' and recordId would be its value. After this, the text is set correctly in the console when checked with console.log, but no changes are reflected in the create event popup, the box is still empty. I tried adding a '.change()' after the '.val()' but that didn't do anything either.
How can I get the 'k-textbox' input to reflect the value I set it to in the javascript when the input is part of the create event template?
To find the input you should search within the container element of the event object that gets passed to your handler:
function yourSchedulerAddOrEditEventHandler(e) {
e.container.find('#'+paramData[i].fieldName+'Input').val(paramData[i].recordId);
e.container.find('#'+paramData[i].fieldName+'Input').trigger("change");
}
See here for more info http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#events
Good evening,
I am writing an application using AngularJS and I require for the application to send data with a POST request to the nodejs server.
My data is structured like as a json object and it has data binding thanks to the AngularJS framework.
As of now, a function is dynamically trying to create possible values that the user might like inside of some input tags. An example:
<button ng-click="generateFoodAndBeverages(row)>Generate</button>
<input type="text" ng-model="row.service.day.beverage" placeholder="beverage" />
<input type="text" ng-model="row.service.day.food" placeholder="food" />
The two input values can be set by the user by typing in the value they would like (e.g. "Cola", "Hamburger"), but above the input tags is a button that can generate the input values for the user.
The function that generates the values takes them from an array and then at the end of the function returns two possible values, one for beverages and one for food.
When it has the two returning values it changes the attribute value of both inputs, setting them to the two possibilities generated by the function:
jQuery("#input1").attr("value", generateFoodAndBeverages(row)[0]);
jQuery("#input2").attr("value", generateFoodAndBeverages(row)[1]);
This is not perfect nor elegant but it's working. The function populates and dynamically changes the value attribute of those two input elements each time the user requests for automatic generation of food and beverages so the values are actually set and do exist.
Even so, even if I see them on screen as text inside the input fields, my POST request does not recognize the fact that the ng-model actually changed. The only way the ng-model registers the changes to the value attribute of the input fields is if the user types something with his keyboard, manually changing the value attribute. Another example:
<input type="text" value="generateValue()" ng-model="row.service.info" />
The one up here does not change the ng-model value at all.
<input type="text" value="User Typed Value" ng-model="row.service.info" />
This other one instead does change the ng-model value and as it changes and exists, it is passed to the $scope that can later be sent as a POST request to the server.
Any ideas as to why the "automatically and dynamically generated" value of the input field does not get registered by the ng-model while the user typed value does?
Thanks in advance!
[EDIT]
Apparently the problem comes with the ng-model not changing. I tried to debug the problem by applying an ng-change in the input. If the change is done by javascript, it is not registered with the ng-model and the ng-change function does not fire because the ng-model was not changed even tho' I can clearly see the new value set by javascript for the input tag. If I change the value of the input tag by hand the ng-change is fired and the console logs the change.
I could apply the changes directly to the ng-model if it weren't so different for each row.
Having the ng-model like this:
<input ng-model="row.serviceInfo.DayObject[dayString].food" />
<input ng-model="row.serviceInfo.DayObject[dayString].beverage" />
How would I be able to apply the changes directly to the ng-model given how dynamic the model is. As an example, I could have 1000 rows, each with their own serviceInfo object. I don't know how I could change the model for each of those rows with the dynamically generated values.
[EDIT]
The problem was indeed with ng-model not changing. The solution consisted in applying the changes to the ng-model for each element inside the dynamically generated values function. Thanks everyone for the input. I'll leave this piece of code here if anyone ever comes across the same problem! Thanks again!
let foodEl = angular.element(the row element food input);
let beverageEl = angular.element(the row element beverage input);
$scope.displayedCollection[i].serviceInfo = {
"day" : {
"food" : generatedValuesFood(el, day),
"beverage" : generatedValuesBeverage(el, day)
}
};
foodEl.val($scope.displayedCollection[i].serviceInfo.day.food);
beverageEl.val($scope.displayedCollection[i].serviceInfo.day.beverage);
I think that your problem is quite simple. As #ssougnez said, don't mixed jquery with angularjs. Angularjs use data-binding concept, don't use jquery style to change the input value instead use the ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea). In your generateFoodAndBeverages function just set the ng-model value according to which row for eg:
var generateFoodAndBeverages = function () {
$scope.row.service.day.beverage = array[0];
$scope.row.service.day.food = array[1];
};
I am setting values on a form in an iframe via Javascript.
Please note that I do not have access to the page displayed in the iframe. My Javascript page is on the same server, so it has access to the form displayed.
//HTML of Forename field in form control
<input class="form-control" id="Forename" type="text" data-bind="value: dto.Forename">
Javascript setting the value:
var frameNode = document.getElementById('frm1');
var fieldNode = frameNode.contentDocument.getElementById('Forename');
fieldNode.value = FirstName; //previously defined
The values set successfully (see attached img). However, when I hit SAVE, I still get a 'values Required' message. I suspect this is because the Knockout Javascript libraries that binds the value with the view model, needs a keypress.
Even when I manually go into the form and press Enter/Tab after each value, I still get the message. It's only when I change the Forename and Surname manually to something else that the Save is successful.
Has anybody done something like this before? Thanks
In this image you can see the values are set
I believe the problem you're experiencing is actually due to a deeper issue involved in using a knockout binding. Updating the value of a UI control directly has no effect because the real underlying value is stored in a javascript view-model object. The DOM element only mirrors that value, and updates are performed using a change event hook under the hood. When you change the value manually on the UI the change event is triggered and the view-model value gets updated.
Knockout.js Docs
So to properly update the values you should try using the knockout library to update the underlying data:
var frameNode = document.getElementById('frm1');
var fieldNode = frameNode.contentDocument.getElementById('Forename');
var viewModel = ko.dataFor(fieldNode);
viewModel.dto.Forename(FirstName); //value setting works like a function
If you can't get that to work you can also try manually triggering the change event. That's far easier if you have jQuery, but can still be done without. See How can I trigger an onchange event manually?
I declare a textbox, dropdown list in knockout js. If I dynamically change the value of the textbox or dropdown using jQuery like this...
$('#IdNo').val(_IDNo);//for textbox
$('#IdNo').change();
$('#Subjects option').filter(function () { return $.trim($(this).val()) == parseInt(subjectbind); }).attr('selected', true);//for dropdown
$('#Subjects').change();
...then change() does not bind the value to the knockout. The changed value does appear in the UI but is not reflected in the View Model for further actions.
If you want to make sure Knockout takes note when you manually update the DOM, you need to use the trigger method like so:
$('#Subjects').trigger('change');
The change method can be used to register handlers for the event.
PS. If you're manually updating the DOM, then you should evaluate why / how you're using KnockoutJS...