IE templates using HTML5 tags about jquery-tmpl HOT 13 OPEN

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...

from jquery-tmpl.

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();

from jquery-tmpl.

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

from jquery-tmpl.

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

from jquery-tmpl.

+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.

from jquery-tmpl.

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

from jquery-tmpl.

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.

from jquery-tmpl.

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);
};

from jquery-tmpl.

@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

from jquery-tmpl.

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!!

from jquery-tmpl.

@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

from jquery-tmpl.

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.

from jquery-tmpl.

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.

from jquery-tmpl.