We Keep Coding

Unable to check the checkbox using angular 6

Here is my issue. I am unable to trigger the checkbox select on firing an event/Function when ever the function is called. The input has to be selected like below
TS code:
check(){
this.selectAll = true;
let elements = this.hostElement.nativeElement.querySelectorAll('deltha');
for(var i=0;i<elements.length;i++){
elements[i].selected= this.selectAll;
}
}
HTML code:
<input type="checkbox" id="selectAll" [(ngModel)]="selectAll" (change)="selectAllFiles($event)" class="form-check-input deltha">
Whenever the function is called, it has to trigger and this check box has to be checked here. I am not using and reactive/template form approach as this has to be a unique one. When I am trying the above function code, it's not working and it is not giving any error as well...

I'm not really sure what's the issue here. You'll need to provide more code so we could try to reproduce your problem.
From what i see here when you change this.selectAll to true then the checkbox is selected (you don't need to do this by applying anything to the element) - you can see this in the stackbliz demo - https://stackblitz.com/edit/checkbox-selection-1?file=src/app/app.component.ts
please add more information to your question.

Select dropdown not adding CSS first time only

So I'm being cracking my head at this issue for quite some time and I'm stumped as to why the code is behaving as such.
So I'm using the following in my project:
AngularJS v1.2.22
Bootstrap v3.1.1
jQuery v1.5
Scenario:
I have 2 select dropdown's where the values are retrieved from the DB using angular (working), on the UI aspect I have to disable the 2nd dropdown based on the first dropdown's value (selected) also works (used scope.watch), but it fails only on the first time i.e. based on the default values set, it doesn't disable it.
Actual:
On load first time based on the default value the 2nd dropdown should be disabled but its not
Excepted:
It should get disabled
This is what stumps me,
I have got it to work using ng-disabled="dropdown2" and the angular side $scope.dropdown2 = true;
This disables the dropdown but, the CSS doesn't work.
IfI change the above to ng-disabled="{{dropdown2}}" and the angular side $scope.dropdown2 = 'disabled';
Then dropdown doesn't get disabled but, the CSS works.
Code
AngularJS
$scope.$watch('formItem.dropdown1',function(newValue,oldValue){
if(newValue.cd==='A' || newValue.cd==='B'){
//$scope.dropdown2= 'disabled';
$scope.dropdown2= true;
$document.find("#eldropdown2").next().addClass('disabled');
$document.find("#eldropdown2").attr('disabled',true);
}
HTML
<div class="col-lg-7" >
<select class="form-control" id="eldropdown2" ng-model="formItem.dropdown2" ng-options="c.valueForDisplay for c in dropdown2" ng-disabled="dropdown2" paCombobox></select>
</div>
Can anyone help me figure out why AngularJs/Js does this ??
EDITED
My colleague helped me fix this issue my adding the following line in the JS
ANGULAR JS
$scope.dropdown2= true;
$scope.$watch('formItem.dropdown1',function(newValue,oldValue){
if(newValue.cd==='A' || newValue.cd==='B'){
$scope.dropdown2= 'disabled';
// $scope.dropdown2= true;
$document.find("#eldropdown2").next().addClass('disabled');
$document.find("#eldropdown2").attr('disabled',true);
}
HTML
<div class="col-lg-7" >
<select class="form-control" id="eldropdown2" ng-model="formItem.dropdown2" ng-options="c.valueForDisplay for c in dropdown2" ng-disabled="{{dropdown2}}" pa-combobox></select>
</div>
Above scope.watch, But how did it work ?? clearly this is a hack right ?? I mean since ng-disabled="{{dropdown2}}" will accept el-value and not boolean value right but how does it work ??
Also upon further investigation I came across this piece of code in the JS side
app.directive('paCombobox', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (value) {
element.selecter('destroy');
if(scope.disableEle || element.attr('ng-disabled')==='disabled'){
element.selecter();
element.selecter('disable');
}else{
element.selecter({
inputFilter:true
});
element.selecter('enable');
}
var tabIndex = element[0].tabIndex;
if(tabIndex != -1){
element.parent().find('div.selecter')[0].tabIndex = tabIndex;
}
});
};
});
Can anyone tell me Why and how this works?? and what is the best practice to follow, clearly the above seems like a hack and it shouldn't work right ??

I have two initial ideas for you to try,
At the end of the $scope.$watch maybe try adding a $scope.$apply()? It could update the DOM to inform it of the needed css change.
The other idea I would have would be to use an ng-class and query for dropdown2.
ng-class="dropdown2?'class for dropdown2 == true':'class for dropdown2 == false'"

Instead of adding the class try to use the attribute disabled:
<select disabled id="eldropdown2" ng-disabled="dropdown2"></select>
And then with angular remove the attribute instead of the class.

Setting Default value of input textbox in Jquery EasyUI dialog

I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog

To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;

Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox

use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working

I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.

try this
document.getElementById("d_amount").value=m;
you don't need innerHTML

I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});

