javascript disabled attribute not working in angularJS? - javascript

I have written the following line to add an disable attribute to an element in angular
angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');
but it is not working and throwing an error:
angular.element(...).setAttribute is not a function

angular.element returns a jQuery/jQuery lite wrapped element, not the raw DOM element.
You can set it using jQuery methods:
angular.element(document.getElementsByClassName("pit")).attr('disabled', true);
This is not really the angular way though. Consider adding a service to provide values to ng-disabled, or directive to manage the disabled state.

angular.element returns a jQuery or jqLite Object, both has an attr() function that you can use instead, so:
instead of:
angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');
you should write:
angular.element(".pit").attr('disabled', 'disabled');

Angular has built in jQuery, so you could just add
$(".pit").attr('disabled', true);

angular.element(document.querySelector(".pit")).setAttribute('disabled',true);

This statement will work only if the element is an input type
angular.element(document.getElementsByClassName("pit")).attr('disabled', true);
Or use ng-disabled directive. this is the best way to disable an element in angular.

Related

How to disable/enable kendo-daterange programmatically? (without JQuery)

I have the following template
and it works fine. The daterange is disabled. But if I remove these inline "disabled" attributes and if I want to disable/enable it via the button click programmatically, it doesn't work even though "disabled" attribute will be added into the elements.
How can I do this?
Use property binding syntax instead of using toggleAttribute:
Something like this:
<kendo-dateinput ... [disabled]="somePropertyOnYourComponent" ></kendo-dateinput>
And then in test:
test() {
...
somePropertyOnYourComponent = true;
}
The approach with property binding works fine but if for whatever reason you want to use plain JS (TS) you need to disable/enable 4 elements (2 kendo-dateinput and 2 autogenerated by kendo internal inputs)

Getting the type of a control using Javascript and JQuery

I am trying to use JQuery to get the type of control and following is the code that I am using.
$('#selCity').attr('type')
where selCity is of type select. When I try the above code it returns as undefined but when I use the alternative code with Javascript, it returns the correct type.
Please look into this fiddle to understand it clearly: http://jsfiddle.net/Ye8e9/
Could someone advice on how I can acheive this correctly using JQuery? Is this an issue with JQuery or am I making a mistake?
Use
$('#selCity').prop('type')
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
Reference
DEMO
if you mean the type of tag, the use this
$("#selCity").get(0).tagName
See your demo here
Use nodeName to get 'type of Tag'. '.type' refers to attribute 'type' which select doesn't have.
document.getElementById('selCity').nodeName
you are getting undefined because there is not type attribute in select.
try this one
$('#selCity')[0].tagName;

determine input element status

I have a problem determining status of an input field. I want JS to determine whether it is disabled or enabled but my code below always return 'false'. What am I doing wrong? Thanks
<input name="ctl00$ctl00$ctl00$ctl00$ContentPlaceHolderDefault$RobinBodyPlaceHolder $LoggedInBodyPlaceHolder$AddEditUser1$EmailTextBox" type="text" value="email#mail.com" id="ContentPlaceHolderDefault_RobinBodyPlaceHolder_LoggedInBodyPlaceHolder_AddEditUser1_EmailTextBox" class="EmailTextBox" disabled="disabled"/>
function ConfirmEmailChange() {
alert($('.EmailTextBox').disabled==true);
}
You're trying to access the disabled property of a jQuery object (I'm assuming it's jQuery, but it could be some other JS library using the $ character), but jQuery objects don't have a disabled property.
If it is jQuery, you can access the actual DOM node contained within the jQuery object using array notation:
alert($('.EmailTextBox')[0].disabled);
Alternatively, you can use the get method:
alert($('.EmailTextBox').get(0).disabled);
Or, as others have shown, you can use the jQuery prop method. Notice that I've removed the == true part, as disabled is a boolean property and will return true or false anyway.
The question isn't tagged jQuery, but since you seem to be using it, you can do this:
alert($('.EmailTextBox').is(':disabled'))
Live Demo
function ConfirmEmailChange() {
alert($('.EmailTextBox').prop('disabled'));
}
Just change it to check the disabled property this way. You were trying to access .disabled which isn't a valid jQuery property.

jQuery and HTML5 elements

I was wondering whether or not jQuery supports HTML5 elements.
For example, I tried this code but it fails with a rather weird error:
$('<progress value="2">').val();
It says:
TypeError: Object 1 has no method 'replace'
Is jQuery to support HTML5 elements in the future, or am I doing something wrong this way?
EDIT: It does not seem to be the selector: http://jsfiddle.net/z5t3g/
If you have your <progress /> element in the DOM:
<progress value="2" />
You can select it using jQuery, but it seems that (as of version 1.5) it doesn't know to return the value attribute using the .val() method. You need to check the attribute by name:
$('progress').attr('value');
Use a jquery selector for it
$("progress").val();
try this:
$('#progress').val();
You'll want to do this
$('progress[value=="2"]).val();
You can't select using the entire tag with jQuery.

Help me understand whats wrong with my javascript

If I do this-
alert(anchor);
I get this-
"[object HTMLLIElement]"
... ok, yep, it is the element I want. So I want to get that elements ID.
So I test it like this:
alert(anchor.attr("id"));
... but I don't get any alert, nothing. I must not be selecting an element. What am I doing wrong, what don't I understand?
There are two problems:
.attr() is a function jQuery objects have, you have a DOM element (you would need $(anchor) to use jQuery methods against the element).
You don't need it anyway, the .id property will work (and be much faster), like this:
alert(anchor.id);
That's because attr is not a defined method or property on anchor. anchor is a raw HTML element object. It's not a jQuery object (I'm assuming you're using jQuery because you used the attr method).
To get the id, all you have to do is anchor.id. If you really want to use attr, you can do jQuery(anchor).attr("id").
if you are using jquery, then you need this:
alert($(anchor).attr("id"));
The attr() function is part of jQuery, but you're trying to get it from a plain DOM object. You either want to use $(anchor) (to wrap the element in jQuery) or call anchor.getAttribute("id") instead.

Categories

Resources