Joel Varty : jQuery

The jTemplates plugin for jQuery – Keep inline templates from being misinterpreted

joelvarty — Fri, 04 Dec 2009 13:37:54 GMT

I love the jTemplates plugin for jQuery. It works great and I’ve had very little trouble working with it when I put my templates in separate files. This ensures that the browser does re-interpret the html for the template and re-arrange the elements. This happens mostly with tables in IE and Webkit browsers where you want to repeat the rows of the table. You’ll see what I mean in a moment.

Take a template like the following:

<table>    
    <thead>
        <th>Date</th>
        <th>Title</th>
        <th>Count</th>
    </thead>
    <tbody>
        {#foreach $T as o}
            <tr>                                
                <td>{$T.o.CreatedOn}</td>
                <td>{$T.o.Title}</td>
                <td>{$T.o.Count}</td>
            </tr>
        {#/for}
    </tbody>    
</table>

This works great if I put the template in it’s own html or text file, but not if I embed it in a <div>.

Why? Well, the {# foreach} and the {#/for} lines in the template are NOT interpreted as being part of the <table> element, and so that text ends up being placed in the DOM as text elements either before or after the table.

The way around this is simple – just place your template in a <textarea> instead of a div. Then you can use $(“#elementID”).val() to grab the literal text (which isn’t interpreted into the DOM as anything but text), and all should be good.

More later - joel

How JSONP works

joelvarty — Tue, 08 Sep 2009 17:00:34 GMT

There are a plethora of explanations for JSONP (JSON with Padding, I think it stands for) out there – just search for “how JSONP works” and you’ll get a ton of descriptions. JSONP is provided as an alternative to normal JSON by jQuery on the client side to enable the invocation of services outside of the current domain.

Some of them are incorrect in explaining that this technology uses a server-server proxy to call out to another server outside of the current domain.

This is NOT a server-server technology, but rather more like the way a lot of Ad servers by injection javascript into the page using document.write() with a script tag.

The url for the script tag has a querystring parameter which become that javascript function that wraps up the JSON return value of the web method. Essentially, a document.write() call creates a script tag on the page which goes to whatever server you want to, and then returns a javascript function object which will get invoked when the script’s response is evaluated by the browser. This means that the server code has to be tweaked to wrap the JSON return in that function call.

One thing you will not get from JSONP is notification of network errors or anything that responds nicely to badly formed responses, so you have to accept that as a tradeoff with the ability to invoke services on other domains.

This is a very high level explanation of JSON, but I hope it gets you started in right direction.

More later - joel

Load jQuery Dynamically

joelvarty — Thu, 07 May 2009 20:05:23 GMT

Sometimes you have to load jQuery, but you don’t know if it has already been referenced somewhere else in the website.

This tends to happen if you have a custom web control, delivered in an assembly, that relies on jQuery.

This code has been ripped out of my application, and may have a typo or three, but it gives you the general idea.

var jQueryScriptOutputted = false;
function initJQuery() {
    
    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {
    
    
        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;
            
            //output the script (load it from google api)
            document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    } else {
                        
        $(function() {  
            //do anything that needs to be done on document.ready
        });
    }
            
}

initJQuery();

More later - joel

JQuery - get a handle on a server element in javascript without using <%= elem.ClientID %>

joelvarty — Mon, 09 Feb 2009 19:48:52 GMT

One of the things I see a lot of is code that looks like this:

<asp:CheckBox ID="chkEnable" Text="My Checkbox" runat="server" />
<script type="text/javascript">
    var chkEnable = $get("<%= chkEnable.ClientID %>");
</script>

You can see that the ClientID is being used, which will grab the exact element that .net generates, and will look like ctl00_plcMain_chkEnable or something like that.

jQuery can select an element by looking at what its attribute ends with, as explained here.

So we get this instead:

<asp:CheckBox ID="chkEnable" Text="My Checkbox" runat="server" />
<script type="text/javascript">
    $(function() {
        var checked = $("input[id$=chkEnable]").attr("checked");
        if (checked) {
            alert("It is checked.  These are the droids you are looking for.");
        }
    });
</script>

The code in the selector gets all of the input elements that have an id attribute that ends with chkEnable. What really rocks (or sucks, depending on your point of view) is that if you have a repeater full of <asp:checkbox> controls, this will select all of them so you can process them.

More later - joel

VS Docs for jQuery 1.3.1

joelvarty — Mon, 09 Feb 2009 16:34:55 GMT

I am using jQuery for everything these days - it really is an awesome add-on to any web application, and what even better is that you can get intellisense on it for the latest version.

Makes it easy to get stuff like this showing up when you are kicking out js code...

Via Bertand Le Roy's blog - http://weblogs.asp.net/bleroy/archive/2009/02/06/vsdoc-for-jquery-1-3-1-now-available.aspx

Now if only I could find the time to get doc comments in my own js files...

Rock on!

joel