[jQuery] Function Optimization w/ jQuery
I've been reading the jQuery documentation and trying to improve this
function(well functions) and its siblings, however I'm running into
all sorts of syntactical errors when I make changes past this point.
For example, I know there is a better way to write this.elements
['activities[ActivitiesTab]'].value = ckd; or var radios =
document.forms['ActivitiesTab'].elements['activities[ActivitiesTab]'];
But the biggest issue is I know there are alternatives to statements I
make that can be much shorter and faster with jQuery, but any attempts
I make just seem to break it. Any insight into this issue would be
appreciated, thanks!
initActivityForms: function() {
var radios = document.forms['ActivitiesTab'].elements
['activities[ActivitiesTab]'];
$(actids).each(function(i) {
var fmName = 'ticketSearchForm' + actids[i].ucFirst();
var fm = document.forms[fmName];
$(radios[i]).click(function() {
$.bots.toggleASF(actids[i]);
});
$(fm).submit(function() {
$(radios).each(function(i) {
if (radios[i].checked) {
ckd = radios[i].value;
}
});
this.elements['activities[ActivitiesTab]'].value =
ckd;
});
});
radios[0].checked = true;
},
toggleASF: function(actid) {
$(actids).each(function(i) {
var obb = $('#' + actids[i]);
if (actid == actids[i]) {
$(obb).show();
} else {
$(obb).hide();
}
});
},
[jQuery] Converting javascript to a jquery plugin
Hi, I was asked to convert some javascript into a jquery plugin. I've
followed the documentation for authoring a plugin at
http://docs.jquery.com/Plugins/Authoring I've also followed other
instructions found on the web. Currently I have my code working with
respect to this, but largely the javascript code is still exactly the
same. I was wondering if there was more I could do with jQuery with
respect to this code.
here it is...
(function($) {
var tabHighlightClass = 'tabon';
var currentTab = 'hotel';
var currentLink;
var tF0 = new Array('dl0r', 'dl0o', 'dl0m');
var tF1 = new Array('al0r', 'al0o', 'al0m');
var tFields = new Array('tF0', 'tF1');
var txtFields = new Array(tF0, tF1);
var sF0 = new Array('numberOfAdults-hotel', 'numberOfAdults-package',
'adr', 'ado', 'adm');
var sF1 = new Array('numberOfChildren-hotel', 'numberOfChildren-
package', 'chr', 'cho', 'chm');
var sF2 = new Array('lir', 'lio', 'lim');
var sF3 = new Array('dt0r', 'dt0o', 'dt0m');
var selFields = new Array(sF0, sF1, sF2, sF3);
var sFields = new Array('sF0', 'sF1', 'sF2', 'sF3');
var fids = new Array('roundtrip', 'oneway', 'multiple');
var actids = new Array('popular', 'enter');
var tmp = '';
$.bots = {
showTab: function(o) {
if (currentTab) {
if (document.getElementById(currentTab)) {
document.getElementById(currentTab).style.display =
'none';
}
var b = currentLink.firstChild;
var ftype = b.src.substring(b.src.lastIndexOf('.'),
b.src.length);
b.src = b.src.replace('_o' + ftype, ftype);
}
var id = o.href.substring(o.href.lastIndexOf('#') + 1);
currentTab = id;
currentLink = o;
if (document.getElementById(id)) {
document.getElementById(id).style.display = 'block';
}
o.firstChild.src = o.firstChild.src.replace(ftype, '_o' + ftype);
},
initTabs: function() {
if (document.getElementById document.createTextNode) {
var n = document.getElementById('tbs');
var as = n.getElementsByTagName(a);
for (var i = 0; i as.length; i++) {
as[i].onclick = function() {
$.bots.showTab(this);
return false;
};
as[i].onfocus = function() {
this.blur();
};
if (i == 0)
currentLink = as[i];
}
if (document.getElementById(currentTab)) {
document.getElementById(currentTab).style.display =
'block';
}
}
},
tFieldsInit: function() {
var obj;
for (var i = 0; i txtFields.length; i++) {
for (var j = 0; j txtFields[i].length; j++) {
obj = document.getElementById(txtFields[i][j]);
if (obj)
obj.onblur = new Function($.bots.syncTxtFields( +
tFields[i] + ,
this.value));
}
}
for (i = 0; i selFields.length; i++) {
for (j = 0; j selFields[i].length; j++) {
obj = document.getElementById(selFields[i][j]);
if (obj)
obj.onchange = new
Function($.bots.syncSelFields( + sFields[i] +
, this.selectedIndex));
}
}
},
syncTxtFields: function(arr, value) {
for (var i = 0; i arr.length; i++) {
document.getElementById(arr[i]).value = value;
}
},
syncSelFields: function(arr, index) {
for (var i = 0; i arr.length; i++) {
document.getElementById(arr[i]).options[index].selected =
true;
}
},
setOpt: function(s) {
s.form.locationID.value = s.options[s.selectedIndex].value;
if (tmp s.options[s.selectedIndex].value == '')
s.form.locationID.value = tmp;
},
initFlightForms: function () {
var radios = document.forms['flightSearchType'].elements['flights
[flightSearchType]'];
for (var i = 0; i fids.length; i++) {
var fmName = 'flightSearchForm' + fids[i].ucFirst();
var fm = document.forms[fmName];
radios[i].onclick = new Function('$.bots.toggleFSF(' + fids
[i] + ')');
fm.onsubmit = function() {
for (i = 0; i radios.length; i++) {
if (radios[i].checked)
ckd = radios[i].value;
}
this.elements['flights[flightSearchType]'].value = ckd;
};
}
radios[0].checked = true;
},
initActivityForms: function () {
var radios = document.forms['ActivitiesTab'].elements['activities
[ActivitiesTab]'];
for (var i = 0; i actids.length; i++) {
var fmName = 'ticketSearchForm' + actids[i].ucFirst();
var fm = document.forms[fmName];
radios[i].onclick = new Function('$.bots.toggleASF(' + actids
[i] + ')');
fm.onsubmit = function() {
for (i = 0; i radios.length; i++) {
if (radios[i].checked)
ckd = radios[i].value;
}
[jQuery] Replacing document.getElementById()
Hi,
I'm trying change all instances of document.getElementById() with
the jQuery's DOM traversal syntax, however it breaks it everytime.
A simple example is this function:
rm: function(){
var m = document.getElementById('discountMonth');
if(m)
m.selectedIndex = 0;
}
If I change document.getElementById('discountMonth'); to $
('#discountMonth'); or any variation of that it breaks.(I tried
single and double quotes as well as attempting to get the element by
class and so forth with no luck).
The HTML looks like this select onchange=$.bots.rd();return false;
id=discountMonth name=deals[discountMonth]
class=input_deals_dropdownoption value=//select.
The more troublesome issue is with a function like this
rd: function (){
var ds = new Array('checkInDate-Deal', 'checkOutDate-Deal');
$(ds).each(function(i){
el = document.getElementById(ds[i]);
if(el)
el.value = 'mm/dd/';
});
}, ...
With the HTML looking like input type=text onblur=$.bots.rm
();return false; id=checkOutDate-Deal value=mm/dd/
name=checkOutDate class=input_deals/
Any help understanding jQuery's DOM traversal especially with regard
to array iterations would be much appreciated, thanks.
[jQuery] Writing a plugin
Hi,
I'm new to JQuery, but I need to convert some regular, working,
javascript code into a JQuery plugin. I'll need to expand on this
code once its in plugin form, but for now its just converting this
existing code into a working JQuery plugin. I've reviewed the
documentation on plugin authoring, but it doesnt give a lot of
examples.
I was hoping someone could show me how a snippet of my code would look
as a JQuery plugin to put me on the right track.
function initTabs() {
if (document.getElementById document.createTextNode) {
var n = document.getElementById('tbs');
var as = n.getElementsByTagName(a);
for (var i = 0; i as.length; i++) {
as[i].onclick = function() {
showTab(this);
return false;
};
as[i].onfocus = function() {
this.blur();
};
if (i == 0)
currentLink = as[i];
}
if (document.getElementById(currentTab)) {
document.getElementById(currentTab).style.display =
'block';
}
}
}
Thank you for your time.
[jQuery] Re: Writing a plugin
Oh no that function was just a snippet from something working well, im not writing this for tab functionality, but rather, for a reusable widget... I'm just wondering what this function would look like converted into jQuery as a reference for everything else involved. I arbitrarily selected that function for the example.
[jQuery] Re: Writing a plugin
oh wow, this was a nice comment someone left... helpful...
(function($) {
// Private Variables and Functions
var privateVariable = {};
function privateFunction() {
};
// Public Variables and Methods
$.namespace = {
options: {},
publicVariable: [];
publicMethod: function() {}
};
// Prototype Methods
$.fn.extend({
usernameMethod: function() {
return this.each(function() {
// Persistent Context Variables
this.contextVariable = 'foo';
}
}.
unusernameMethod: function() {
return this.each(function() {
delete this.contextVariable;
}
}
});
//Initialization Code
$(function() {
});
})(jQuery);
On Nov 21, 2:10 pm, Rik Lomas [EMAIL PROTECTED] wrote:
I found this to be the best example of how to structure a plug-in:
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
Rik
2008/11/21 Hector Virgen [EMAIL PROTECTED]:
You should take a look at jQuery's built-in tabs plugin. It may already do
what you're looking for.
http://docs.jquery.com/UI/Tabs
-Hector
On Fri, Nov 21, 2008 at 1:44 PM, halcyonandon [EMAIL PROTECTED] wrote:
Hi,
I'm new to JQuery, but I need to convert some regular, working,
javascript code into a JQuery plugin. I'll need to expand on this
code once its in plugin form, but for now its just converting this
existing code into a working JQuery plugin. I've reviewed the
documentation on plugin authoring, but it doesnt give a lot of
examples.
I was hoping someone could show me how a snippet of my code would look
as a JQuery plugin to put me on the right track.
function initTabs() {
if (document.getElementById document.createTextNode) {
var n = document.getElementById('tbs');
var as = n.getElementsByTagName(a);
for (var i = 0; i as.length; i++) {
as[i].onclick = function() {
showTab(this);
return false;
};
as[i].onfocus = function() {
this.blur();
};
if (i == 0)
currentLink = as[i];
}
if (document.getElementById(currentTab)) {
document.getElementById(currentTab).style.display =
'block';
}
}
}
Thank you for your time.
--
Rik Lomashttp://rikrikrik.com
