Results 1 to 7 of 7

Thread: jQuery Append Trouble in IE7.

  1. #1
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default jQuery Append Trouble in IE7.

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    fr600 (08-10-2011)

  6. #5
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 08-11-2011 at 12:46 AM. Reason: add note
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    fr600 (08-11-2011)

  9. #7
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much!! You are a savior.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •