I am running the following JavaScript in both Firefox Developer Edition 38 and Internet Explorer 8 and 9.
console.log('+++++++++++++++++++++++++++++++');
console.log('jquery version = ' + $.fn.jquery);
var myHtmlString = "<!-- my comment -->" +
"<optgroup label='my label'>" +
"<option value='1'>option one</option>" +
"</optgroup>";
console.log($(myHtmlString));
console.log($(myHtmlString)[0]);
console.log($(myHtmlString)[1]);
console.log($(myHtmlString).length);
In Firefox, I get:
In IE, I get:
So, apparently in Firefox, an HTML comment is getting added in as an element of this object but in IE, it's not. Why is this behaving this way, is there a bug, or is there another way I should be creating this object?
NOTE: I tried $.parseHTML(myHtmlString) but it does the same thing.
UPDATE: This answer How does jQuery treat comment elements? provides a potential workaround.
So it depends on the browser you're using, but since you're passing in more than 1 simply tag, (as an example $('<div>example html creation</div>')) jQuery lets the browser handle the creation.
If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in.
jQuery documentation
Firefox for example is looking through each of your < > areas, and it finds 2. While IE doesn't care, and processes it all as 1 (hence the length 1).
Long story short, you're doing it fine. That's just internally how the browser is handling it, you don't have to worry about any of that!
Related
This is my code.
var arrSelectElements = document.getElementsByTagName( "SELECT" );
for (var i = 0; i < arrSelectElements.length; i++) {
alert(arrSelectElements[i].DataSource); //code to use datasource value
}
It simply gets a list of all select elements in aspx file, and finds out the datasource name. Here is the code that binds the dropdown in C# file.
ddlSubsidiary.Attributes.Add("DataSource", "Subsidiary");
ddlSubsidiary.Attributes.Add("DataMember", "DISubsidiary");
Now, this code in IE works perfect. alert returns the name properly. But in Chrome, it always returns undefined.
Is it by design or am I missing something here?
In order to get the attribute value with the DOM element property in Internet Explorer, you have to use IE8 or older, or to run in compatibility mode (equivalent to IE7). In these old versions, the custom attributes can be retrieved in client code using the expando property with the same name:
var dataSource = ctl.DataSource;
var dataMember = ctl.DataMember;
From what I have read, this technique worked only in Internet Explorer, not in other browsers (HTML Custom Attributes Not Working in Chrome).
Since version 9, it doesn't work in Internet Explorer either. The getAttribute method must be used to get the attribute value in client code:
var dataSource = ctl.getAttribute('DataSource');
var dataMember = ctl.getAttribute('DataMember');
It is hard to say why IE6+ browser returns undefined, but my guess is that the checking event gets executed before the assignment event actually occurred. Quirk mode only uses 1 thread for everything while newer browser uses separate thread for DOM manipulation and render.
I have just noticed an issue that appears to be affecting all versions of IE (tested 7-10) but not Chrome or FF (Windows 7). The issue occurs when I cache a jquery object and then remove its original target.
The code below is essentially rearranging some images in divs in such a way that the selected image comes first, but I am not using a holder div so it is all being done in situ. I would rather not complicate matters by resorting to converting the html to a string, I suspect this may be a well known issue that I just don't know the search terms for so if that is the case please enlighten me!
$lightbox_gallery = $('.gallery-lightbox .lightbox-gallery');
$image = $lightbox_gallery.find('img[data-id=' + image.id + ']').parent();
$image_after = $image.nextAll();
$image_before = $lightbox_gallery.find('> div:first').nextUntil($image);
console.log($image.html()); //returns a string
$lightbox_gallery.html('');
console.log($image.html()); //returns ''
// this works fine in almost anything but IE. Maybe also safari on mac?
$lightbox_gallery.append($image).append($image_after).append($image_before);
Edit: Solved it using the clone function http://jsfiddle.net/27DKZ/4/
What does your HTML look like? I've never seen a problem like this.. Keep in mind that IE cannot handle the console.log() function..
I'm integrating a mootools script onto a page which has very old JavaScript functions which run a navigation vertical menu. This old script will be hard to change now.
The line breaking is:
function stgobj(id) {
with(document) return nIE && nVER < 5 ? all[id] : nNN4 ? layers[id] : getElementById(id);
}
Not sure exactly what's it's purpose, but it looks like it's rendering some elements. If commented the menu will disappear.
FF, Chrome, IE(doesn't crash, but menu does not render)
Any quick patch to resolve the browsers crashing?
Looks like its purpose is to return the element corresponding to the given ID. The code simply uses some different methods based on the browser - document.all for IE5 and earlier, and document.layers for Netscape 4. Unless you need to support those ancient browsers, you could alter the function to return just document.getElementById(id). Or better yet, ditch this function altogether and call document.getElementById directly.
However, if it's crashing modern browsers like Firefox and Chrome, then you should also look at the browser detection logic (the code that populates the nIE, nVER and nNN4 variables), otherwise it might just end up crashing elsewhere.
It's a "compatibility" function for document.getElementById. I think you should be able to equal it:
stgobj = document.getElementById.bind(document);
This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com
In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.
Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.
Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.
I have the following code:
$('#smallcart .plusone').live('click',function(){
var id = $(this).attr('id');
articlenr = id.split('_')[1];
});
this works fine in FF, safari, Chrome, however in IE (7 and 8) it throws an error on the split-function (this property or method is not supported by this object).
if I alert the 'id'-variable I get something like plus_5751. (so I want to get the '5751' part)
if I do alert(typeof(id)) I get String as an answer...
Maybe somebody can point me to the right answer?
Thx
The split works pretty well in IE. The problem is the part left of the equal-sign. It's an object with all input-fields having the name articlenr and therefor IE quits with 'this property or method is not supported by this object' when you're trying to assign a string to it.
Your code works just fine for me in Internet Explorer - as it should be expected to. The problem must lie elsewhere, perhaps something is overriding String.prototype.split?. You can see a working example of your code at http://jsfiddle.net/AndyE/6K77Y/. The first thing to check for is any Internet Explorer specific code in your scripts.
I would make one small improvement for efficiency. $(this).attr('id'); is pretty much the long winded way of writing this.id. It's slower, because a new jQuery object has to be created and then the attr function has to run. Without it, your code can be compressed more, whilst still remaining very readable, if you like:
$('#smallcart .plusone').live('click',function(){
articlenr = this.id.split('_')[1];
});
Try renaming your variable 'id' to something else. IE doesn't like it when you name things in your scripts the same as items in the DOM.
Never mind, that seems to have not been the issue in this case. I have, however, had issues in the past with IE specific bugs caused by variable names.