Develop Reference

Javascript or jQuery inputbox text field writing with data

I have to use a web application during my work, what I would like to fill with my created extension (I'm not programmer...).
The web app has two input fields, what I can't fill effectively, because, when I fill it with js commands below, the strings appear, but the "Add" button is not enabled. And, when I enable that, I'm not able to send the data to server the button click().
When I click with my mouse to the other side of the dom, the strings hide, and I realize, the values are in value attribute, but not in defaultValue. If I fill the fields with key pressing, naturally, the strinsg are not hidden if I click other side of the DOM.
I try to write data inputs using jQuery and simple js too:
input field 1:
$('#autocomplete-sa-material').focus();
$('#autocomplete-sa-material').attr('value', 'A-10035951');
$('#autocomplete-sa-material').attr('placeholder', 'A-10035951');
OR
arrr = document.getElementById('autocomplete-sa-material');
arrr.setAttribute("value", "A-10035951");
input field 2:
$('#input-sa-quantity').focus();
$('#input-sa-quantity').val('27875');
brrr = document.getElementById('input-sa-quantity');
brrr.setAttribute("value", "27875");
I think, the problem is that the fields are modified by functions after change event. The first field can be fill using droplist, where you can select the exact material type. But, if you type keys, the droplist is filtered by the string, that you write (AJAX?). I can fill this inputbox simple Ctrl+C - Ctrl + V from an excel.
The second field, the quantity type is decimal with depicted in groups of thousands (using space character every 3 characters before). When I press the keys, the page exam the string, and create the groups from the string.
Could somebody help me, how I write the input textfield, to I could send data from there to the server?
I would like to help to change the two input text field with js or jQuery.
Updated:
I get some very good idea, there is only one problem, what I would like to solve:
I modified the recommended code minimally and it ran perfect and do what it have to do. The modified code was these:
arrr = document.getElementById('autocomplete-sa-material');
arrr.dispatchEvent(new Event('click'));
arrr.value = "A-10035951";
arrr.dispatchEvent(new Event('change'));
let event = new Event('input', { bubbles: true });
arrr.dispatchEvent(event);
brrr = document.getElementById('input-sa-quantity');
brrr.value = "27875";
let event2 = new Event('input', { bubbles: true });
brrr.dispatchEvent(event2);
There is only one problem left:
I have to click with my mouse into the first input box (sa-material), and out from it, in order to the "Add" button will become active.
Would there be any other possible additional code details that would enable the button to be activated and would the code 100% copy the user's operation?
The second inputbox work perfect, there work the type formatting and there is nothing barrier to run the "Add" button method... Thank You!

Maybe it can help to others, who is fighting with this problems, it was the perfect method (the essential thing: bubbles for every events! :-)
arrr = document.getElementById('autocomplete-sa-material');
arrr.dispatchEvent(new Event('mousedown', {bubbles: true}));
arrr.dispatchEvent(new Event('mouseup', {bubbles: true}));
arrr.dispatchEvent(new Event('click', {bubbles: true}));
arrr.dispatchEvent(new Event('focus', {bubbles: true}));
arrr.value = "A-10035951";
arrr.dispatchEvent(new Event('change', {bubbles: true}));
arrr.dispatchEvent(new Event('input', {bubbles: true}));
arrr.dispatchEvent(new Event('blur', {bubbles: true}));
brrr = document.getElementById('input-sa-quantity');
brrr.dispatchEvent(new Event('focus'));
brrr.dispatchEvent(new Event('mousedown'));
brrr.dispatchEvent(new Event('click'));
brrr.value = '23423';
brrr.dispatchEvent(new Event('input', {bubbles: true}));
crrr = document.getElementById('btn-sa-button-ADDitems');
crrr.dispatchEvent(new Event('focus'));
crrr.dispatchEvent(new Event('mousedown'));
crrr.dispatchEvent(new Event('click'));
The material inputbox events, when theys bubbling, they enabling the button. And if the button mousedown event is bubbling, it clear the inputbox history values and reset all values, properties...
Thank you all, who had answer earlier, they help to found the answers!

How to manipulate data-binding, knockoutJs

I have a customer who is a member of a web site. He has to fill a form every time which is really very often. That's why he wants me to develop an application for him to make this process automatic. When I use the webBrowser control to manipulate it, I am able to login but after that there are fields that contains data-binding. These fields are the ones I need to manipulate. When I push the data to necessary fields, it's not working, because in the html tag, there is no value attribute, instead it has data-binding. So my question is how can I manipulate and push data to these fields?
Thank you so much for your all help in advance.

Knockout uses data-binds to listen to changes in an input and update an underlying model. For example, the value binding listens to change events and writes the new value to a data-bound observable.
If you update a value attribute through code, the change event isn't triggered. You'll see the new value in the UI, but the javascript model won't be updated.
You can combat this by explicitly triggering a change. Here's an example:
Type in the input: you'll see a console.log that shows knockout gets updated
Press the button to inject a new value: you won't see a log: knockout isn't updated
Press the last button to trigger a change event. You'll notice knockout now updates the model.
Of course, you can combine the two click listeners into one function. I've separated them to get the point across.
// Hidden knockout code:
(function() {
var label = ko.observable("test");
label.subscribe(console.log.bind(console));
ko.applyBindings({ label: label });
}());
// Your code
var buttons = document.querySelectorAll("button");
var input = document.querySelector("input");
buttons[0].addEventListener("click", function() {
input.value = "generated value";
});
buttons[1].addEventListener("click", function() {
// http://stackoverflow.com/a/2856602/3297291
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
input.dispatchEvent(evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: label">
<button>inject value from outside</button>
<button>let knockout know something changed</button>

Angular model doesn't update when changing input programmatically

I have a text input bound to a model value, but I can't figure out how to change the input value programmatically and have the change propagate to the model.
I understand that because I'm updating the value external to the angular scope that I need to explicitly call $scope.$apply(), but it's not working.
HTML:
<input id="test_input" ng-model="test_value">
Controller:
$scope.test_value = 'abc'; // starting value
Console:
$('#test_input').val('xyz');
$('#test_input').scope().$apply();
$('#test_input').scope().test_value;
-> 'abc';

ngModel listens for "input" event, so you need to trigger that event after setting the value:
$('#test_input').val('xyz');
$('#test_input').trigger('input');
$('#test_input').scope().test_value;

How to call/ re-render a button in openui5

I am using the below openui5 toggle button which is blue when pressed is true and grey when it is false. But the value of the button changes at some point of time. Is it possible to explicitly call the button to re render it.
var oToggleButton1 = new sap.ui.commons.ToggleButton({
text : "Auto-Update",
tooltip : "Update toggle.",
pressed : true,
press : function() {
if(oToggleButton1.getPressed() == true){
buttonStatus = "ON";
}
else{
buttonStatus = "OFF";
}
var oDialog1 = new sap.ui.commons.Dialog();
oDialog1.setTitle("Alert!");
//alert('Auto update is turned '+buttonStatus);
oDialog1.addContent(new sap.ui.commons.TextView({text: "Auto update is turned "+buttonStatus}));
//oDialog1.addButton(new sap.ui.commons.Button({text: "OK", press:function(){oDialog1.close();}}));
oDialog1.open();
oDialog1.close();
refreshButtonDisplay=oToggleButton1.getPressed();
},
layoutData: new sap.ui.layout.GridData({span: "L12 M12 S12"}),
}),

It is probably best to bind the ToggleButton's pressed property to a property in a model and let UI5's binding magic take care of all that. If UI5 sees that the property in the model changes, it will check the bindings of that property to see if there are any UI controls need an update as a result of that. If you have bound your ToggleButton to that property, UI5 will update/rerender the ToggleButton.
You could also change the "pressed" property of the ToggleButton directly from your controller, e.g.: oToggleButton1.setPressed(false) should also do the trick.

I did not really understand what you are trying to achieve, maybe you could elaborate a little more, i.e. what value changes and when? Anyway... jpenninkhof is absolutely right with everything he said. However, since you are explicitely asking for how to rerender the button here is the answer:
oToggleButton1.rerender();
This will rerender the button (based on its properties of course...).
However, calling
oToggleButton1.setPressed(false);
or
oToggleButton1.setPressed(true);
will rerender the button automatically in case the value for the pressed property has changed.

AngularJS: How to listen to <input ng-change> when value is changed with a Slider?

Problem:
Running into an issue where I'm trying to use ng-change on a text field. The snag is I'm using a slider to change a value of this text field.
The ng-change event works when I click into the text field and start typing: logOutValue() fires and logs out in my browser.
The HTML:
I'm using this Angular range slider
—> (Example)
<div ng-repeat='obj in testObjects'>
<rzslider rz-slider-model="obj.max">
<form>
<input value='{{ obj.max }}' ng-change='logOutValue(obj)' ng-model="testObjects[obj.name]">
</form>
</div>
The slider fills in the text input's value via obj.max. This works. Again, when clicking in text field and typing, the value is logged out.
In Controller:
testObjects = {};
$scope.logOutValue = function(obj){
console.dir(obj);
};
Other ideas
I tried to use a $watch but that only also seems to fire when textbox is clicked on and typed into.
$scope.$watch('testObj', function(){
console.log('this is working?');
}, true);

if you want to catch the change in the model binded to change event externally.. the only option we have is to use $watch..
here it looks like you have added $watch to wrong varible as "testObj" is not binded as the model to the input field.
please see video to understand difference between ng-change and $watch
https://egghead.io/lessons/angularjs-using-the-ngchange-directive-in-angular

You can use slideEnded event as described here: to be notified about model changes.