> "I have used Eric's inline javascript and a TW2.5.0 (with jQuery)
> I'm working through a book and thought I would try and add what I
> leaned to TW. "
>
> There is an error with 2.5.0 (beta 2) with inline javascript.
The problem is with the use of jQuery's $(...) function... here's why:
There are several popular JS libraries (and many other pieces of
custom-written code, including InlineJavascriptPlugin) that have
defined the $(...) function as an abbreviation for
document.getElementById(), in order to make the code more succinct and
a bit easier to read.
However, while jQuery also defines the $(...) function, their
implementation does much more than return a DOM element given an ID:
instead of using a simple element ID string as input and returning the
corresponding DOM element, jQuery's version of $(...) accepts a
complex 'selector' string as input, and returns a jQuery object that
can contain a *set* of matching DOM elements.
As a result, because the type of the object returned is no longer a
DOM element, attempts to reference the methods and attributes
associated with a standard DOM element cause a major problem for
anyone already using the simple 'abbreviation' definition of $(...).
For example, with jQuery present in the core, an existing inline
script that references $('someID').parentNode.style.display will throw
a fatal error because the jQuery-returned object does not have a
'parentNode' and thus cannot access the ".style.display", resulting in
the error the "has no properties" error message.
Fortunately, the folks at jQuery have recognized that this can be a
real 'show-stopper' and have provided a mechanism to avoid the
problem. Starting with TW250b2, the main() function immediately
invokes jQuery.noConflict(), right at the start. This prevents jQuery
from re-defining the $(...) function, so that other definitions of $
(...) (e.g., InlineJavascriptPlugin) will not be broken.
In order to use jQuery functions without the $(...) idiom, simply
substitute 'jQuery' for '$' in your code, like this:
-----------------
<script show>
jQuery(document).ready(function( ) {
jQuery('table.twtable tr:even').addClass('even');
jQuery('table.twtable tbody tr').mouseover(function(){
jQuery(this).addClass('highlight')
});
jQuery('table.twtable tbody tr').mouseout(function(){
jQuery(this).removeClass('highlight');
})
});
</script>
--------------------
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/TiddlyWikiDev?hl=en
-~----------~----~----~----~------~----~------~--~---
