jQuery Append Trouble in IE7.

**fr600** · 08-10-2011, 12:22 PM

Hello,

Please take a look at this line:

Code:

for (number=0; number<20; number++) {
	$("div#container").append("<div class=n" + number + "></div>");
}

It works in FF, Safari, Chrome, Opera, IE8, IE9 but it's not working in IE7 or lower.

I've tried to fix it for an hour but I couldn't. If you know what I'm doing wrong, please let me know.

Thank you.

**jscheuer1** · 08-10-2011, 01:52 PM

What evidence do you have that it doesn't work in IE 7?

I mean, what did you test it on?

I have a virtual machine running IE 8 under Win XP. It has installed on it IE 7 and IE 6 standalone versions, and it works in both of those.

I also have IE tester on the actual machine under Win 7. It's IE 7 mode doesn't work on anything but it's IE 6 is just fine, and works with your code.

Test code:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	for (var number=0; number<20; number++) {
		$("div#container").append("<div class=n" + number + "></div>");
	}
});
</script>

</head>
<body>
<div id="container"></div>
<div id="test"></div>
<input type="button" value="Go" onclick="$('#test').html($('#container').html().replace(/</g, '||'));">
</body>
</html>

Clicking on 'Go' gets you:

||DIV class=n0>||/DIV> ||DIV class=n1>||/DIV> ||DIV class=n2>||/DIV> ||DIV class=n3>||/DIV> ||DIV class=n4>||/DIV> ||DIV class=n5>||/DIV> ||DIV class=n6>||/DIV> ||DIV class=n7>||/DIV> ||DIV class=n8>||/DIV> ||DIV class=n9>||/DIV> ||DIV class=n10>||/DIV> ||DIV class=n11>||/DIV> ||DIV class=n12>||/DIV> ||DIV class=n13>||/DIV> ||DIV class=n14>||/DIV> ||DIV class=n15>||/DIV> ||DIV class=n16>||/DIV> ||DIV class=n17>||/DIV> ||DIV class=n18>||/DIV> ||DIV class=n19>||/DIV>

proof that your code did its job.

**fr600** · 08-10-2011, 03:00 PM

I have tested it with Developer Tools on IE9 in Windows 7. I tried the same code with PHP and it works. But when I try this javascript, it doesn't work.

Do you think there's a possibility that my IE is broken? :S

**jscheuer1** · 08-10-2011, 03:41 PM

Well, PHP is server side. So long as it outputs valid HTML, any browser will render it.

I'm curious, did you try my test page in your IE 9 IE 7 mode? I did, it worked fine. Perhaps there's some other IE < 8 problem with the code you're using.

Try my test in your IE 9's IE 7 mode:

http://home.comcast.net/~jscheuer1/s...mber_div_h.htm

Hit the go button, you should see:

||DIV class=n0>||/DIV> ||DIV class=n1>||/DIV> ||DIV class=n2>||/DIV> ||DIV class=n3>||/DIV> ||DIV class=n4>||/DIV> ||DIV class=n5>||/DIV> ||DIV class=n6>||/DIV> ||DIV class=n7>||/DIV> ||DIV class=n8>||/DIV> ||DIV class=n9>||/DIV> ||DIV class=n10>||/DIV> ||DIV class=n11>||/DIV> ||DIV class=n12>||/DIV> ||DIV class=n13>||/DIV> ||DIV class=n14>||/DIV> ||DIV class=n15>||/DIV> ||DIV class=n16>||/DIV> ||DIV class=n17>||/DIV> ||DIV class=n18>||/DIV> ||DIV class=n19>||/DIV>

If not, there is something wrong with your IE. If you do, there's some other problem with the code you're using.

If it's the latter and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**fr600** · 08-10-2011, 07:26 PM

Thank you for trying to help me. I have no webspace so I cannot upload but if you don't mind, I'd like to share the codes here:

This is latest:

Code:

<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
	<meta charset='UTF-8' />
</head>
<body>

<div id="container"></div>

<script src='js/jquery.js'></script>

<script>
var phone = "22223333444455556666";

$(function(){
	for (number=0;number<20;number++){
		var nums = phone[number];
		$("div#container").append("<div class='n"+nums+"'></div>");
	}
});
</script>

</body>
</html>

I have attached an image, please take a look at it and once again, thank you so much for trying to help me.

EDIT: Btw, your page did work for me in IE7,8,9.

**jscheuer1** · 08-11-2011, 12:20 AM

Easy. Strings and arrays share much in common. They both have length and indexes. Though there are probably other similarities, those two are what's important here. However, there was a time when the indexes of a string weren't available using the square bracket notation:

Code:

var nums = phone[number];

I'm not sure when each individual browser started to allow it. But obviously IE started with version 8. There are other approaches to solve this, but since all browsers allow square bracket index notation for arrays, we can simply convert the string to an array using the split method:

Code:

<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
	<meta charset='UTF-8' />
</head>
<body>

<div id="container"></div>

<script src='js/jquery.js'></script>

<script>
var phone = "22223333444455556666".split('');

$(function(){
	for (number=0;number<20;number++){
		var nums = phone[number];
		$("div#container").append("<div class='n"+nums+"'></div>");
	}
});
</script>

</body>
</html>

Problem solved!

Note: number in the above is an undeclared global variable and though a different case (I think that's what saves you) is the name of a javascript global object (Number). Taking that into consideration, along with the general best practices idea of not having any variables in the global scope if they are not required, and being more sensitive to valid HTML 5, I would do something more like:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Phone Numbers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src='js/jquery.js'></script>
<script>

$(function(){
	var phone = "22223333444455556666".split(''), num;
	for (num=0;num<20;num++){
		var nums = phone[num];
		$("div#container").append("<div class='n"+nums+"'></div>");
	}
});
</script>

</head>
<body>
<div id="container"></div>
</body>
</html>

**fr600** · 08-11-2011, 01:31 PM

Thank you so much!! You are a savior.

Thread: jQuery Append Trouble in IE7.

Thread Tools

Search Thread

jQuery Append Trouble in IE7.

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions