We Keep Coding

jQuery.attr('data-*') not work on IE8 (work on IE7) [duplicate]

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");
});
});

Adding CSS via JQuery not working on IE

I am trying to set a background-image utilizing this function:
$('#frame').css('background-image','url(floorplans/img/selectors/floorplates-bg/'+floor+'.png)');
Where floor is a variable containing a number from 1-7.
It works on Chrome, Safari, and Firefox. But on IE it is not setting the background image. Does .css(); work on IE?
EDIT: This is the whole script:
$('#secondary-nav li').click(function(){
var floor = $(this).attr('id').replace('f','');
$('#frame').fadeOut(200);
$('#secondary-nav li').removeClass('current');
var currentFloor = '';
setTimeout(function() {
currentFloor = '#f' + floor;
$(currentFloor).addClass('current');
$('.units').css('display','none');
var image = 'url(floorplans/img/selectors/floorplates-bg/'+floor+'.png)';
$('#frame').css('background-image', image);
$('#frame').fadeIn(200);
$('#floor'+floor).fadeIn(200);
}, 500);
});
// highlight on mouseover
$(".units div a").hover(
function(){
$('img',this).stop().animate({'opacity':0},200);
},
function(){
$('img',this).stop().animate({'opacity':1},200);
}
);
// display floorplan
$('.units div').each(function(i){
var floor = $(this).parent().attr('id').replace('floor','');
var unit = floor + $(this).attr('class').replace('u','');
var details = $('a',this).attr('title');
var group = $('a',this).attr('class').replace('i','');
$(this).click(function(){
$('#details .info h1').html('Unit '+unit);
$('#details .info h2').html(details);
$('#details .info a').attr('href','floorplans/downloads/'+group+'.pdf');
$('#details .floorplate img').attr('src','floorplans/img/floorplans/floorplates/Unit-'+unit+'.png');
$('#details .floorplan img').attr('src','floorplans/img/floorplans/'+group+'.png');
});
$(this).fancybox({'href':'#details'});
});

Your problem is really unpredictable.
But following are my assumptions:
(1) Never use console.log when you go for production IE, console object is only exposed when the developer tools are opened for a particular tab.
so Remove your console.log.
(2) Are you referring to right folder path?
(3) Usually file path is prefixed with /. So maybe that cause the issue.
(4) Better have something like this:
var imageUrl = 'floorplans/img/selectors/floorplates-bg/'+floor+'.png';
$('#frame').css('background-image',imageUrl);
Hope within this your problem should exist.

Try adding the toString() function to your variable floor. It worked for me when I was having the exact same problem ;-)

Get option.remove work in firefox javascript only

I have an class remover that works just fine in IE och Chrome, wont get any errors but in firefox. it dosent work at all.
Just get an error thats thas remove is not a function.
I been trying different ways to make it work, but none of them removes the class.
function removeDice(){
document.getElementsByClassName("dice")[0].remove(0);
}
An nice function that lets me remove dice classes one by one...
works in chrome but not firefox.
Been reading different methods here in stackoverflow and tried this
document.getElementById("dice").className =
document.getElementById("dice").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
But no luck either.
Any tips ?
Thanks

Have a try with this
Fiddle
function removeClass(classToRemove){
var elems = document.getElementsByClassName(classToRemove);
if (!elems) return;
for (var i=elems.length-1;i>=0;i--) {
var elem=elems[i];
var classes=elem.className.split(" ");
classes.splice(classes.indexOf(classToRemove),1);
elem.className=classes.join(" ");
}
}

Use removeAttribute()
document.getElementById("dice")[0].removeAttribute("class");
UPDATED:
Do this way:-
function removeClassFromAllElements(){
var objClass = document.getElementsByClassName("YOUR-CLASS-NAME");
var tempLen = objClass.length;
for (i=0; i<tempLen; i++) {
objClass[0].removeAttribute("class");
}
}
removeClassFromAllElements();
Refer LIVE DEMO

ReferenceError: Can't find variable: $

