Making It Up As I Go Along - Javascript

jQuery AJAX get() function cached in IE

Sun, 30 May 2010 18:37:00 -0600

From the 'how the heck were we supposed to know this?' department, a little tidbit I'd like to share, perhaps saving some poor, frustrated developer from the same type of mystifying madness:

jQuery "get()" operations are cached in IE unless you pass in a unique URL !

By cached, I mean, you can have a remote page with a query or other function, which responds to a unique set of values being passed in, and it will work fine in Firefox, but in IE, you'll get the same results from the remote page, even if the response is unique (like query results that have changed, for the same record), unless the values you are passing in via get() are also unique (i.e. you haven't looked up that particular record yet).

So, before you go banging your head on the floor and screaming out 'why oh why can't i find the problem, let alone the solution?!?' (not that i would ever do that), read this post, which i found via a quick Google search for 'jquery get IE cache' : http://www.sitecrafting.com/blog/ajax-ie-caching-issues/

I only had the presence of mind to run that search once i got my ajax results to display as an alert on the calling page, and deduced that the displayed content was based on the first values passed in, while all other updates and requests were ignored.

The fix, as that post suggests, is to create a unique url. In this case, i use javascript to append a random number to my function, - in this case, I just use javascript to create a random number right inline, then add that as a meaningles url variable to the page in the get() function:

                           // set up unique url
                            var randomNo = Math.floor(Math.random()*9999999);
                            var urlStr = 'journalLookup.cfm?r=' + randomNo;
                            // run get function using randomized URL
                            $.get(urlStr,{jdate:dateLookup}, function(data){ .... [ function here ]

If this saves you some aggravation, let me know in the comments ... maybe i'll feel better about the time i just wasted chasing this mystery 'feature' in IE!!

New TinyMCE lets you paste as plain text automatically

Thu, 07 Jan 2010 02:13:00 -0600

When building web applications, one of the most common functions involves allowing a site administrator to add or edit content on a page via some sort of 'wysiwyg' (what you see is what you get) editor. My tool of choice for this purpose is the very versatile, relatively light TinyMCE ( tinymce.moxiecode.com)

As great as these tools are, it is inevitable that the average site administrator will want to copy and paste some text from a word processing function like MS Word or WordPerfect, both of which add invisible formatting to the copy-and-pasted text, which in turn can really mess up even the best of web designs.

TinyMCE has had a very nice 'paste from word' plugin for as long as I can remember, but it still requires the user to click a tiny icon for the 'paste from word' popup, and then paste their text into that. ( There is also a 'paste as plain text' option which removes all formatting just as if you'd copied into notepad first, then pasted into the web form). So, even with these great options, I still find myself answering more than a few support calls related to text not looking quite like it should (or worse) when copying from Word.

Much to my delight, I've found a much better solution - the newest version of TinyMCE has the "paste" plugin built in, and it now includes options for cleaning up the text automatically when pasting right into the main text box (without needing to use the littlepopup icons).

As seen on the paste plugin page (TinyMCE:Plugins/paste - Moxiecode Documentation Wiki) you simply need to include 'paste' in the list of plugins when initializing the tinyMCE script, and then can call the cleanup options like this:

paste_auto_cleanup_on_paste : true,
            paste_remove_styles: true,
            paste_remove_styles_if_webkit: true,
            paste_strip_class_attributes: true,

This runs the 'paste from word' function automatically, then removes any remaining inline style and class attributes , leaving you with nice clean paragraph-formatted html.

so, whether your clients remember to use that little button or not, whatever they paste (via ctrl+v on their keyboards) will be stripped clean, ready to be shown in pristine valid html format on your site.

How to show changed input and select fields with jQuery

Thu, 10 Dec 2009 04:16:00 -0600

Here are a few quick easy jquery functions that will add a class of 'changed' to any input or select box if it is changed, and will remove that class if the value is reset to the default.



		// inputs
		$('form.myForm :input').change(function(){
		var defval = $(this)[0].defaultValue;
		if ($(this).val()!=defval){
			$(this).addClass('changed');
		} else {
		 	$(this).removeClass('changed');
		}
		}).keyup(function(){
		 	$(this).trigger('change');
		});

		// select boxes
		$('form.myForm select').change(function(){
		var defval = $(this).find('option[defaultSelected=true]').val();
		if ($(this).val()!=defval){
			$(this).addClass('changed');
		} else {
		 	$(this).removeClass('changed');
		}
		}).keyup(function(){
		 	$(this).trigger('change');
		});

Note in both cases we use keyup (onkeyup) to trigger the 'change' event. This allows the browser to show the changed class as soon as the user changes the value using a keyboard, rather than 'onblur'.

Javascript How To: Add a Number of Days to a Date

Wed, 11 Nov 2009 13:29:00 -0600

I have a form where a user can input a date in the format mm/dd/yyyy, and we need to add an 'expiration date' that is 30 days from the date entered, regardless of calendar month, leap years, or other complex calculations. Thankfully, javascript already has the 'setDate()' function built in. We just have to parse the date object (a full javascript formatted date string) out of the given form input ( e.g. '11/10/2009'). Easy enough - first we parse out the numeric date/time object, and in this example, write it to the screen. Then, we add 30 days (the number of days can be changed in the setting for the 'interval' variable - use a negative number to remove days) Again, this example simply writes the date to the screen. In the current usage, I will use that date value to populate another text input in the same form as the initial date being entered.

Example usage on a form input:

jQuery Cycle slideshow demo with next/back/paging links

Thu, 29 Oct 2009 11:53:00 -0600

This demo uses some of the advanced features of the jQuery Cycle plugin to create a mixed content slideshow (html/text/images) with a visual navigation bar, and next/back arrows In this setup, the slideshow advances automatically, until somebody clicks one of the links, which stops the automatic action and allows the user to control the advancement of the slides. The Cycle plugin allows for pausing, resuming or stopping the slideshow with a simple click action. See the demo (includes css/jquery code for easy reuse) http://www.gowestwebdesign.com/demos/jquery-cycle-gallery-next-back-paging/ Thanks to Mike Alsup for the versatile Cycle plugin: http://www.malsup.com/jquery/cycle/ Feel free to use the code for any purpose, and please drop me a comment or link to check out your work. As always, comments/suggestions/fixes are welcome.

Replace missing images sitewide with jQuery and ColdFusion

Wed, 08 Jul 2009 00:03:00 -0600

In my application.cfc, within the 'onRequestStart' function, I have a variable defined for the replacement image to use in my site. Then, in an include that puts special goodies into the head of every generated html page sitewide, I have this bit of cf code

This checks to make sure the 'error' image actually exists - if not, we just use a blank '' value. (Note: request.thisDir is my own global variable that references the root of the site - you can replace that with any hardcoded or dynamic url) Then, write a simple function to replace any images - this duplicates a similar usage of the tag's 'onerror' attribute ( which is fine for images in non-strict doctypes, but is not entirely valid ).

That's it. Also notice I am clearing the 'alt' attribute as a final precaution. Using this method, any missing image anywhere within the html will simply be 'blanked out'. I could use jQuery's .remove() function, to remove a missing image completely from the DOM, but there are times when I want the space or layout to be preserved, and really, I don't want errant images in my pages at all, so this gives me a way to debug if I find my self (inevitably) scratching my head when a missing image simply 'vanishes' from the page 4 or 5 sites from now. As a final note, the CF part of this, setting the value for the 'src' attribute, can be enhanced to include different images for different pages, or under different conditions. Likewise, the jQuery function could be expanded to target images in one location with a specific action, and in another with a separate function by using different css selectors. Just another example of how Jquery + CF = bliss :-)

Remove missing images (and parent elements) using jQuery

Tue, 23 Jun 2009 16:04:00 -0600

My client has an auto dealership site where inventory images are pulled remotely, i.e. 'hotlinked', from the inventory service's website. The client asked me to create a slideshow of inventory images on the home page - no problem using jQuery cycle() plugin - but there's one hangup: some of the images don't exist! Easy enough to remove the images ( <img onerror="this.style.display = 'none'"> ) , but these images are dynamically linked, and contained in an unordered list. So, even if I remove the errant images with an inline attribute, I still have this empty 'a' and 'li' hanging around.

Using a single line of jQuery code, I whipped up this super-quick solution:

// find all missing images
$('#slideshowWrap img').error(function(){

// hide the image, then remove the parent element from the DOM
$(this).hide().parents('a').parents('li').remove();

// uncomment line below to see the script at work
//alert('hidden: ' + $(this).attr('src'));

});

// end jquery
});
</script>

The parents('a') could become parents('p') or whatever is needed to get rid of the containing element.

Maybe the 'hide()' combined with 'remove()' is redundant.... but I like it.

That 'alert' line, if uncommented, will alert you to the src of each missing image for testing.

jQuery validate() plugin, IE6, simple solution

Tue, 02 Jun 2009 23:39:00 -0600

I have been using the jQuery validate plugin for just about every form I've created in the past year or more. Easy, robust, beautiful stuff by world-class jQuery coder Jörn Zaefferer ( plugin page ) ... if you haven't checked it out yet, please do!

Anyway, tonight I had (yet another) strange thing happen in IE6 - basically, nothing was happening. The form i was working on was able to submit in IE6 as if javascript was disabled - no errors, no message, nothing. As usual, everything was fine in Firefox (firebug) and IE7, and I was stumped as only IE6 can stump me... then, thanks to Google, I found this thread: http://groups.google.com/group/jquery-en/browse_thread/thread/843bc94ffef99250

Apparently there is something in the packed version of the validation file (jquery.validate.pack.js) that IE6 does not like. The solution? Don't use the packed version! Takes up a little more bandwidth but at least it works in all browsers.

Now - how much longer do we have to keep caring about IE6? (In this case, the offending browser is on the client's computer, so I have to play nice as much as possible...)

Firefox: select onChange() when using keyboard - a solution

Wed, 22 Apr 2009 00:19:00 -0600

Working on a CartWeaver site, modifying part of the routine whereby different prices are shown on the page when selecting various options from a dropdown list on the product details page, I noticed that in Firefox, the 'onchange' event of the select list only fires if using a mouse, or when tabbing out of the select box using the keyboard ( select list loses focus).

I guess it's always been this way, I just haven't noticed until now. Fortunately there is a very easy fix - append the 'losing of focus' to the 'onkeyup' event, so that either keyboard or mouse have the same effect, causing the browser to register the 'change'.

Original select list is like this:

Adding just a bit of code for the onkeyup, like so:

we now have a list that loses then regains focus everytime a key is pressed (while it has focus), i.e. using the keyboard to move up or down through the options now triggers a split-second loss and regaining of focus, which is enough to trigger the 'onchange()' in firefox. I love a good easy fix!

Thanks to Sanket Vasa for the tip

CF Gallery Creator & jQuery Slider Gallery !New and Improved!

Sat, 11 Apr 2009 20:57:00 -0600

Still a work in progress, I have fixed a few small things and added better setup notes for the CF Gallery Creator and jQuery Slider Gallery (click for explanation in previous post)

The new code is available as a zip file, attached ** see below **

This package contains

1) a custom ColdFusion image gallery generator, which will create thumbnails and large images of any size you specify from a folder containing your original images, and outputs them to the page in a nice unordered list html markup.

Includes options for multiple subfolders, each one a separate 'gallery' with thumbnail or dropdown navigation.

2) a simply but effective 'slider gallery' built on css and jQuery. Example here:

