0

I'm finding that JQuery's $.tmpl() rendering differs greatly accross browsers. Predominantly IE versions. When the code below is placed in an update panel, its throws errors with the .appendTo("#divList"); method.

What's a fix for this - code example below

Mozilla: SUCCESS

IE Browser mode (IE9 Compat View), Document mode (IE9 standards): SUCCESS

IE Browser mode (IE9), Document mode (IE9 standards): SUCCESS

IE Browser mode (IE8), Document mode (IE9 standards): SUCCESS

IE Browser mode (IE7), Document mode (IE9 standards): SUCCESS

IE Browser mode (*), Document mode (IE8 standards): FAIL (nothing rendered)

IE Browser mode (*), Document mode (IE7 standards): FAIL

IE Browser mode (*), Document mode (Quirks mode): FAIL 

<head runat="server"> 
 <meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" /> 
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 

<script type="text/javascript"> 

    $(function () {

        var a = [
            { actor: 'hanks', film: 'yo mama' },
            { actor: 'banks', film: 'men can swim' },
            { actor: 'will', film: 'men can swim' },
            { actor: 'jlo', film: 'ooogh aah' },
            { actor: 'jlo', film: 'bright yellow shadows' }
        ];

        $('#txDibaba').live("keyup", function () {
            $("#divList").empty();
            $('#PM_tmpl').tmpl(blep(a, 'actor', $(this).val())).appendTo("#divList"); 
        });

    });

    function blep(arr, prop, value) {
        return $.grep(arr, function (item) { return item[prop] == value }); 
    }
</script>
    <script id="PM_tmpl" type="text/x-jquery-tmpl">
    <tr>
        <td style="width:60%;text-decoration:underline;cursor:pointer;">${name}&nbsp; ${strength}&nbsp; ${film}</td>
        <td style="width:200px;"> ${actor} </td> 
    </tr>   
</script> 

<form id="form1" runat="server">


            <input type="text" id="txDibaba" /> 
            <br />

            <div id="divList" style="border:1px solid black; width:400px; padding:2px;"> 

            </div> 

</form>

Does it make sense to force IE9 mode?

bizl
  • 1,535
  • 2
  • 12
  • 21
  • What are you asking? Yes, force IE9 mode. There's a meta tag that does that. – Erik Reppen Aug 14 '12 at 20:24
  • Also, some browsers might forgive but don't put ',' at the end of an array or object literal. Browsers should fail on that and will in strict-mode I would expect. – Erik Reppen Aug 14 '12 at 20:26

1 Answers1

0

I'm still not sure what you're asking but your code is busted in this case, not IE.

var a = [
    { actor: 'hanks', film: 'yo mama' },
    { actor: 'banks', film: 'men can swim' },
    { actor: 'will', film: 'men can swim' },
    { actor: 'jlo', film: 'ooogh aah' },
    { actor: 'jlo', film: 'bright yellow shadows' }, //<-- get rid of that ,
];
Erik Reppen
  • 4,605
  • 1
  • 22
  • 26
  • oh shoot, thanks code updated. Question was how to make it render correctly accross IE versions. Thanks – bizl Aug 14 '12 at 20:52