IE templates using HTML5 tags

[andy-clusta]

Hi

Guidance on how to integrate a solution like innerShiv into jquery-templates would be very helpful, as IE does not support insertion of HTML5 tags, even when using the document.createElement('section') fix for tags on the initial HTML page.

Andy

[BorisMoore]

Closing this issue for now. HTML5 structural elements in current browsers which have no built-in support for them is not a target scenario for jquery-tmpl at this point. (We are currently in Beta and for our first release have many other target scenarios we need to address). That said, a version of innerShiv or similar that works with templates may be possible. But it cannot be supported by specific code in the official plugin...

[andy-clusta]

I have got innerShiv to work with jquery-templ by adding innerShiv to the private function named build. Refactoring the jQuery( middle ) call on line 296 to allow this to be easily overridden would be very helpful.

Line 296: frag = jQuery( innerShiv ( middle ) ).get();

[andy-clusta]

eg. a PreInject or OnInjecting method which could be overloaded, to add innerShiv as required.

[BorisMoore]

Thanks. I'll consider that if we do significant iterations on that part of the code.

[KrofDrakula]

+1, in HTML5 apps, this is a blocker issue, since no widgets can use HTML5 elements in their templates; the fix by andy-clusta did help, but would love to see this integrated upstream.

[BorisMoore]

I've reopened this issue, for investigation. Not sure how soon we will be able to address it though...

[KrofDrakula]

I've done some more testing on a live example; seems the simple wrapping with innershiv doesn't work correctly, since instead of DOM elements, it returns a document fragment that botches up rendering. I didn't have time to investigate further, but something to help with the resolution.

[andy-clusta]

My latest approach has been to patch jQuery itself, rather than jQuery plugins individually. The following code works fairly reasonably for my use cases. Crucially, it ensures scripts returned in a partial are also evaluated, but after dom insertion.

var init = $.fn.init;
var html = $.fn.html;

// used by Jquery Templates
// tests to see if html passed to constructor
$.fn.init = function (selector, context) {
    if ($.browser.msie && typeof selector == 'string' && selector.indexOf('>') != -1 && selector.indexOf('<') != -1) {
        return new init(innerShiv(selector, false));
    }

    return new init(selector, context);
};

// used by Jquery Unobtrusive Ajax in ASP.NET MVC
// only matches <script></script> tags, without @src and @type
$.fn.html = function (value) {
    if ($.browser.msie && value != null) {
        var scriptsRegex = new RegExp('<script>([\\w\\W]*)</script>', 'gim');
        var scripts = value.match(scriptsRegex);
        var el = html.apply(this, [innerShiv(value, false)]);

        for (var i in scripts) {
            var js = scriptsRegex.exec(scripts[i]);
            if(js != null)
                $.globalEval(js[0]);
        }

        return el;
    }

    return html.apply(this, arguments);
};

[KrofDrakula]

@andy-clusta: I've modified your script a bit (added function name to avoid having the var declarations) and added innershiv to the file: https://gist.github.com/822134

[tehnorm]

if it matters +1 for this fix being worked in. We are using HTML5 and are experiencing IE's "challenges" with HTML5. Also - thanks again for jquery-tmpl - great stuff!!

[Akkuma]

@KrofDrakula & @andy-clusta
I've now made a jQuery 1.5+ compatible version, which integrates the innerShiv directly into the function to remove it from the global namespace.

https://gist.github.com/887560

[rosshadden]

Is there any way the tmpl plugin can be fixed to correct this, so no additional code is required? This is hands-down an issue with jquery-tmpl, so modifying jQuery and/or the shiv are not the best approaches.

[rdworth]

Thanks for taking the time to submit this issue. Just wanted to let you know this plugin is no longer being actively developed or maintained by the jQuery team. See README for more info.