http://www.gowestweb.com/cfdev/_tags/gallery/slidergallery.cfm?gallery=some-gallery-name

( Without the jQuery and css, the raw markup from the CF tag alone looks like this
http://www.gowestweb.com/cfdev/_tags/gallery/gallerypage.cfm?gallery=some-gallery-name

As usual this was built to meet a specific need for a client project and has been tweaked and adjusted along the way.

Please DO try it out, and let me know if/when you use it.
Comments, enhancements and suggestions welcome!

Some alternatives to Adobe NNTP Newsgroups

Fri, 03 Apr 2009 16:32:00 -0600

As many dedicated web developers mourn the passing of the NNTP interface for Adobe's support forums ( formerly nntp://forums.adobe.com ), I'd like to extend a hearty welcome, inviting all web developers, friends and interested cohorts to join myself and a number of other seasoned web professionals in some popular NNTP-friendly alternative hangouts.

http://www.miuaiga.com/page.cfm/Web-Developer-Newsgroups

In addition to general web developer newsgroups, there are some specialized groups for ColdFusion, javascript (ok, mostly jQuery), all three flavors of CartWeaver (E-commerce) and more.

Every one of the newsgroups listed on the page above is happy to welcome new and interesting contributors, the more the merrier. You may even discover some old friends among the archived threads.

NOTE: If you are not currently using NNTP to interact with other web-folks online, you've been missing out! I recommend Mozilla Thunderbird, and an account at each one of the places listed. See you there!

---

In regards to the big switch, the Adobe Dreamweaver support forum says this:

ANNOUNCEMENT: Forums will be unavailable for planned system maintenance
starting at 3pm PST on April 3, 2009. New forums will be online on
Monday April 6, 2009.

( currently April 3, 1:35 Pacific time ... T-minus 90 minutes )

jQuery noSpam email address protector now works with euro domains! (two dots)

Fri, 20 Mar 2009 12:07:00 -0600

Need to show an email address on the web?
You have a few options:

1) create a standard "mailto:" link and enjoy an endless flow of vi@gR&! ads and invitiations for massive funds transfers from far away lands

