jQuery and HTML5 elements - javascript

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.

Related

javascript disabled attribute not working in angularJS?

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.

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;

Changing data-url or similar attributes on Element

I'm trying to access the data-url attribute of the following element so it could be replaced upon callback or as needed with jQuery / Javascript.
What method will work to do this?
<a id="twitter_link" href="https://twitter.com/share" class="twitter-share-button" data-via="imdto" data-lang="en" data-url="http://mydomain.com/changeme">Tweet</a>
I've tried using attr(), prop() functions but returns undefined.
You need to use the data function (for example):
$(myElement).data('url')
What version of jQuery are you using? In the latest version, it works like so:
$("#twitter_link").attr( "data-url" );
Awesome example! http://jsfiddle.net/shanabus/taGBL/1/
try to read the attribute with $('#twitter_link').data('url');
About jQuery data() method: http://api.jquery.com/jQuery.data/

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.

ie8 jquery addclass object does not support this property or method

I have a asp:textbox in a user control on my page. From a js file, I have my code as:
$get(_dropdownID).addClass('dropdownTextDisabled');
This is giving me an error while running in IE8: Object does not support this method or property.
Reason for trying this is that IE8 does not seem to support className. Earlier code was:
dropdown.className = "dropdownTextDisabled";
Any help would be appreciated.
Maybe you are writing something wrong here:
$get(_dropdownID).addClass('dropdownTextDisabled');
shuold be
$('#_dropdownID').addClass('dropdownTextDisabled');
does it work in other browsers? What is the variable $get you are calling the method addClass() on?
$get is an ASP.NET AJAX shortcut which returns a DOM element, whereas addClass() is a jQuery function (which can only be used on jQuery objects).
Try this instead:
$('#<%= _dropdownID.ClientID %>').addClass('dropdownTextDisabled');
This is based on the assumption that _dropdownID is the ID of your ASP.NET DropDownList control.
If _dropdownID is simply the ID of an HTML <select>, do this:
$('#_dropdownID').addClass('dropdownTextDisabled');

Categories

Resources