Simple jQuery chain methods throws error - javascript

I have a very simple jQuery method chain that is throwing an error. All it's supposed to do is replace the "#" with a new value ("test.html"). I'm doing this because I'm retrieving a value from a database and want to update specific links in the markup. I have verified that the href attribute is, in fact "#". But I'm getting an "Object doesn't support this property or method" error. I'm using jquery-1.7.1.min.js.
Can someone tell me what's wrong with this statement:
$('a#protoPath').attr('href').html('test.html');

.attr('href') returns the current attribute contents, not another jQuery object, so it can't be chained.
You need to use .attr('href', newValue) if you want to actually change it.
If you only want to change the one link that has "#" as its href you need to change your selector, too:
$('a[href="#"]')

You're trying to set HTML content on an element attribute, try instead :
$('a#protoPath').attr('href', 'test.html');

Try this instead:
$('a#protoPath').attr('href', 'test.html');

Related

Javascript function call in url

I want to login a website with javascript and i dont know it is allowed. I use javascript code in url and it gives me Invalid left-hand side in assignment
at :1:10 error.
javascript:document.getElementById("OtherUsername")="myid";document.getElementById("OtherPassword")="mypassword";$("#btnSend").click();
As Vinod stated, you are trying to assign myid (a string) to document.getElementById("OtherUsername"), an object. That won't work. You need to assign it to document.getElementById("OtherUsername").value
This should work:
javascript:document.getElementById("OtherUsername").value="myid";document.getElementById("OtherPassword").value="mypassword";$("#btnSend").click();
The last bit $("#btnSend").click(); will only work if they have jQuery active on that site, or if you include it through use of a plugin somehow.
you can not Assign a value to a dom element
if OtherUsername element and OtherPassword element is a form you can follow my code
document.getElementById("OtherUsername").value="myid";
document.getElementById("OtherPassword").value="mypassword";
$("#btnSend").submit(); //btnSend should be the from id

TypeError getElementsByTagName is not a function issue