2) use an email obfuscator!

My favorite email address obfuscator by far is the jQuery noSpam plugin by Mike Branski.
This jQuery plugin turns an obfuscated e-mail address into a human-readable one.

Now supports multiple dots (.) both before and after the at (@) sign!

While the simplicity and smoothness of this little script has always been top-notch, it has just been made even better by allowing the use of euro-style domains, such as " user@domain.co.uk " in addition to standard 'single dot' extensions.

To use this plugin, include jquery.nospam.js and call the nospam() method. No Spam automatically detects if your matched element is a link. If so, it checks the rel attributes for the obfuscated e-mail addresses. For all other elements, it uses the text between the matched tags.

Examples and further instructions are at http://www.leftrightdesigns.com/library/jquery/nospam/

jQuery : find empty select boxes (or selects with a specific value)

Thu, 12 Feb 2009 01:37:00 -0600

Another super short jQuery solution to a super long late-night quest on my part.

I have a form with a variable number of select boxes. Before the form can be submitted, I need to verify that there are no selections left unchanged.

The select boxes start out with a default value of '' (empty quotes). To search for them , i was using all sorts of variations on jquery 'val()', but that is more useful for setting a value than finding a select with a value. After a few various connotations... here's the one that works:

var valCt = $('select.colorselect[value=""]').size();

