What's the reason that document.getElementById works but jquery doesn't?

Question

This question might seem elementary to some but I can't get my head around it. I am working on a XMLHttpRequest Ajax file upload. the first step is to selected the fileUpload element that is on my page and for some reason javascript works but not query, here's the following two lines:

var fileInput = $('#the-file'); //doesn't work var fileInput = document.getElementById('the-file'); //works

do I have to specify a method after the jquery selector or sth? Because I can't see why else it wouldn't work, aren't they practically the same code?

I have added the jquery.js file on top (I have many lines of jquery working on other parts of my file so that can't be the issue.) and the document ready. I got it to work but am wondering the reason behind this.

Edit

By doesn't work I mean that with the jquery selector I get "undefined" in console log but with the javascript I get all the file information that I need.

What error are you getting? Is jQuery working at all? Is it properly included in your document? — Johannes H.
– Johannes H., Commented Nov 13, 2013 at 12:44
So no errors? just an undefined return value? Tauts strange, even empty jQueries return objects... — Johannes H.
– Johannes H., Commented Nov 13, 2013 at 12:46
@MutuYolbulan: The jQuery object is a wrapper for the actual DOM object. Have you tried fileInput[0].files[0] for the jQuery version? — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Nov 13, 2013 at 12:47
So the issue isn't really that the selector is returning undefined, but you're using a jQuery object as it where a regular DOM object. — adeneo
– adeneo, Commented Nov 13, 2013 at 12:49

Qantas 94 Heavy · Accepted Answer · 2013-11-13 12:58:13Z

The problem is that the jQuery object is a wrapper for the actual DOM object - which in this case is an HTML <input> element which has the type file. Only the actual DOM object has the files property, not the jQuery object. You can access the DOM elements referenced by using numeric indexes, which will only be 0 in this situation. Therefore, this is the solution:

var fileInput = $('#the-file'); fileInput.files[0]; // TypeError: cannot read property '0' of undefined fileInput[0].files[0]; // works

Of course, the jQuery way of doing it would be to use the prop() function, which gets the property of the first DOM object in the jQuery object:

fileInput.prop('files')[0];

That's not really true, the jQuery object is just a wrapper, and also has the files property, but you'd have to access it like you would any property in jQuery, with prop() -> jsfiddle.net/t4PyB
@adeneo: true - I don't use jQuery much, that's the more "jQuery" way of doing it.

BoltClock · Accepted Answer · 2013-11-13 16:56:48Z

Given that I don't know what you mean by "doesn't work" I would guess that its because whatever is using fileInput wants a DOM element and not a jquery object. Try this:

var fileInput = $('#the-file')[0];

Collectives™ on Stack Overflow

What's the reason that document.getElementById works but jquery doesn't?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related