I'm having trouble getting to the source of this problem. Basically the error message I am getting in my console is:
TypeError: $(...).getElementsByTagName is not a function
When I click through to the line it is occuring on it is here:
var inputs = $('directoryresults').getElementsByTagName('input');
I'm not sure why this is happening as I have included jQuery in the header of the page itself:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
Does anyone have any ideas what might be causing this?
Does anyone have any ideas what might be causing this?
The object returned by the jQuery constructor doesn't have the .getElementsByTagName() method.
$('selector') returns a jQuery object. .getElementsByTagName() is a native JavaScript method of DOM elements.
To look for elements with a certain tagname using the jQuery object you currently have:
var inputs = $('directoryresults input');
// OR
var inputs = $('directoryresults').find('input');
To get a like-for-like node list that .getElementsByTagName() would return (note this isn't exactly the same, this will return an array where .getElementsByTagName() will return a HTMLCollection):
var inputs = $('directoryresults input').get();
Note: directoryresults, I am assuming, is either a class or id of a DOM element. Either way you'll want to amend the selector above
getElementsByTagName is a method you will find on Element and Document objects.
$('directoryresults') will return a jQuery object (containing any <directoryresult> elements … so nothing if you are working on an HTML document).
to use getElementsByTagName, you need to extract the elements from the jQuery object:
$('directoryresults')[0].getElementsByTagName
The above will only get the first element from the jQuery object (and it assumes that there will be at least one element) so you should probably replace the hard coded [0] with a for loop.
That said, you should generally use the find method instead:
$('directoryresults').find('input')
… or just use a descendant combinator in the first place:
$('directoryresults input')
As noted earlier, directoryresults won't find anything in a valid HTML document. You probably want to prefix it with . or # depending on what you are actually trying to match.
You are ussing a DOM API mixed with jQuery API sintax:
it's document.getElementsByTagName('input');
The first error is not specific if directoryresults is a class or an ID
Nor do you tell if a target item or the item you wish to call
If you use jQuery by TagName type this:
var inputs = $('input');
if you want put values in a div
$.each(inputs, function(){
$('div').append( $(this).val() );
});

jquery attr() not returning expected value

I am using jQuery and would like to retrieve the 'id' attribute
of a clicked element, which in this case is a element.
Kindly check the image below. Notice that the returned string whenever
I use the attr() method in jQuery is somekind of an object (or array perhaps).
The expected value is printed below the next line. It returns the right value when
I use this:
$(this)[0].id
When an element is clicked, Isn't it the element is the one being reference in 'this'?
Why does attr() return an array?
I isolated the code and figured out that the tinymce plugin for jquery is making a conflict. Check out the static.html
https://www.dropbox.com/s/wbk8hxqjw34hzn1/jquery-attr-not-working.7z
Sorry for the archive, Dropbox won't let me upload 9mb and above so I have to compress.

Javascript - extract object ID from a Javascript object

So I am not sure if my title is clear enough. I essentially have a div saved as a Javascript object which looks like this: [div#field_30.checkbox_group]
The field_30 is the ID which I am trying to extract here. doing something like object.id is not working. Does anyone know how to get the ID?
Note: I saved the object like this: var object = $(".workspace .selected"); which grabs the currently selected div inside the object called workspace. Sorry is this is a rookie mistake, I just can't seem to find anything anywhere. Thanks for the help...
var object = $(".workspace .selected"); will return a jQuery wrapped element that has jQuery properties and methods rather than element properties and methods. This means that any of
object[0].id
object.prop("id")
object.attr("id")
should work, but the 1st option should be the best performance-wise. It gets the id property of the the 1st element contained by the jQuery object, which is your div.
Your object is in fact a jQuery object, not a dom object.
To use the dom object use,
object[0].id
Or using, jquery, (Since it is already there)
object.prop('id');
You can use either $jquery_object.attr('id') or $jquery_object.eq(0).id
See this for exemple: http://jsfiddle.net/cquuT/
In this case it looks like object is the result of a jQuery select. To get to the actual DOM object you need to use [0]. Then you can access the id property
object[0].id
I don't see a complete answer here, so I'll provide my own.
If you're using jQuery selector $(), then you'll get jQuery-wrapped collection, not a single element.
(I assume now that you're using jQuery 1.5.2, the same as StackOverflow uses now.)
Universal solution to get ids of all elements returned by selector is:
.map(function(){ return this.id; })
Running $(".post-text").map(function(){ return this.id; }) on current page will return something like: ["", "", "", "", ""]
To get id of the first element returned by selector use:
.attr('id')
Running $("div").attr('id') on current page will return "notify-container".
Since jQuery 1.6 you can also use .prop('id') here.
If you know, that query will return only one element or you just want the first element matching given selector, then use .attr which is obviously a simpler solution.

Jquery - Reference by ID - Supposed to return an array?

I just started using jQuery, and various sources suggest that the following should be used to reference an element by ID:
$("#imgThumbnail")
theoretically making something like this possible:
$("#imgThumbnail").src;
But my testing indicates that something like $("#imgThumbnail") returns an array, making the following necessary:
$("#imgThumbnail")[0].src;
Do I really need to reference by the index of the array every time I am trying to reference something by ID (i.e., var oObj = $("#someobjectid")[0]; )?
You should get the src attribute to get the value
$("#imgThumbnail").attr('src');
This post explains what the $ function returns and various ways to use it.
$(selector)
Returns a jQuery object, which could contain a number of DOM elements.
$(selector)[0] or $(selector).get(0)
Returns the first result as an actual DOM element.
$(selector).eq(0) or $($(selector).get(0))
Returns the DOM element wrapped in a jQuery object so that we can do stuff like:
$(selector).eq(0).addClass("deleted").fadeOut();
$(specifier) will return a collection, so yes if you want to call something on an individual member you need to pick which one. In most cases though there is a collection operator you can use to achieve the same result. For instance, you could call $('#imgThumbnail').attr('src', 'value')
You should bear in mind that it's not really an array, it's a jQuery object which, among other things, allows array-style access
$(whatever)
returns the jQuery object. On the jQuery object you can do jQuery and jQuery plugin things, eg. .text() to return the text inside the element or .css("background", "pink") to make the element(s) pink.
Since src isn't a jQuery thing you cannot access it. src is however both a HTML attribute, and you can access those with the attr method:
.attr("src")` and `.attr("src", "http://www.example.com/myimage.png")
src is also a DOM-property and you can access DOM-properties using [index] or by iterating through the jQuery object with each:
.each(function(){
this.src = "http://www.example.com/myimage.png";
})
I don't think you should be using .src with jQuery.
Try $("#imgThumbnail").attr('src');
(this will read the src attribute, you set it with a second arg if you like)
See here:
http://docs.jquery.com/Attributes/attr
to set the src attribute use
$("#imgThumbnail").attr("src", value)
if you use something like a class selector or tag like so
$("img").attr("src", value)
It will modify all the image src attributes on the page. Hence the $ function returns an array.
And you do not need to reference it specifically.

Categories