files.length is undefined in Internet Explorer - javascript

I'm using
$(upload_button).bind('change', function(event)
{
var files = this.files;
alert(typeof(files));
if(typeof(files)!='undefined')
{
}
});
in my code with jQuery which is working fine in Firefox and Chrome but not in IE8(i.e., IE returns undefined for files.length, whereas others returns the value). So do anybody know how to resolve this?

That's because Internet Explorer, even IE9 does not support HTML5 File API and therefore it returns undefined value for files property.

From jQuery API.
change event will not work with button as I am assuming upload_button is button.

Related

event.target.form returns null in Internet Explorer

I am building a complete dynamic rendering web application using ReactJS. In a case, I need to get the form elements on click action.
So, I used event.target.form.elements and it worked well in Chrome and Mozilla. But when I test the Application in IE, returns null. ie event.target.form is null.
From blog suggestions, I used event.currentTarget and event ? event.target : window.event.srcElement but that too didn't work. I wrote a function doing similar as below,
function getTarget(e) {
var evn = e || window.event;
return evn.srcElement || e.target;
}
still didn't work.
Is there any work around to get this get passed in IE browser. The version on IE using is IE 11.

Get table row object inside javascript function - DHTMLX

We are doing cross browser compatibility for an application which was built over 8 years ago. The app works only in IE. Now we are making it work in Chrome too. The application had used 1.5 version of DHTMLX. Now we have replaced it to version 3.5. After upgradation to 3.5, we are having some issues. At some places, we are getting NULL values in Chrome when debugged in the console.
For example, we have this below function. On click of a DHTMLX grid checkbox, this function is called.
var glbGroupId=null;
function setRowCellVals(){
if(arguments[0]!=null){
radioFlag = true;
src=$(arguments[0]);
if(!glbCheckAction){
if(src.childNodes[0].childNodes[0].checked){
src.childNodes[0].childNodes[0].checked=false;
}else{
src.childNodes[0].childNodes[0].checked=true;
}
}
glbCheckAction = false;
glbGroupId=src.childNodes[0].childNodes[0].value;
document.manageKpiGroupForm.parent_GId.value = src.id;
document.manageKpiGroupForm.parent_Gname.value = src.childNodes[1].innerHTML;
document.manageKpiGroupForm.parent_mId.value = $F('moduleCmb');
document.manageKpiGroupForm.parent_mName.value = src.childNodes[3].innerHTML;
document.manageKpiGroupForm.parent_gDesc.value = src.childNodes[4].innerHTML;
moduleRowId=arguments[0];
return true;
}
}
In Chrome, the src is being rendered as NULL. We checked the same function in IE, in another copy which has the older version of DHTMLX, the src value comes as [object DispHTMLTableRow] in the IE console. Any idea how to resolve this?
Thanks.
Unfortunately, the reason of the issue cannot be found with the provided code.
Please provide with a more detailed sample or with the link to the demo, where the problem can be reconstructed.

.find(".class:first") behavior with Opera and Safari

I'm using Soundmanager2 to play some audio files in a web site, but not using Flash.
It works fine with Firefox and Chrome, as they support ogg and mp3 respectively. However, it doesn't work with Opera 12.16. Theoretically, it supports ogg, and pass the condition if( supports_ogg_audio() ):
It is returning 1 in this function:
function supports_ogg_audio() {
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
}
So it detects ogg support. But as I'm doing:
currentRow = thisPlayer.find(".total-row:first");
I get this error from the Opera console:
Unknown pseudo class
[id='total-playlist'] .total-row:first
So I'm guessing that this is the problem. How could select the first thisPlayer.find(".total-row") element with better browser compatibility?
It neither works in Safari5+ and IE9+
You need to use first-child selector instead of first. See information here.

cross-browser 'getElementsByTagName' with namespace from responseXML

Am trying to read an XML response using getElementsByTagName:
var rows = items.responseXML.getElementsByTagName("z:row");
for (var i=0; i<rows.length; i++)
{
//do something
}
Above code works fine in Firefox and IE but in chrome it throws null.. i mean it does not get any data.. when i alert the rows.length it gives me 0 always in chrome.
Then i searched in google and understood the issue is with xsd:element, then i changed "z:row" to only "row". Then it worked in Chrome but Firefox and IE returned 0 for rows.length.
Is there any method which across all browsers?
This is what I use:
function byTagNS(xml,tag,ns) {
return xml.getElementsByTagNameNS
? xml.getElementsByTagNameNS(ns,tag)
: xml.getElementsByTagName(ns+":"+tag);
}
With in your case:
byTagNS(responseXML, "row", "z")
If you don't care about the namespace then you could use the following:
xml.getElementsByTagNameNS("*", "yourElementHere")
This will fetch any element with the desired name regardless of which namespace it has or whether it has any namespace at all. Additionally, this should work as expected across different browsers.
See link for documentation.

Cannot access document's title element with jQuery (IE 8)

I'm seeing this issue in Internet Explorer 8, but not in Safari or Firefox. So far, I have not tested in other IE versions.
I am developing my own jQuery plugin and, for this question, I've stripped it down to the two relevant lines.
In IE 8, using the code below, $('title').text() does not do anything. docTitle is blank because title is blank, as if the jQuery selector for <title>, $('title') is not working. (Again, AFAIK, this is just in IE 8)
(function ($) {
$.fn.myPlugin = function (options) {
var title = $('title').text(),
docTitle = escape(title);
};
})(jQuery);
http://jsfiddle.net/sparky672/YMBQ2/
However, using the plain JavaScript code below, document.title is working fine in everything including IE 8...
(function ($) {
$.fn.myPlugin = function (options) {
var docTitle = escape(document.title);
};
})(jQuery);
EDIT:
It does not matter that this code is inside a plugin.
Same result in IE 8 with this...
$(document).ready(function () {
var title = $('title').text();
alert(title);
});
Just to clarify, I am not insisting on using this. In fact, I fixed my plugin by simply using document.title instead. If it wasn't clear initially, I'm just asking why this does not work in IE 8.
Can anyone explain why, or what stupid mistake I may have made here?
EDIT 2:
Here are some jQuery Bug reports on this issue
http://bugs.jquery.com/ticket/7025
http://bugs.jquery.com/ticket/5881
http://bugs.jquery.com/ticket/2755
And dozens of others reporting the same thing. The official response is to state, "document.title is the only reliable cross-browser way and should be used instead" and the Ticket is closed. So there you go.
I guess jQuery iterates over all TextNodes and concatenates its nodeValue. IE stores this value differently than other browsers.
var title = document.getElementsByTagName('title')[ 0 ];
title.firstChild // This would be the Text-Object with the characterdata of the title
// Firefox: [object Text]
// IE: null
This should be the reason you cannot get the textContent with jQuery.text(). title.text seems to be cross browser comp. I only tested it in IE 7 and Firefox 3.6 but you can check the other browser if you like. But why not using document.title?
try using $('title').html() which should work in all browsers

Categories

Resources