Develop Reference

IE and Edge fail to run Javascript for css change

I've made a simple script to change the color of a div with the class '.logged_inn_text'. The script works by taking the background style from the clicked link and inserting it to the class.
The code was made in Chrome and it worked perfectly fine, while in IE and Edge nothing happens. If I alert the var named color, there is no response. Is there a reasonable reason why it's not working?
$(document).ready(function() {
$('.settings_color_btn').click(function() {
var colorId = $(this).attr('id');
var colorIdFull = '#'+colorId;
var color = $(colorIdFull).css('background');
$('.logged_inn_text').fadeTo('fast', 0.4, function() {
$(this).css('background', color);
}).fadeTo('fast', 1);
return false;
});
});

Seems IE return undefined (thanks to adeneo who tested that), so changing
var color = $(colorIdFull).css('background');
to
var color = $(colorIdFull).css('background-color');
will do the trick

jQuery: insertAfter() doesn't work on Firefox

I used this function to create a hint button after the input box.
function hint_draw() {
var inputs = document.querySelectorAll("#formIDHere input[name='name[]']");
for(i=0; i < inputs.length; i++) {
var button = document.createElement("a");
button.innerHTML = "<img src='image/hint.jpg' width='32' height='32'></img>";
button.href = "javascript:hint("+ i +")";
$(button).insertAfter(inputs[i]);
}
}
This code works fine in Chrome, but it doesn't work in Firefox. Why?
EDIT: Really, this script works fine.
Maybe I have problems with the other things.
The best answer is jQuery: insertAfter() doesn't work on Firefox but it's a comment so I can't accept it.
Bye!

http://jsfiddle.net/hfj3cs08/6/ this fiddle works fine.
May be your firefox version is not supporting the tag.
Change the button.innerHTML like the following
button.innerHTML = "<img src='image/hint.jpg' width='32' height='32'/>";

Jquery attr('src') undefined in IE 8 (works in FF)

This has gotten so far,that I will sum up what we found out:
Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript
The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler
But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)
I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved
The snippet we have is used twice.
The old code
<script type="text/javascript">
jQuery(document).ready(function() {
//...
//view entry
jQuery('.blogentry').live('click',function(){
// Get contents
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
imgleft = jQuery(this).children('.Image_left').attr('src');
imgcenter = jQuery(this).children('.Image_center').attr('src');
imgright = jQuery(this).children('.Image_right').attr('src');
// Write contents
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);
jQuery('.person').attr('src', profileimage);
jQuery('#g_fb_name').html(blogauthor);
jQuery('#g_titel').html(blogtitle);
jQuery('#g_text').html(blogtext);
//...
});
//...
// Change entry
jQuery('.blogentry').each(function(){
entryindex = jQuery(this).attr('rel');
if (entry == entryindex)
{
// The following works fine (so 'children' works fine):
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
// This does not work - only in IE 8, works in Firefox
imgleft = jQuery(this).children('.Image_left').attr('src');
imgcenter = jQuery(this).children('.Image_center').attr('src');
imgright = jQuery(this).children('.Image_right').attr('src');
//alert: 'undefined'
alert(jQuery(this).children('.Image_center').attr('src'));
//...
}
}
//...
});
</script>
The new code
Please see my own posted answer for the new code.
UPDATE:
This does not work if called inside of the click event!!!
jQuery('.Image_left').each(function(){
alert(jQuery(this).attr('src'));
});
SOLUTION TO GET THE IMAGE DATA:
relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
//... inside the eventhandler (entryindex = 'rel' of blogentry):
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];
This works because it is not called inside the event handler and the sources are saved beforehand
BUT! I still cannot write the data, which is my aim:
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);
UPDATE!!!
This is just crazy, I tried to write the data via usual javascript. This also works in FF, but no in IE8. Here really is some serious problem witt the attribute src:
document.getElementById('bild_left').src = imgleft;
document.getElementById('bild_center').src = imgcenter;
document.getElementById('bild_right').src = imgright;
alert(document.getElementById('bild_left').src);
This works in FF, but not in IE8, the attribute src remains undefined after writing! This seems to be not a jQuery problem at all!

children looks for immediate child elements only where as find looks for all the elements within it until its last child element down the dom tree. If you are saying find is working that means the element you are looking is not its immediate children.
Try to alert this jQuery(this).children('#Image_center').length see what you get.
FYI. Even when any element is not found jQuery will return an emtpy object it will never be null. So alert an emtpy object will always give you [object Object]. You should alwasy check for the length property of the jQuery object.
Try this
alert(jQuery(this).find('#Image_center').length);//To check whether element is found or not.

Bing Bang Boom,
imgright = jQuery(".Image_right",this).attr('src');

And why don't you easily use one working?
alert(jQuery(this).children('#Image_center').attr('src'));
change children to find
alert(jQuery(this).find('#Image_center').attr('src'));
It is probably the easiest solution, and when it work, why wouldn't you use it?

the problem is not in the attr('src') but in something else. The following snippet works in IE8:
<img id="xxx" src="yrdd">
<script type="text/javascript">
alert($('#xxx').attr('src'));
</script>
But if you for example change the the text/javascript to application/javascript - this code will work in FF but will not work in IE8

This has gotten so far,that I will sum up what we found out:
Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript
The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler
But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)
I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved
The new code
relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
//view entry
jQuery('.blogentry').live('click',function(){
// Get contents
entryindex = jQuery(this).attr('rel');
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];
// Write contents
jQuery('#entryimages').html('');
jQuery('#entryimages').html('<img class="rotate" width="132" height="138" id="bild_left" src="'+imgleft+'" /><img class="rotateright" width="154" height="162" id="bild_center" src="'+imgcenter+'" /><img class="rotate" width="132" height="138" id="bild_right" src="'+imgright+'" />');
jQuery('.person').attr('src', profileimage);
jQuery('#g_fb_name').html(blogauthor);
jQuery('#g_titel').html(blogtitle);
jQuery('#g_text').html(blogtext);
});
So I am just not using .attr('src') in the event handler....

Try to make a delay:
jQuery(document).ready(function() {
setTimeout(function () {
jQuery('.blogentry').each(function(){
// your code...
});
}, 100); // if doesn't work, try to set a higher value
});
UPDATE
Hope, this code will work.
$('.blogentry img').each(function(){
alert( $(this).attr('src') );
});
UPDATE
I'm not sure, but maybe IE can't read classes with uppercase first letter...
Try to change ".Image_center" to ".image_center"
UPDATE
Check your code again. You definitely have some error. Try this jsfiddle in IE8, attr('src') is showed correctly. http://jsfiddle.net/qzFU8/

$(document).ready(function () {
$("#imgReload").click(function () {
$('#<%=imgCaptcha.ClientID %>').removeAttr("src");
$('#<%=imgCaptcha.ClientID %>').attr("src", "Captcha.ashx");
});
});

Why doesn't the JavaScript work for Firefox/Chrome but for IE?

I've written a simple JavaScript to add options to an HTML Select element, the code looks like this:
function addOption() {
var newOption = document.createElement('<option value="TOYOTA">');
var elSel = document.getElementById('mySelect');
try{
elSel.add(newOption,null);
} //Standard
catch(ex)
{elSel.add(newOption);
} //IE Only
newOption.innerText = "Toyota";
}
I found online tutorial that shows we need to do something like this to get both Firefox/Chrome and IE work. However, currently only IE will work, for FF/Chrome, when I click on the "Add" button, nothing is added to the dropdown, could anybody help? Thanks in advance.

You are supposed to specify the node name, not an HTML string ala jQuery style to createElement afaik.
var el = document.createElement('option')
, fc = document.createTextNode('blah')
, s = document.getElementById('foo');
el.value = 'blah';
el.appendChild( fc );
s.appendChild( el )

I'm surprised that even works in IE.
Try replacing everything inside the function with this:
var newOption = document.createElement("option");
newOption.setAttribute("value", "TOYOTA");
newOption.appendChild(document.createTextNode("My toyota"));
var elSel = document.getElementById('mySelect');
elSel.appendChild(newOption)

If you're going to do a lot of UI manipulation, I suggest using a 3rd party library like jQuery to make this easier and more cross-browser compatible.
$('#mySelect').
append($("<option value='TOYOTA'>TOYOTA</option>").
attr("value",'TOYOTA').
text('TOYOTA'));

Use this instead:
var mySelect = document.getElementById("mySelect");
mySelect.add(new Option("Toyota", "TOYOTA"));

execCommand("insertHTML", ...) in Internet Explorer

I'm building a wysiwyg-editor with an editable iframe using document.execCommand(). Now i need to use the "insertHTML" command which works perfectly in Chrome and Firefox but of course it doesn't work in Internet Explorer:
function run() {
document.getElementById("target").focus();
document.execCommand("insertHTML", false, "<b>ins</b>");
}
<div contenteditable id="target">contenteditable</div>
<button onclick="run()">contenteditable.focus() + document.execCommand("insertHTML", false, "<b>ins</b>")</button>
What is the standard solution to this problem? It's okay if it only works in IE8 but IE7-support would be nice too.

In IE <= 10 you can use the pasteHTML method of the TextRange representing the selection:
var doc = document.getElementById("your_iframe").contentWindow.document;
if (doc.selection && doc.selection.createRange) {
var range = doc.selection.createRange();
if (range.pasteHTML) {
range.pasteHTML("<b>Some bold text</b>");
}
}
UPDATE
In IE 11, document.selection is gone and insertHTML is still not supported, so you'll need something like the following:
https://stackoverflow.com/a/6691294/96100

In case you haven't found anything yet,
I had a button that would add html into an iframe, and was causing an error in IE8 when I clicked the button and no text was selected (i.e. when I had the blinking caret). It turned out that the button itself was getting selected (despite having unselectable="on"), and causing javascript to throw up the error. When I changed the button to a div (with unselectable on) it worked fine, in IE8 and FF.
Hope this helps.

I know this is extremely old, but since IE is still a problem, here is a better way which does not even use execCommand.
This is missing some checks, like ensuring you're in the right container to be adding an image.
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var frag = document.createDocumentFragment();
var img = document.createElement("img");
// add image properties here
frag.appendChild(img);
range.insertNode(frag);

var doc = document.getElementById("your_iframe").contentWindow.document;
// IE <= 10
if (document.selection){
var range = doc.selection.createRange();
range.pasteHTML("<b>Some bold text</b>");
// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
var range = doc.getSelection().getRangeAt(0);
var nnode = doc.createElement("b");
range.surroundContents(nnode);
nnode.innerHTML = "Some bold text";
};