Having encountered this Internet Explorer (all versions) behavior several times previously, I eventually decided
to share this most probably useless knowledge. Excuse my lengthy explanations because I am going
to show
the behavior along with a very simple case when one can come across it inadvertently. Let's say I want
to implement some simple templating solution in JavaScript. I wrote an HTML template with an intention
to bind data
to it on
the client side: Please note, that name of
the “sys-template” class is just a coincidence. I do not use any ASP.NET AJAX code in this simple example. As you can see we need
to replace placeholders (property name wrapped with curly braces) with actual data. Also, as you can see, many of
the placeholders are situated within attribute values and it is where
the danger lies. I am going
to use <a /> element HTML as a template and replace each placeholder pattern with respective properties’ values with a little bit of jQuery like this: You can find complete code along with
the contextFormat() method definition at
the end of
the post. Let’s assume that value for
the name property (that we want
to put in
the title attribute) of
the first data item is “first tooltip”. So it consists of two words. When
the replacement occurred, title attribute should contain
the “first tooltip” text which we are going
to see as a tooltip for
the <a /> element. But let’s run
the sample code in Internet Explorer and check it out. What you’ll see is that only
the first word of
the supposed “title” attribute’s content is shown. So, were is
the rest of my attribute and what happened?
The answer is obvious once you see
the result of jQuery(“.sys-template”).html() line for
the given HTML markup. In IE you’ll get
the following <A id={id} class={cssClass} title={name} href="{source}" myAttr="{attr}">Link
to {source}</A> See any difference between this HTML and
the one shown earlier? No? Then look carefully. While
the original HTML of
the <a /> element is well-formed and all
the attributes are correctly quoted, when you take
the same HTML
back in Internet Explorer (it doesn’t matter whether you use html() method from jQuery library or IE’s innerHTML directly), you lose attributes’ quotes for some of
the attributes. Then, after replacement, we’ll get following HTML for our first data item. I marked
the attribute value in question with italic: <A id=1 class=first title=first tooltip href="first.html" myAttr="firstAttr">Link
to first.html</A> Now you can easily imagine for yourself what happens when this HTML is inserted into
the document and why we do not see
the second (and any subsequent words if any) of our title attribute in
the tooltip. There are still two important things
to note.
The first one (and it actually
the reason why I named
the post “lazy wrapping” is that if value of
the HTML attribute does contains spaces in
the original HTML, then it WILL be wrapped with quotation marks. For example, if I wrote following on my page (note
the trailing space for
the title attribute value) <a href="{source}" title="{name} " id="{id}" myAttr="{attr}" class="{cssClass}">Link
to {source}</a> then I would have my placeholder quoted correctly and
the result of
the replacement would render as expected:
The second important thing
to note is that there are exceptions for
the lazy attributes wrapping rule in IE. As you can see href attribute value did not contain spaces exactly as all
the other attributes with placeholders, but it was still returned correctly quoted Custom attribute myAttr is also quoted correctly when returned
back from document, though its placeholder value does not contain spaces either. Now, on account of
the highly unlikely probability that you found this information useful and need a solution
to the problem
the aforementioned behavior introduces for Internet Explorer browser, I can suggest a simple workaround – manually quote
the mischievous attributes prior
the placeholder pattern is replaced. Using
the code of contextFormat() method shown below, you would need
to add following line right before
the return statement: result = result.replace(/=({([^}]+)})/g, '="$1"'); Below please find original sample code:
