In this post, we’ll be talking about the new Sys.get helper introduced by preview 6 of MS AJAX. Currently, the method can be used for getting a reference to a DOM element or a MS AJAX component and it exposes the following signature:
function get(selector, context)
- selector: generally, you’ll pass a string which identifies the element you want;
- context: used for limiting the search to a specific context. All contexts should expose a get method which can be used for getting the element;
Before going on, it’s important to keep in mind that this method will always return a reference to a single element (or null, if it can’t find at least one element that satisfies the passed criteria)!
For now, we’ll ignore the context parameter and will simply concentrate in the selector parameter. The passed in string can be in one of the following forms:
- $something: tries to get a reference to the component named something;
- #something: tries to get a reference to the DOM element with the ID something;
- .something: returns the first DOM element with the class something;
- something: returns the first DOM node named something (ie, it returns a reference for the first <something> found in the current context.
You may be thinking that this is a rather limited, especially if you compare it with, say, JQuery. Well,there are good news here! If you’re a JQuery fan,then you’ll be pleased to know that if you’ve loaded it then the Sys.get method will delegate the call in the jQuery method if the passed selector doesn’t match any of the rules presented in the previous list (for instance, passing something like “div span” ends up using JQuery if it has also been loaded in the page). I hate to repeat myself, but it’s important to recall that, even in this case, you’ll only get a reference to the first DOM node that satisfies that selector.
One additional note before seeing an example: if selector isn’t a string, it will be automatically returned from the Sys.get method invocation. Ok, lets see s really simple example:
Sys.get("$dv").get_selectedIndex()); alert("first DOM with css class: " +
Sys.get(".test").innerHTML); alert("first tagname: " +
Sys.get("li").innerHTML); alert("jquery returns first node: " +
Sys.get("li span").innerHTML); }); } </script>
The previous snippet illustrates several selector options:
- the reference to the DOM element used by the $addHandler method is obtained through the DOM ID selector (#);
- getting a component is really simple: we just need to indicate that through the $ symbol;
- getting the first element with a specific CSS class name depends on starting the selector string with a dot (.);
- since we’ve also loaded jquery (note the Sys.require call), we can also use more complex expressions. However, don’t forget that even though the expression might result in a JQuery object which wraps several DOM nodes, the Sys.get method will only return a single DOM element (the first one).
You’re probably expecting me to talk about that second parameter (context), but I’ll have to leave it for a future post because we still haven’t discussed how the DataView control uses contexts internally for rendering items (we’ve mentioned it when we started talking about templates and declarative/imperative approaches, but we still to discuss it more thoroughly for things to make sense).
Stay tuned for more in MS AJAX.