Question

I am using:

$("<div/>", {
id: "overlay",
class: "web_dialog_overlay"
}).appendTo("body");
$("<div/>", {
id: "dialog",
class: "web_dialog",
html: "<div class='d_title'>Server error! Try again later</div><div class='button ok' id='ok'>Ok</div>"
}).appendTo("body");
$('#overlay').show();
$('#dialog').fadeIn(300);

This code is working perfectly in google chrome, firefox and opera. But not working in internet explorer.

I am getting

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; Tablet PC 2.0)
Timestamp: Mon, 3 Dec 2012 13:26:49 UTC


Message: Expected identifier, string or number
Line: 335
Char: 1
Code: 0
URI: http://localhost/signup

The 335 line is id: "overlay",

What to do? Thanks in advance.

Answer 1

Make sure you surround the class property name in the object with quotes since it is reserved for future use. https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words

$("<div/>", {
    id: "overlay",
    "class": "web_dialog_overlay"
}).appendTo("body");

$("<div/>", {
    id: "dialog",
    "class": "web_dialog",
    html: "<div class='d_title'>Server error! Try again later</div><div class='button ok' id='ok'>Ok</div>"
}).appendTo("body");

$('#overlay').show();
$('#dialog').fadeIn(300);