CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Collin O'Connor
Collin O'Connor

Reputation: 1351

Javascript string to html issue with IE

I have a function that gets some notifications, loops through them and the adds them to a div using Jquery's prepend function. The important part looks like this

var myDiv = setNotificationDiv(notif.id, notif.title, notif.message, notif.sentDate, notif.readDate);
$('#leftContent').prepend(myDiv);

The setNotificationDiv uses Array.join to create a div that contains all the notification information and returns a string

function setNotificationDiv(id, title, message, sentDate, readDate){
    var temp = [];
    temp.push("<div class='notification'><input type='hidden' value='");
    temp.push(id);
    temp.push("' name='id'/><h2>");
    temp.push((title.length > 23 ? title.substring(0,23).concat('...') : title));
    temp.push("</h2><div class='inlineNotification'><p id='sent'>Sent: ");
    temp.push(formatDate(sentDate));
    temp.push("</p>");
    temp.push((readDate != null ? "<img id='read' src='content/images/readNotification.png'/>" : "<img id='read' src='content/images/unreadNotification.png'/>"));
    temp.push("</div><a href='#' class='deleteNotification'><img src='content/images/deleteNotification.png'</a></div>");
    var str = temp.join('');
    return str;
}

The problem is that in IE, all that is being added is this for each notification: 

<img src="http://localhost:8080/content/images/deleteNotification.png" a="" <=""/>

But in every other browser I tested (Chrome, Firefox and Opera), the notification div looks just like it should. I have no idea why IE does this operation so differently.

Any help would be greatly appreciated

Thanks

Upvotes: 0

Views: 114

Answers (2)

jpalladino84
jpalladino84

Reputation: 2510

The Line:

temp.push("</div><a href='#' class='deleteNotification'><img src='content/images/deleteNotification.png'</a></div>");

You didn't close out the img tag.

Change it to this:

temp.push("</div><a href='#' class='deleteNotification'><img src='content/images/deleteNotification.png'/></a></div>");

Upvotes: 0

Patrick at CloudBudgie
Patrick at CloudBudgie

Reputation: 785

The issue is malformed HTML. Firefox and chrome tend to automatically close any missing close tags on HTML elements, but IE will not.

Here is your issue:

<img src='content/images/deleteNotification.png'</a>

It should be: 

<img src='content/images/deleteNotification.png' /></a>

Upvotes: 3

Related Questions