You are free to copy, distribute, transmit, and remix this work, provided you attribute the work to Rebecca Murphey as the original author and reference the GitHub repository for the work. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. Any of the above conditions can be waived if you get permission from the copyright holder. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to the license.

Seriously, that’s a lot of flexibility and she’s even set it up in a nicely package Github repo for easy access. I looked it over and this does a great job of covering the basics of jQuery.

If you use her materials, definitely give her, at the very least, a shout-out during your training. She deserves it.

I’m going to add this to my list of awesome web development resources since this is golden.

Thanks for the putting this out there, Rebecca!

Related posts:

1. Internet Explorer 9 Will Support the Open Source VP8 Video Codec I was watching the Google I/O keynote and was floored...
2. Video Interviews Part 2 – Nicholas Zakas, Principal Front-end Engineer at Yahoo! on jQuery Performance and Menno van Slooten on his Automated UI Testing Framework for jQuery I got some more videos edited and uploaded for you...
3. jQuery Still Amazes Me After 3 Years I have some downtime at the moment so I wanted...

Related posts brought to you by Yet Another Related Posts Plugin.

Paul Irish is a crazy dude but also incredibly involved in jQuery and web standards development. He’s one of the newest members of the jQuery team and I sat down to chat with him:

Related posts:

1. Video Interviews Part 2 – Nicholas Zakas, Principal Front-end Engineer at Yahoo! on jQuery Performance and Menno van Slooten on his Automated UI Testing Framework for jQuery I got some more videos edited and uploaded for you...
2. Video Interview with the Yahoo UI JavaScript Library Team Last Friday I got a chance to visit the Yahoo!...
3. Video Interviews Part 1 – Steve Souders, Google’s Performance Evangelist Talks Performance and Mobile & Yahoo!’s Gonzalo Cordero Discusses BayJax During the jQuery conference in Mountain View, I got a...

Related posts brought to you by Yet Another Related Posts Plugin.

Persistent Session Variables in JavaScript

After searching quite a bit, I finally found a solution that worked like a charm. Thomas Frank had created a library called Sessvars.js that leveraged the window.name attribute. The reason for using window.name is that values stored in it persist across page views making it ideal for my needs. The one caveat is that it can only store a string value which at first seemed to throw a wrench in my plans. I needed to store complex data, not just strings. Thankfully, Thomas had come up with a novel way of dealing with this by building a JSON stringifier which serializes and deserializes object data. This allowed me to create a complex data store that could then be converted to a string on the fly. Loved it!

What I did was grab the file name and used that as a key value to identify the specific information for that page. So my object would look something like this:

{ "page1.html" : { "form" : { "wrapper" : "#search-box",
							  "hash" = "field1=foo&field2=21&field3=Mike" } },
	  		     "callback" : "resetWrapper" },
{ "page2.html" : { "form" : { "wrapper" : "#adv-search-box",
							  "hash" = "field21=red&field22=blue&field56=February" } }
	  		     "callback" : "resetWrapper" },
{...
}

The benefit of this is that it allowed me total flexibility in storing not only the affected form fields for that specific page as well as allowing for unique form field names on a page by page basis. I could also nest the data as deep as I wanted (i.e.: object within object).

Actually storing that data was extremely easy. I simply defined Sessvars.js in my document:

<script type="text/javascript" src="sessionvars.js"></script>

and then stored my data into a property that I created in the default sessvars object:

sessvars.myObj = { "page1.html" : { "form" : { "wrapper" : "#search-box",
							  "hash" = "field1=foo&field2=21&field3=Mike" } },
	  		     "callback" : "resetWrapper" },
{ "page2.html" : { "form" : { "wrapper" : "#adv-search-box",
							  "hash" = "field21=red&field22=blue&field56=February" } }
	  		     "callback" : "resetWrapper" },
{...
};

The library attaches a method to the window’s unload event which automatically handles the stringification of the JSON data once you leave the page so basically assigning the value is all I needed to do to persist the data.

Restoring the Page

