Help I'm stuck, creating the most basic extension
Hi I need some help making a simple jQuery extension.
I like the way you can use jQuery without any javascript in the HTML. I do this by creating keywords for class names that fire up some jQuery code. Sometimes I want to pass some data and in anchor I use the rel or otherwise the title. But sometimes the rel attribute is unavailable and you dont want the data to show as a title. So I'm passing this data as a extra class name. for instance
-
<input name="test" class="jSubmitOnUpdate jData:nameOfTheForm" />
. It's not the nicest example as I can easily check the form in which it recides.
This jQuery code is what is fired by the class names (also just to illustrate, but it also works):
-
// SUBMITONUPDATE: submits the form defined in rel when the field is updated
$('.jSubmitOnUpdate[class*="jData:"]').change( function(event) {
var arrayOfClasses = $(this).attr('class').split(' ');
for (var key in arrayOfClasses) {
if (arrayOfClasses[key].indexOf('jData:') >= 0) {
// Get data
var data = arrayOfClasses[key].replace('jData:','');
break;
}
$(data).submit();
}
});
What I want to do is build a small reusable extension for jQuery that gets my data when I pass it, like this.
-
$('.jSubmitOnUpdate[class*="jData:"]').change( function(event) {
var data = $(this).jData();
$(data).submit();
});
I read some article on how to build one and made this:
-
// jQuery extension: jData
(function($){
$.fn.extend({
jData: function() {
var arrayOfClasses = $(this).attr('class').split(' ');
for (var key in arrayOfClasses) {
if (arrayOfClasses[key].indexOf('jData:') >= 0) {
// Get data
var data = arrayOfClasses[key].replace('jData:','');
return data;
}
}
}
});
})(jQuery);
But I also read abot passing back the jquery object....and there's where I got stuck...so, please...Help, I'm stuck!
