jQuery metaData() Plugin Leverages data() Method (jQuery Plugin Example)

From what I understand, jQuery regularly takes community plugins and makes them part of the core library. This would probably be an easy in.

@Ben:

jQuery stores all of the data into the jQuery.cache key. You could just use the internal storage methods to get all the keys instead of wrapping up your own internal methods:

jQuery.fn.getAllData = function (){
// the jQuery.data(this[0]) should retrieve the cache key for an element
return jQuery.cache[ jQuery.data(this[0]) ];
}

I didn't test it, but a quick look of the source code this should be right. The $.data() function is supposed to return an element's cache key.

So, we're just returning the entire data cache with all keys.

@Ben:

And don't forget, if you mix in a closure with the apply() method from your earlier blog, you could just overwrite the default behavior:

// a closure
(function ($){
// make a copy of the original data method
$.fn._data = $.fn.data;

// extend data
$.fn.data = function (){
if( arguments.length ) return $.fn._data.apply(this, arguments);
else return jQuery.cache[jQuery.data( this.get( 0 ) )];
}
})(jquery)

Once again, not tested but the theory is sound.

However, you do always want to watch overriding functions in a library like this, since you never know when the internal methods might change or when your mod could break something else. This was more an example of what's possible.

After I posted my sample, I realized that I shouldn't have defined the copy of the $.fn.data() method in the $.fn namespace, but should have just used a local variable inside the closure.

The whole (function (){})() is just a JavaScript closure. Essentially you're creating a one time function that is immediately executed and whose variable definition is completely protected.

Take this example:

var x = "Dan"

alert(x);

(function (){
var x = "Ben";
alert(x);
})();

alert(x);

When you execute this code you'll get 3 alert boxes in a row that show up in this order:

"Dan"
"Ben"
"Dan"

The nice thing about closures is they garbage collect very nicely. Now closures aren't for everything, but they work very well when defining your own jQuery plug-ins because all your code is protect from mucking up the global namespace.

Here's an example of a closure in a real world example.

I was recently working on a legacy application that always requires a function called setPageSettings be available. This function is included in a library that's load on every page.

However, on some pages in the application, developers have already written a custom version of the function to handle logic on that specific page.

Since the global function we define on every page comes after the custom override, we need to make sure the browser only runs the code if the function doesn't exist.

In IE6 and Chrome, without the use of a closure, the following code doesn't work because it's in the global namespace.

/* only declare the setPageSettings function if it doesn't already exist */
if( !window.setPageSettings ){
/* we declare this in a closure, so IE6 and Chrome don't see the function unless we actually run the code */
(function (){
window.setPageSettings = function (f){
// logic here
}
})();
}

(FYI - On a completely non-related note, it doesn't seem like any of the checkboxes at the bottom of the comment entry are working for me (i.e. Remember my information, subscribe to entry, etc.) I'm not getting comments or the cookie set to remember my information.)

@Ben:

It's not holding for me in any browser. I've tried IE7 and FF3 under Vista x64. I would have thought it might be on my side (although I'm not having problems elsewhere) except for the fact that I'm not getting any e-mail notifications with the "Subscribe to entry" checked...

Test...

@Ben:

Yes, that worked fine. It's also now remember my information on this page.

Oops!

As soon as I submitted from the new page it erased my information.

A test post... (I want to view the XHR request.)

A test post... (I want to view the XHR request.)

@Ben:

Just an update. I still believe the issue may be on the server side of things--only because the "Subscribe to entry" option isn't working at all for me. The value is completely ignored.

I just checked the XHR request, and here's the data that was posted on my last comment (which you can delete:)

dax=blog%3A1518.commentapi&author_name=Dan+G.+Switzer%2C+II&author_email=dswitzer%40pengoworks.com&author_url=http%3A%2F%2Fblog.pengoworks.com%2F&content=A+test+post...+(I+want+to+view+the+XHR+request.)&remember_info=1&subscribe=1&send_copy=undefined

As you can see, the remember_info and subscribe are being passed to the page.

I'm seeing this as the response:
{"ERRORS":[],"SUCCESS":true,"DATA":16018}

So everything appears to process fine. It also does the window.location after the AJAX prompt.

Anyway, I just wanted to let you know the details from my end. I just find is highly suspect that the "Subscribe" flag isn't being honored (which leads me to believe it's on the server end of things.)

@Ben:

Another test. Also, just as an FYI--since the "Subscribe" isn't working, you might want to just send me e-mail directly (since I just keep coming back to the page and checking for new comments when I remember.)

Good news! Whatever changes you made, seem to have worked. At least the changes were remembered on last post. This is just another test. If I don't post again, you can assume all is well.

Ben,

I've been searching my brains out on Google trying to find out how to extend an existing jQuery plugin with new, unanticipated functionality and I have to admit it has been a frustrating experience.

This blog entry helps in some respects but doesn't quite clear it up for me.

I am trying to create a new plugin called 'sticky' that extends (inherits from?) jQuery UI dialog with one simple function...it alters (overrides?) the drag event to make the dialog visible and its relative position regardless of scrolling the page.

I think I need to save some data in the new plugin and I was thinking of putting in the new data area of each dialog selected as you've shown here. But I'm clueless as to how to override the drag event.

Any ideas / suggestions on how I would approach this?

Ben,

Whilst working on a project late in the night, I was possessed by not-quite-totally-on-topic urge to figure out more about .data().
I read your metadata() post, and was truly impressed with the effort and thought that went into digging under the hood of jquery to build .metadata().

But I had the nagging thought that there must be more to .data() than key/value pairs--and the jquery doc states that anything, not just simple values, can be stored--so I kept poking around until I found some examples of the techniques that can be used to access complex data structures stored in a .data() key.

And when I found them, I had the approximately 10,000th head-smacking "ooooh...it all makes perfect sense now that I've seen it" moment since I started computing (too) many years ago.

So, I'd like to share the following example of using .data() to create a collection within a key, assign key/value pairs, and then iterate over it:

//create data key with empty object
$(document).data('foo',{}) ;

//create shorthand access to the data key
var $dat = $(document).data('foo') ;

//assign arbitrary properties to the object in the data store
$dat.id = "fred" ;
$dat.status = "frenemy" ;
$dat.plans = "pie in face" ;

//iterate over the collection
var review = '' ;
for (key in $dat) {
review += key + ': ' + $dat[key] + '\n' ;
}
alert(review) ;

Thanks for everything that you do. If I tried to contribute as much as you do to the general pool, I'd never get *any* work done.