[SOLVED] Dynamic content does not show up in IE (what else is new?)

[jordanwb]

I made a Javascript script that makes a quote form. It works perfectly in Firefox as I expected. I try it in IE7 and the damn thing doesn't work (Why'd I expect it would?) I've installed the Script Debugger and no javascript seems to fail.

 

Linky

 

I don't care if it doesn't work in IE6 or older. I really don't know what to check. I wrote the quote.js file, the scripts.js file was auto-generated by Artisteer. I have a div that contains a "Please enable JS" which is removed successfully by IE.

[KevinM1]

Well, a quick glance doesn't show anything wrong.  However, one of the little JavaScript 'gotchas' is that, unlike other languages, for consistent results, you need to start your opening curly brace on the same line as the name of whatever block of code you write.  In other words, the following is good:

 

function myFunction(/* args */) {
   if(something) {
      //code
   }
}

 

And this is bad, and can cause odd errors:

 

function myFunction(/* args */)
{
   if(something)
   {
      //code
   }
}

 

It has something to do with the way JavaScript executes statements (at least, according to Douglas Crockford).

 

What do you mean by 'doesn't work'?  Is the form not displaying?  Not behaving properly?

 

I'm also curious - why are you building the entire form dynamically?  Surely having raw HTML would be simpler and easier to debug.

[jordanwb]

The form does not display. I made it with Javascript because users had usability issues with my previous version. I'll modify the code I wrote to have the curly braces of the same line as the function name.

 

*Edit*

 

I put the curly braces on the same line as the function names and it still won't work.

[KevinM1]

While digging around, looking for an answer, I found: http://bytes.com/topic/javascript/answers/761827-createelement-appendchild-not-working-ie

 

So, try adding a <tbody> tag.

[jordanwb]

So it would be like this:

 

<table>

<tbody>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

[haku]

Well, a quick glance doesn't show anything wrong.  However, one of the little JavaScript 'gotchas' is that, unlike other languages, for consistent results, you need to start your opening curly brace on the same line as the name of whatever block of code you write.  In other words, the following is good:

 

function myFunction(/* args */) {
   if(something) {
      //code
   }
}

 

And this is bad, and can cause odd errors:

 

function myFunction(/* args */)
{
   if(something)
   {
      //code
   }
}

 

It has something to do with the way JavaScript executes statements (at least, according to Douglas Crockford).

 

What do you mean by 'doesn't work'?  Is the form not displaying?  Not behaving properly?

 

I'm also curious - why are you building the entire form dynamically?  Surely having raw HTML would be simpler and easier to debug.

 

I gotta disagree with this - I always write my code with the curly brace on the next line, and have never done it on the same line, and it has never caused me any troubles.

[jordanwb]

All right I put in the tbody tags on my development copy and I'll see if it works on IE when I get on my Windows box tomorrow morning. I hope that fixes the "problem".

[KevinM1]

I gotta disagree with this - I always write my code with the curly brace on the next line, and have never done it on the same line, and it has never caused me any troubles.

 

- skip to ~31:48 (yeah, it's a long video).

 

Douglas Crockford is the senior JavaScript Architect at Yahoo! and the guy who wrote the spec for JSON.  I'll take him at his word regarding the curly braces.

[haku]

Interesting. I'm not going to pretend that I know more than that guy, cause I definitely don't!

 

But, that being said, it looks like this problem only arises in return statements. Something I will remember for the future.

 

I'm going to actually sit down and watch that video at some point though - looks interesting.

[KevinM1]

I just figure that with all of the other oddities JavaScript contains, it's better to be safe than sorry and always put the opening brace on the right.  FWIW, I do code with the opening brace to the left in other languages.  I think it makes things easier to read, but I digress.

[jordanwb]

Okay I put the tbody tags and it's slightly less broken than before. The tables show up but the "Click to Add Blind" link does not work, neither does the "[?]" link beside mounting. The copy I'm working on can be accessed on my local server: http://99.224.34.94/~jordanwb/rainbow/Quote

 

Plus the buttons and the "Click to add blind" link are being aligned to the left instead of center and right, plus colspanning is being ignored. 

[KevinM1]

Instead of trying to set those onclick functions as an attribute of the links, can you try the following?

 

mount_type_help_link.onclick = ShowMountHelp;

[jordanwb]

All right I changed it and I'll try it on IE in a bit.

 

I see the "JavaScript Best Practices" topic so I'll take a look at that.

[KevinM1]

Well, it looks like you got it working, at least in IE8 (I was about to copy some of your code so I could run a test of my own when I noticed the changes).  One problem remains, however - the help window takes forever to load when clicking on the '?'.  I'm not 100% sure what's causing the slowdown.

 

Also, you don't need the 'javascript: void(0)' bits.  It's easier/cleaner to put a hash (#) as the value of the href attribute and/or have the event handler return false.  Example:

 

<html>
   <head>
      <title>Blah</title>
   </head>

   <body>
      <a id="link1" href="http://google.com">Google</a>
      <br>
      <a id="link2" href="#">Someplace else</a>
   </body>

   <script type="text/javascript">
      var oLink1 = document.getElementById('link1');
      var oLink2 = document.getElementById('link2');

      oLink1.onclick = function() {
         alert("First link has been clicked");
         return false;
      }

      oLink2.onclick = function() {
         alert("Second link has been clicked");
      }
   </script>

</html>

[jordanwb]

Okay cool it works. Does the Ajax look okay for IE7+?

 

One problem remains, however - the help window takes forever to load when clicking on the '?'.  I'm not 100% sure what's causing the slowdown.

 

If you're accessing by dev server (http://99.224.34.94) then yeah it'll be a little slow.

[KevinM1]

Okay cool it works. Does the Ajax look okay for IE7+?

 

One problem remains, however - the help window takes forever to load when clicking on the '?'.  I'm not 100% sure what's causing the slowdown.

 

If you're accessing by dev server (http://99.224.34.94) then yeah it'll be a little slow.

 

Judging by what I can see, it looks like it's functioning properly for both IE7 and IE8.

[jordanwb]

Okay cool. I'll upload the new .js file and see if works on the real site.

[jordanwb]

Okay two things. I cannot put a little circle in the radio box group (mounting) and when I click "Submit" I get a runtime error:

 

Line 339

Error '0.checked' is null or not an object

 

if (quote_form[i+"[mount]"][0].checked == false && quote_form[i+"[mount]"][1].checked == false) {

[jordanwb]

Okay I got everything working for IE7+. I hope. Thanks guys.