Some CSS and JS Shortcuts for getting web page elements/values that use prototype syntax:
$('elementclassname');
Allows you to get some element very quickly.
Examples:
var f = $('_Rpt'); - gets the report form _Rpt in the current document.
var pg = f['Rpt_PgNm']; - gets the Rpt_PgNm field on the form _Rpt.
var pgval = $(pg).getValue(); - gets the value of the field Rpt_PgNm.
Alternately, you could get the value with another shortcut $F:
var pgval = $F(pg); - this is equivalent to document.form.object.getValue.
That brings up the next $(element) ...
$(element);
Allows you to pass an already defined/set element/variable. You can also pass multiple items as an arbitrary number of arguments.
$w (stringobj); or $w('one two three');
splits a string into an array, treats whitespaces as delimiters.
$A (object);
allows us to take a DOM object collection and turn the individual object members into an array to act upon (e.g. show or hide).
Example: alldivs = $A (document.getElementsByTagName('div') );
Note: Since $A could contain arrays of things not objects, $A cannot manipulate the DOM elements returned, I see something like this done next:
alldivs.each(Element.hide);
$$('something');
This is a JS function that is not browser specific. It returns all page elements/values of 'something'.
Examples:
$$('p'); would return all paragraph tags.
$$('div.mydiv'); would return an divs with the class designation/name 'mydiv'.
$$('#navmenu a', 'footmenu a'); would return all the links in the elements navmenu and footmenu.
For CSS3 (version 1.51), my favorite examples are:
$$('table tbody > tr :nth-child(even)'); would allow you to format even rows differently than the rest (odd) ones.
$$('div:empty'); would give me all empty divs on the page.
Array Looping:
for (var index = 0; index < myArray.length; ++index) {
var curArrayItem = myArray[index];
// ... code ...
}
Is the same as:
myArray.each(function(curArrayItem) {
// ... code ...
}
Since the array has been turned into an object, it now has methods:
myArray.clear(); // clears array completely (empty)
newArray = myArray.clone(); // clones new array from myArray leaving original alone
myArray.compact(); // performs @Trim on array removing null/undefined values
myArray.each(); // allows you to iterate through the array in ascending direction
myArray.first(); // gets first array element's value
myArray.indexOf(somevalue); // gets the first occurrence of some value in the array. If not found, returns -1.
myArray.last(); // gets last array element's value.
myArray.reverse(); // reverses the array's elements so first is last and last is first ,etc. Do myArray.reverse(false) to not actually reverse the original array but generate a clone.
myArray.toJSON(); // converts the array to JSON format (new in 1.5.1)
myArray.uniq(); // does @Trim(@Unique on array removing duplicates.
myArray.without(values); // does a @Replace on the array removing values passed in if found in myArray.
Although not specific to this section, I see myArray.push(anotherArray), too. This is a JS method that adds elements from the anotherArray appending to the target myArray and returns the new length.
AJAX Handling:
AJAX calls are now much easier to setup. (I had a JS script since Domino 6 that did cross platform testing, so I'm not about to through out my existing working apps, but for new ones ... )
var myurl = "http://joshua.mindwatering.com/folder/app.nsf/somescript" // somescript is usually an agent.
var myAjax = new Ajax.Request(myurl, parameters,);
The parameters section looks a little complicated in real life:
var myAjax = new Ajax.Request(myurl, {
parameters: {
list1: $F('elementid'),
list2: $F('elementid2')
},
onSuccess: doSuccess,
onFailure: doFailureNotice
})
The onSuccess and onFailure point to functions to either process the data or do some kind of error notification/handling.
previous page
|