CODEWITHSUNDEEP
jqueryhtmlinternet-explorer-8jquery-templates
keegan3d
keegan3d

Reputation: 11285

jQuery templates with html5 elements in ie8

I might be asking too much but I'm trying to get jQuery templates with html5 elements working in ie8. I'm using head.js so that's registering the html5 elements, I also tried html5shiv but no luck. There are other html5 elements in the page that work fine, but the jquery template system returns nothing if I use html5 elements in the template.

Here's an example of one of my templates:

<aside>
    <script id="sidebar-template" type="text/x-jquery-tmpl">
        <section>
            <header>${name}</header>
            <section>
                {{each links}}
                <a href="${link}" class="${icon}">${name}</a>
                {{/each}}
            </section>
        </section>
    </script>
</aside>

If I change the html5 elements to divs and stuff the template works in ie8. I should note that this template works in all other browsers, no big surprise there...

I put together a jsfiddle demonstrating my template: http://jsfiddle.net/keegan3d/E6EbG/1/

Is there anyway to get these html5 elements working in ie8?

Upvotes: 8

Views: 3818

Answers (5)

Simon Dwyer
Simon Dwyer

Reputation: 21

Hey this might be a bit late, but I came across this while doing ie8 testing on my app.. I'm doing similar templating stuff and ie8 wasn't styling it when injecting the html.

Check out http://jdbartlett.com/innershiv/

Cheers

Upvotes: 2

Pete Benoit
Pete Benoit

Reputation: 28

For IE8, you need to use an HTML5 shiv.

I inserted into your Javascript:

document.createElement("aside");
document.createElement("section");
document.createElement("header");

results here: Updated jsFiddle

Upvotes: -1

ezmilhouse
ezmilhouse

Reputation: 9121

Maybe not related to your specific problem, this thread appears to be a relevant google search result so maybe it helps others who also visit via google.

...

I had the same problem - I have a single HTML file (that I use as a collection for all my templates, saves HTTP requests) containing all my templates in various script blocks.

To extract single blocks of HTML from this bulk file I was using .text() and .contents() - and IE8 couldn't handle that.

It turns out that the only reliable way to grab content was using .html() - e.x:

<script class="template-header" type="text/x-jQuery-tmpl">
    <div id="container-title" class="container">
        <div class="container-inner">
            <div class="box-headline app-nav">
                <div class="box-inner">
                    <h1><a href="${prefs.urlShopHome}" class="app-nav">${text.name}</a></h1>    
                </div>
            </div>
        </div>
    </div>
</script>

and here's the jQuery part:

// ...
"success": function( data, textStatus, jqXHR ) {
    var header = $(data).filter(function(){ return $(this).is('.template-header') });
    header.each(function() {
        var html = $(this).html(); // do not use .text(), .contents() here
        // ...
    });
});

Thx, to Ben Nadel - he did the test: http://www.bennadel.com/blog/1829-Script-Tags-jQuery-And-Html-Text-And-Contents-.htm

Upvotes: 1

Mark Lagendijk
Mark Lagendijk

Reputation: 6893

I encountered this problem myself. The problem occurs in IE8 with html 5 elements when using the jQuery object which is returned by the template function, as input for an .html. For example:

$("#my_container").html($.tmpl("myTemplate", { items: items }));

After trying some things I discovered the following workaround:

var htmlContent = $.tmpl("myTemplate", { items: items }).html();
//assuming we have one outer element, which is a div
htmlContent = "<div>" + htmlContent + "</div>";
$("#my_container").html(htmlContent);

I suspect this is an jQuery bug, and is not specifically related to the temlate engine.

Upvotes: 2

Oliver Nightingale
Oliver Nightingale

Reputation: 1835

Althought not really an answer I can confirm that I am having a similar issue. In some cases the content refuses to render, in other cases styles that are targetted at the html5 elements refuse to apply. Changing the new html5 elements to divs makes everything work as expected for me.

Upvotes: 0

Related Questions