Hi All i'm developping a game when i run it on chrome it works but when i try it on the emulator i'm getting an error in my javascript code that i can't understand the source or the cause
here's the error:
05-13 11:53:11.726: E/Web Console(790): ReferenceError: Can't find variable: $ at file:///android_asset/www/js/html5games.matchgame6.js:5
the error is in line 5: here's my javascript file content:
var matchingGame = {};
***var uiPlay1 = $("#gamePlay1");*** //////line 5
var uiPlay2 = $("#gamePlay2");
var uiIntro = $("#popup");
var uiExit = $("#gameExit");
var uiNextLevel = $("#gameNextLevel");
var uigameQuit =$("#gameQuit");
var uiPlay3 = $("#gamePlay3");
matchingGame.savingObject = {};
matchingGame.savingObject.deck = [];
matchingGame.savingObject.removedCards = [];
// store the counting elapsed time.
matchingGame.savingObject.currentElapsedTime = 0;
//store the last-elapsed-time
//matchingGame.savingObject.LastElapsedTime = 0;//now
// store the player name
matchingGame.savingObject.palyerName=$("#player-name").html();
matchingGame.savingObject.currentLevel="game6.html";
// all possible values for each card in deck
matchingGame.deck = [
'cardAK', 'cardAK',
'cardAQ', 'cardAQ',
'cardAJ', 'cardAJ',
];
$( function(){init();} );
//initialise game
function init() {
$("#game").addClass("hide");
$("#cards").addClass("hide");
uiPlay1.click(function(e) {
e.preventDefault();
$("#popup").addClass("hide");
startNewGame();
});
uiPlay2.click(function(e) {
e.preventDefault();
$("#popup").addClass("hide");
var savedObject = savedSavingObject();
// location.href =savedObject.currentLevel ;
if (savedObject.currentLevel=="game6.html")
rejouer();
else
location.href =savedObject.currentLevel ;
//ResumeLastGame();
//alert ("level :"+savedObject.currentLevel );
});
uiExit.click(function(e) {e.preventDefault();
//alert("u clicked me ");
}
);
uiPlay3.click(function(e) {
e.preventDefault();
$("#popupHelp").fadeIn(500, function() {
$(this).delay(10000).fadeOut(500)}); });
}
Any idea please thank u in advance

You probably didn't include jQuery.

Presumably you haven't defined the $ function anywhere.
Perhaps you a working from documentation that assumes you have loaded Prototype.js, Mootools, jQuery or one of the many other libraries that set up a variable of that (very poor) name.

make sure you have loaded jquery, mootools, other javascript libraries etc before you use the $.
Have you included your library at the end of your document and you have your script written before the library is downloaded.
make sure you have a script tag that refers to your library and then have your script content.
Also one more thing to note is that your document may not have been loaded when your scriot is executed and some of the controls might not exist on the page, thus make sure you wrap them in an API that will run the function once the document is loaded completely. In jquery you use $(document).ready(function(){});

I am developing a JS app in Ejecta. jQuery was included but the DOM ready doesn't work with Ejecta. Instead on site/app initialization I do something like this:
function func() {
init();
animate();
}
setTimeout(func, 1000);
This gives jQuery time to be loaded and parsed.

Replace the surround of an html element with another document

I have an html page with (among other things) a Unity3D window. I would like to replace everything on the page without causing the Unity window to reload. I have tried the following jquery-tastic
function replaceSurround(keepElem, newElem)
{
keepElem.siblings().remove();
keepElem.prepend(newElem.prevAll());
keepElem.append(newElem.nextAll());
var keepParent = keepElem.parent();
var newParent = newElem.parent();
if (keepParent && newParent)
{
replaceSurround(keepParent, newParent);
}
}
where keepElem is an element in the original document and newElem is the corresponding element in the new document, but it did not work very well.

Here is what I've got, it seems to work...
jQuery.fn.rewrap = function(newWrap){
var $parent = jQuery(this).parent();
var $clone = jQuery(this).siblings().clone()
var $newParent = $clone.wrap(newWrap).parent().clone();
$parent.replaceWith($newParent);
}
$('#header').rewrap('<div class="container" style="background-color:blue;" />');
I tested it on the Stackoverflow website. One small problem though, it seems to be refiring some onX events...?
[edit]
On second thought, that is not what you meant at all....
Can't you just do something like:
$('#result').load('ajax/test.html #result');
?