I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.

set the value for a checkbox using .prop

So, I have in my script the following code to assign the value of several text boxes that is working ok.
However, when I attempt to assign the value of a checkbox, nothing seems to be set for the checkbox. I have tried using .prop and .attr, so I am thinking my entire approach is wrong.
Some help would be greatly appreciated.
Here is my unchanged code. I am trying to assign the value of the "#id_language_detail_multiple_languages":
function setLanguageDetailsFormValues() {
$('#id_language_detail_display_type').val('{{ language_details.language_detail_display_type }}');
$('#id_language_detail_multiple_languages').val('{{ language_details.language_detail_multiple_languages }}');
....

If you want to assign the "value" of your text boxe, you will add to do something like this:
$('#YourId').attr('value', 'setYourValueHere')
If you want to have the value of your text box, just do:
var myValue = $('#YourId').attr('value')
That is the same thing for '.prop' !
If it wasn't what you wanted, be a little more specific or give us a http://jsfiddle.net/ :-)
By the way, you can also do:
if you go 1 checkbox:
$("input[type='checkbox']").val('yourValue');
Or just:
document.getElementById('yourCheckbox').value = 'YourValue';
If the value isn't set, it will return undefined, so be aware and check if it is !

Hi You can do it like following.Properties for checkboxes are different from textboxes.
$("#CheckboxID").prop("checked","True");
if you want to read the checkbox value use like following
$("#CheckboxID").prop("checked");
Thanks.

Codemirror Functions and extending the script

So I have the js-hint on my file, as well as the foldFunction
I don't want it to be an extra key set, I'd rather have it in my options panel to turn them on or off. Which brings to me to the js-hint part I want it to run all the time, instead of only when it turns on for one word.
Has anyone who has experience with this had luck on doing this? I already get how I'm going to get the foldFunction I believe:
extraKeys: { "Ctrl-Q": function (cm) { CollapseFunc(cm, cm.getCursor().line); },"Ctrl-Space": "autocomplete" }
Turning that to this:
var a= document.getElementById('checkmark');
if(a.checked === true){
CodeMirror.defineOptions...
}
I'm not sure how to further this as I'm not positive that defining the Option foldGutter to false will work as its altered after the page has load.
Does anyone have any suggestions?

After code mirror is instantiated you can enable or disable foldGutter using the codemirror setOption method. The following codemirror event handler will fire whenever new input is read from the hidden text field. If the checkbox is checked and the autocomplete menu is not already open, the execCommand method will be fired opening the autocomplete menu. This will result in hints as you type. I've added this to my implementation of codemirror and will test it out.
<label><input type="checkbox" id="AutoCompleteEnabled" /> Enable Autocomplete </label>
<label><input type="checkbox" id="FoldGutterEnabled" /> Enable Code Folding </label>
<script>
$(function(){
$("#FoldGutterEnabled").on("click", function(){
CM.setOption("foldGutter", this.checked);
});
CM.on("inputRead", function(cm){
// Show the autocomplete menu when input is changed if the Enable Auto Hint checkbox is checked and the autocomplete menu is not already open.
if($("#AutocompleteEnabled:checked").length==1 && $(".CodeMirror-hints").length==0) CM.execCommand("autocomplete");
});
});
</script>
Let me know if you were looking for something different.