and jQuery.trim()

When performing a .trim() function on a string pulled via the .text() tag in jQuery,   will convert into a special space that will not be removed.

Example:

<div id="div1">  This is text  </div>

<script type="text/javascript">
jQuery(document).ready(function() {
trimString = jQuery.trim($('#div1').text());
</script>

I was able to catch the Unicode character, which ended up being 160, by using:

alert(trimString.charCodeAt(0));

After performing a regex replace on the string, I was able to achieve a truly trimmed string.

<script type="text/javascript">
$(document).ready(function() {
trimString = $('#div1').text();
var re = new RegExp(String.fromCharCode(160), "g");
trimString = jQuery.trim(trimString.replace(re, " "));
});
</script>

Duplicate Errors Using jquery.validate on Dynamic Forms

I have a form that clones a div upon clicking an add button. For validation I use the jquery.validate plugin. When the add button is clicked, I exectute the following to clear the errors.


validator.resetForm();

However, if inline errors are displayed before this being called, and then they are displayed again after the form is reset, the inline errors are displayed one time on the first div, two times on the second div, and so-forth.

The alleviate this issue I'm now destroying the error element.


validator.resetForm();
$('label.error').remove();

jQuery UI datepicker and Dynamic Forms

When implementing jQuery UI's datepicker in a dynamic form, you may notice that it will break as you bind it to new elements. The datepicker method adds a "hasDatepicker" class which must be removed first.

This example finds all the elements with a "datePicker" class and removes the "hasDatepicker" class from the element. It then calls the datepicker method and binds the .datePicker class again.


$('body').find(".datePicker").removeClass('hasDatepicker').datepicker();

Move Scripts To Bottom

Last night's jQuery Meetup was once again pretty awesome. Thanks again to BrightMix for hosting it and providing the Pizza and to Jonathan Sharp for making it all happen.

Andrew from Blue Cross Blue Shield presented on AJAX. He showed us his concept of building a global jQuery handler using a Namespace. This would allow other programmers in the organization and himself to skip all the repetitive programming. Some examples included a predefined spinner object and a global AJAX error handler. He'll post his example to the group and I'm sure I'll benefit from it in my projects.

One thing that caught my attention was with any larger JavaScript scripts you should consider moving the include to the bottom of the body tag. He explained this was so the page will load without hanging on scripts that must parse a lot of information. So I did a little research on this.

Remember Microsoft's Blue Screen of Death? Thank God I haven't seen this in a long time thanks to advancements in XP, Vista and 2007! Well, apparently there's a similar "White Screen of Death". This happens when the browser gets caught up in the JavaScript code for awhile before passing the content to the DOM. To avoid this move the script include to the bottom of the body tag. This will load the content into the DOM and then load things like the JavaScript and images.

The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. This is where CDN's (content delivery networks) come into place nicely. While your website is loading your content and images using only two parallel paths, a third path can be opened to load libraries such as jQuery, not to mention it may already be cached in the browser if they visited another site using the same CDN.

I've always been taught to include CSS and JavaScript in the head tag, but I never really looked into the reasons behind it. Technically they can be included almost anywhere in the page. In the case of CSS includes, what you get is the Style Sheet is loaded and then the content when the CSS is included in the head tag. So when the content is being displayed, it progressively styles the content instead of going back after it's all loaded and then style it causing some visual confusion.

Yahoo! Developer Network provides a great document titled "Best Practices for Speeding Up Your Web Site". there are 35 best practices in 7 categories including conent, server, cookie, CSS, JavaScript, Images, and Mobile.

One more thing I picked up on; and I know I've seen it before; is how to break up large string blocks in JavaScript. Consider the following:


$('div').append('<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul>');

Break it up into multiple lines for better code organization using the + sign:


$('div').append('<ul>'
+ '<li>item1</li>'
+ '<li>item2</li>'
+ '<li>item3</li>'
+ '<li>item4</li>'
+ '<li>item5</li>'
+ '<li>item6</li>'
+ '</ul>');

Removing a Select Option in IE using jQuery

I have a selection list, that once selected I would like to remove or disable the option choosen. However, at a later time I may want to add or enable it again.

There is a bug in Internet Explorer that does not allow you to use the .hide() method on an option. It works just find in other browsers of course.

Searching Google I've determined that if I want it hidden in IE, that I would have to use the .remove() method, which removes it from the DOM, store it in an array, and add it back in when needed. I thought this was overkill.

So I found a good solution. The attribute 'disabled' works in IE. Since the hide() method will silently fail, do both. Therefore the option will just not be choosable in IE, and it will disapear in other browsers.


<select>
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<a href="javascript:void(0);">add</a>

<script type="text/javascript">
//do this when the add link is clicked
$('a').click(function() {
//hide or disable the option
$('select :selected').attr('disabled','disabled').hide();
//reset the options back to the top
$('select').val('');
});
</script>

FCKEditor running ColdFusion Stops Working with FireFox 2010 Releases

FCKEditor will stop working with FireFox 3.5.7, 3.6 and future releases. There is a "Year 2010" bug that breaks the regular expression method they use to find what browser you are using. I found this in FCKEditor v.2.6.4.1. ColdFusion 8 and 9 appears to be okay, however I would double check them.

The issues lies in the file fckutils.cfm located in the FCKEditor root install directory. It checks for your useragent such as "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6".

The glitchy code can be found on line 47:


stResult = reFind( "gecko/(200[3-9][0-1][0-9][0-3][0-9])", sAgent, 1, true );

Replace this line with:


stResult = reFind( "gecko/(20[0-9][0-9][0-1][0-9][0-3][0-9])", sAgent, 1, true );

This will give the expression another 90 years of matching. You can also pass "checkBrowser=false" to the FCKEditor component to disable this check.

If you don't have a fckutils.cfm file, a similar line can be found in fckeditor.cfc.

Another "fix" is to upgrade to CKEditor as it's a Javascript only add-on.

Thanks to Pete Freitag for find a fix for this.

EXT JS Designer Preview Finally Released

Awhile back when Ext 3.0 was still being built, I saw a video of an Ext JS designer, which looked similar to Flex Builder. I've been waiting its arival ever since.

Today they released a preview version that allows you to experiment with the designer interface and to explore how configs affect your layout. They say soon you will be able to build your application components using base Ext components and Certified user Extensions. The application is an Air App making it platform independent if you have Adobe Air installed for Windows, Linux, or Mac.

[More]

jQuery with ColdFusion

I've been using the Ext Javascript Framework for awhile now and it's allowed me to present content in a bit more friendly manner. But lately I've been convinced to start into jQuery as well. I'll have the Learning jQuery 1.3 book on its way today too!

Today I ran into a jQuery presentation from the infamous Ray Camden. He presented online for the Connecticut ColdFusion User Group, Intro to jQuery with ColdFusion. He will be presenting an abbreviated version at CFUnited. Check it out here. It seems to be a little choppy, but you should get some usefull info from it with a ColdFusion perspective.

JavaScript Framework Survey

Lately I've been labeled the JavaScript guru around the office. I find that JavaScript Frameworks can make a website user's experience much better, and not too many people would disagree with that. I also tend to use Flex for the same reason. As of current, I extensively use ExtJS (which can replace many features of Flex). Before this, I used to use YUI and JQuery.

Recently Kyle Hayes posted a survey on his blog about JavaScript Frameworks and received over 600 responses. I thought that I would take the time to mention this as it provides some great insight into what other developers think. I hope you find this interesting:

http://www.kylehayes.info/blog/index.cfm/2009/03/29/Survey-Results-JavaScript-Frameworks/

Presentation on Ext using ColdFusion at NECFUG

I put on a presentation at the last Nebraska ColdFusion Users Group meeting. My presentation was recorded and is about an hour-and-half. The quality isn't all that great, so you can view the PowerPoint file here.

Video clips at Ustream

More Entries

BlogCFC was created by Raymond Camden. This blog is running version 5.9.1. Contact Blog Owner