The great thing about Sessvars.js is that when a page is loaded, it immediately restores the persistent data making it immediately accessible to your scripts. We were using jQuery on this project so I created a method that would determine the current page, search through my sessvars persistent data and if it found a key, reload the form with the user’s values as well as re-run any previous JSONP calls to ensure the results were populated. I added the method in $(document).ready() to ensure it got called on every page load:

myApp.state = (function(){
	return ({

		resetForm : function( key ) {
			if (sessvars.myApp.state[key]) {
			    var o = {};
			    var queryString = decodeURIComponent( sessvars.myApp.state[key].form.hash );
			    var wrapperEle = "", formEle= "", vals = "";

			    queryString.replace(/([^=]+)\=([^&]+)&?/ig, function(item, a, b){
			    	a = a.replace( /\&/g, " ");
			    	b = b.replace( /\+/g, " ");
			    	if (o[a] && typeof o[a] !== "object") {
						o[a] = o[a] + "," + b;
					} else {
						o[a] = b;
					}
				});	 		    

	    		wrapperEle = $( sessvars.myApp.state[key].form.wrapper );

		    	for (var index in o) {
			   		vals = o[index].split( "," );

			   		formEle = wrapperEle.find("input[name=" + index + "], select[name=" + index + "]");

			   		if (formEle.length > 0) {

				   		if (formEle[0].tagName == "INPUT" && (formEle[0].type == "checkbox" || formEle[0].type == "radio")){
				   			formEle.attr( "checked", "");
				   			for (var i=0; i < vals.length; i++) {

				   	   			if (index == "accordianSet") {
					   	   			wrapperEle.find("input[name=" + index + "][value=" + vals[i] + "]").trigger( "click" );
				   	   			} else {
									wrapperEle.find("input[name=" + index + "][value=" + vals[i] + "]").attr( "checked", "true" );
				   	   			}

				   			}
				   		} else {
				   			formEle.val( o[index] );
						}

					}
				}
    		}
		},
		resetPage : function( key ) {

			if (sessvars.myObj.state[key]) {
				this.resetForm( key );
			}

			.... call various other methods to reset the page ....

		});

}());

$(document).ready( function(){
	myApp.state.resetPage( myApp.utils.getPageName() );
});

The result is that the search forms would get repopulated with the previously entered values and and the JSONP call re-run based on these new values. It worked exactly like we needed it.

Closing Thoughts

Using Sessvars.js definitely helped us out of a jam. After looking at a number of back-button solutions and even updating window.location, this turned out to be the best solution for our needs due to the dynamic nature of every page. The other takeaway is that using window.name safely affords you about 2mb of data storage. I say this because of the testing that Thomas did. In his research he found the following:

IE7 gave up at 32 Mb with a “out of memory” error. Firefox gave up at 32-64 Mb -sometimes crashed there about – otherwise threw an “out of memory” error.Safari gave up at 64 Mb and crashed. Opera has a limit built in (wise) and gave up after 2 Mb, throwing the error “Object to large (implementation limit.)”

I’ve not tested this out in newer versions of the browser so I can’t say if these limits are still set but for this project, 2mb was more than enough for our needs.

Update:

Since posting this I’ve been sent two other JS-based storage solutions which are definitely worth looking at:

Storage Pollyfiller by insanely talented developer Remy Sharp
LawnChair by uber-JS ninja Brian Leroux

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

My youngest brother already sent me a text message this morning with a simple “I miss him” but simple as it may be, a text message on the phone, I know what he’s feeling on the other side of that line because I’m feeling the same way. I know my brother Rick is also down. I don’t need to ask him. I just know because he was taking care of my dad till his final days. Today is a tough day for him too.

Dad, we miss you so much but we know you’re better off now. A couple of things that I would’ve given you today:

A bottle of Jovan, your favorite cologne. As much as we tried to get you to switch to something cooler, you loved your Jovan:

Kisses and hugs from your 8 grandchildren (yep even the one that’s coming soon from Rick & Cindy):

Another day in North Carolina:

More time being harassed by your sons:

Enchilado de Langosta:

Most of all, I would’ve given you more time with Mom:

I hope you’re celebrating your butt off today, Dad. Without you, we wouldn’t be here and I appreciate you giving me life. Happy birthday.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

So yesterday, out of the blue, I get a phone call Mike Paulus, NewEgg’s Customer Service Operational Support Manager, as well as Kerrigan Hodnett, a director at NewEgg. Woah! Quite unexpected!

We talked for about 20 minutes during which both were very apologetic for the service I had received and the lack of attention to my concerns. What struck me was that they took the time to look me up in their database to get my contact info, read through my chat transcript with the rep (ensuring they had a complete picture) and actually called me to ensure that my concerns were addressed and to let me know that they valued me as a customer. I didn’t ask them to do it. I didn’t request to speak to a manager. They just did it!

This is really what customer service is about and I can’t remember the last time a company, especially the size of NewEgg, took the time to reach out to me about a problem. I’m still very much astonished by this but I’m very thankful that Mike & Kerrigan took the time to contact me. It really does speak volumes about the type of business that NewEgg is & how they care for their customers.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The fact that the box was all messed up, while not a good situation, didn’t really concern me because NewEgg always does a great job of packing stuff to prevent damage. They also have very good customer service so if something got lost, I’m sure they would’ve replaced it.

What did bother me was the following:

That is just a terrible packing job and in my opinion is a sign of pure laziness. How the heck would anyone feel it’s okay to stick in a bunch of packing, lay the ordered product on the top of it and just close the box?! That’s a recipe for disaster. Having worked at UPS when I was younger, I know how packages are handled and that is NOT the best way to ensure something goes undamaged. Very disappointing.

When I spoke to a customer service rep about all of this, I have to say that I just got the feeling that it wasn’t a concern to them. She did offer me a $5 credit but really wasn’t interested in getting the pics that I took until I pressed her on it.

I just hope this isn’t a sign of things to come since it’s one of my favorite sites to purchase equipment from.

Update: I received a call from NewEgg the next day and they’ve totally redeemed themselves.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

A cool thing that's happened of late is that jQuery has started to find it's way into the toolboxes of CF developers with no prodding at all. Basically, they've heard how great jQuery is, took it for a test run and are now hooked, the most recent being Ray Camden & Dan Vega.

This is very exciting to me as it demonstrates jQuery's continued growth and acceptance in the development world. Everyday I find new sites that are leveraging jQuery to add amazing functionality for their users and seeing CF developers adding to that is truly awesome.

If you want to learn more about the jQuery project, here is a great list of resources that I've compiled:

jQuery Current Version: v1.2.6

jQuery Main Site:

http://jquery.com/

jQuery UI Effects & UI Library Main Site:

http://ui.jquery.com/

The compressed & uncompressed code:

http://code.google.com/p/jqueryjs/downloads/list

SVN Info:

http://code.google.com/p/jqueryjs/source

Plugins & UI Widgets/Controls:

http://plugins.jquery.com/

Documentation:

http://docs.jquery.com/Main_Page

http://remysharp.com/jquery-api/

http://jquery.bassistance.de/api-browser/

Mailing Lists- jQuery Support, community news:

http://groups.google.com/group/jquery-en

Project Blog:

http://jquery.com/blog/

Learning Resources:

http://docs.jquery.com/Tutorials

http://www.learningjquery.com/

http://15daysofjquery.com/

Sites Using jQuery:

http://docs.jquery.com/Sites_Using_jQuery

Twitter accounts for the latest jQuery and jQuery UI news:
http://twitter.com/jquery

http://twitter.com/jqueryui

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

• Fixed various overflow/scroll issues related to form fields and grid
• Workaround included for the Firefox 2.0/Mac overflow:auto invisible scrollbar bug
• Fixed several issues related to destroying form elements
• Multiple GridView and GroupingView fixes
• Various other minor bug fixes and documentation updates

For complete details on what's changed, please have a look at the 2.0.1 release notes. We encourage all Ext 2.0 users to upgrade to 2.0.1 at your earliest convenience.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.