This finds all selects with the class of 'colorselect' and the value of '', and returns the size, which in jQuery talk means 'how many'. If I have 3 unchanged select boxes, valCt will equal '3'.

From there it is an easy hop to add a check to the submit action of my form, checking to make sure valCt is 0.

if (!(valCt == 0)) {
return false
} else [ ... submit form here ... ]

Adding Twitter Tweetbacks to BlogCFC - find out if your posts get tweeted!

Tue, 20 Jan 2009 23:03:00 -0600

Thanks very much to Rey Bango for the excellent, easy BlogCFC instructions, and to Dan Zarella for the javascript that makes it go.

The post with full 'how to' is here, on Rey's site:
http://www.reybango.com/index.cfm/2009/1/20/Adding-TweetBacks-to-BlogCFC

I just love the cf community... and twitter!

== == ==

UPDATE:

The new improved version is here:
http://www.reybango.com/index.cfm/2009/1/23/TweetBacks--BlogCFC--A-BIG-Update-Major-Speed-Improvement

Thanks also to Adam Tuttle for the cool sweettweets cfc!

Mobile jQuery Cheat Sheet

Sun, 11 Jan 2009 02:13:00 -0600

http://colorcharge.com/jquery/

made for iPhone/iTouch but works great on my blackberry in Opera mobile. Unlike most of the things I bookmark on my mobile, I can actually see using this one.

here's the actual URL, click this link in your mobile browser:
http://labs.colorcharge.com/jtouch/