Tutorial on Brandon Pugh's Blog

Checking if a dom element exists with JQuery [Byte sized tips]

Mon, 25 Jun 2012 21:52:00 +0000

This is a simple tip but one I feel makes my code a bit easier to read.

I was never very pleased with the standard way of checking if a dom element exits in jquery:

if($('#userName').length !== 0){
    //do something with $('#firstName')
}

The solution I like is to create a very simple jQuery plugin to encapsulate this logic:

// this extension reads better when selecting elements
$.fn.exists = function () {
    return this .length !== 0;
};

You can place this anywhere you like such as in a ‘utils.js’ file, so long as it loads after jQuery. Now your code would like so:

if($('#userName').exists()){
    //do something with $('#firstName')
}

Thank you for keeping RSS alive. You're awesome.

Reply by email

How to use jQuery .on() instead of .live()

Sun, 15 Jan 2012 21:52:25 +0000

One of the most used features of jQuery is the easy methods it provides to to attach event handlers to dom elements like this simple example:

$('.submitButton').click(function() {
    validateForm();
});

It doesn’t get much easier than that. However, a lot of times we’ll want to attach events to elements that were loaded after the initial page load such as from the result of an ajax request. This is where the .live() method comes in really handy:

$('.submitButton').live('click', function() {
    validateForm();
});

However if you’re using jQuery 1.7 and up you now have access to the .on() method which is a very versatile method offering a number of improvements over .live(). This post does a good job of explaining the main issues with using live, all of which you can avoid by using .on().

So how do you go about using .on()? Well .on() basically provides a consistent interface for practically all your event binding needs. You can replace the first example with:

$('.submitButton').on('click', function() {
    validateForm();
});

and you can obviously replace 'click' with whatever event you wish to handle.

Now to replace the previous live() example with .on() requires the tiniest bit more effort. The way .on() works is it will attach the event to the first selector you specify and if you specify a second selector it will look at all the events that bubble up to it and will only execute the event handler for events that came child elements matching the second selector. So we could replace the example with this:

$('#userForm').on('click', '.submitButton', function() {
    validateForm();
});

Since the submitButton element is a child of the userForm element, the click event from the button will bubble up the dom and when it reaches the form element our event handler will be called. This is how we can dynamically insert as many elements with the calls submitbutton and have them be automatically handled. This is essentially the same thing that .live() accomplishes however it does so by automatically attaching the event handler to the document element which can have performance implications as now our click event would have to bubble all the way up the dom tree to the document before the handler will see it. It would look like this:

$('document').on('click', '#submitButton', function() {
    validateForm();
});

Let’s look at one last examle:

$("#dataTable tr").live("click", function(event){
    alert($(this).text());
});

This is a fairly common scenario where #dataTable is populated dynamically by data retrieved asynchronously from the server. Again the issue here is that all the events have to bubble up to the document before they are seen by the handler. We can instead replace this with:

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

Thank you for keeping RSS alive. You're awesome.

Reply by email

Getting started with PetaPoco and Postgres

Wed, 30 Nov 2011 17:50:00 +0000

I’m currently working on a project I’ve inherited that uses a Postgres sql backend and I was looking for an easy way to make writing our data access layer less time consuming and painful. My first thought was to use a micro-ORM like Massive but while I’ve heard some really great things about Massive, I felt it might be a tough sell to my team members who aren’t too comfortable with Expandos and its dynamic nature (I know, but change in baby steps I suppose). Then I came across PetaPoco and it seemed to fit the bill. Its basically a mico-ORM like Massive with built in support for Postgres except that it also works with POCOs (Plain old CLR Objects) and was pretty easy to get up and running with.

First if you’re not already working with Postgres you’ll need to install a provider like Npgsql. You can get the assemblies from their site or use Nuget with the command “Install-Package Npgsql”. If you were already using Postgres like I was you’ll have to add a bit more to the web.config/app.config in order to use PetaPoco.

<system.data>
	<DbProviderFactories>
	  <add name="Npgsql Data Provider" invariant="Npgsql" support="FF" description=".Net Framework Data Provider for Postgresql Server"
		   type="Npgsql.NpgsqlFactory, Npgsql, Version=2.0.11.0, Culture=neutral, PublicKeyToken=5d8b90d52f46fda7" />
	</DbProviderFactories>
</system.data>
<connectionStrings>
	<add name="Postgres" connectionString="Server=localhost;Port=5432;User Id=testuser;Password=secret;Database=testdb;" providerName="Npgsql"/>
</connectionStrings>

Notice you have to add the DbProviderFactories to the system.data section (you can also do this in the machine.config though you may run into issues when you deploy) and be sure to specify that as the providerName in the connection string.

Next install PetaPoco which you can get from Nuget with “Install-Package PetaPoco” which installs it in your project with some handy T4 templates for generating pocos from your database schema but all you really need is the single PetaPoco.cs file somewhere in your project and you should be ready to go. Check out their site for some great examples to get coding.

Its also worth noting though that if you’re targeting .Net 3.5 you’ll need to define **PETAPOCO_NO_DYNAMIC **as a conditional compile symbol in your project settings or it won’t compile since PetaPoco now also supports dynamics.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Allow pasting multiple lines in IE textbox

Wed, 12 Oct 2011 23:21:07 +0000

You may have noticed before that if you try to paste more than one line of text into a textbox in Internet explorer it will on only paste in the first line and disregard the rest. Firefox and Chrome on the other hand will automatically paste all lines of the text onto the one line of the textbox. This issue came up in one of the projects I’m currently working on where we wanted users to be able to paste in a list of ID numbers they wanted to run a search on.

I knew it was possible to get it working in IE since I had seen it done with the search box on Google Maps. I figured the way to do it would be to be to capture the text from the clipboard when the user is attempting to paste it into the textbox and reformat the text into a single line. In the end this is what the javascript looked liked:

if (window.clipboardData) {
        $('#textboxId').bind('paste', function (e) {
            var clipped = window.clipboardData.getData('Text');
            clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
            $(this).val(clipped);
            return false; //cancel the pasting event
        });
    }

To begin with, I’m using jQuery because it’s incredibly powerful and it’s 2011 and if you’re not using a javascript library then you are missing out. This allows me to bind an event handler for the paste event to the textbox element. Note that the paste event is supported in practically all browsers however for security reasons accessing the clipboard is only supported in IE. Fortunately for this purpose I’m only interested in Intenet Explorer and we can get the text with window.clipboardData object. Passing ‘Text’ into the getData() function is required to return the data as text.

Next calling .replace() on the text to replace all of the newline characters with spaces (or any delimeter we choose). Then we simply set the value of the textbox to the newly formatted text.

clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
$(this).val(clipped);

Also don’t forget to call return false; to prevent the original text from still being pasted in.

Lastly we need to handle what will happen in all other browsers. We only want to attempt to read from clipboardData in IE since it will be undefined in all other browsers. One way to accomplish this is by detecting what browser the user has however this is not recommended. The trend nowadays is to use feature detection and there are entire javascript libraries such as Modernizr dedicated to detecting which features a browser supports and then degrading gracefully when it doesn’t. In this case we can simply surround our code with an if statement to ensure our code won’t cause any errors outside of Internet Explorer.

if (window.clipboardData){}

And there you go, overcoming one of Internet Explorer’s shortcomings with some simple and concise javascript.

Thank you for keeping RSS alive. You're awesome.

Reply by email