DOMAssistant 2.5.5 released, with improved event handling, replaceClass and end methods

I have just released DOMAssistant 2.5.5, which contains some very useful features and improvements, and a CSS selector bug fix.

What’s new?

Better event handling

The most major improvements has been optimizing event handling, and making the syntax even easier and understandable. The new features are:

Supporting return false

It is very common to apply events to links and override their default linking behavior. Before you have always had to call the preventDefault method to stop the link from navigating to another page. However, now you can just use return false at the end of your event handling function to stop the default behavior. Example:

$("a.read-more").addEvent("click", readMore);
function readMore(evt) {
	// Do something crazy, like an AJAX call
	return false;
}

Note: this goes for all events on all kinds of element. Links are only used here to exemplify it.

eventTarget for a reference to where the event occurred

If you have, for instance, a navigation menu with lots of links where you want to apply events, it is much simpler and better for performance to apply the event to the parent element to all the links and then reference what element the event actually occurred on to read specific values. This is ok:

// Lots of events applied
$("#navigation a").addEvent("click", handleNavigationClick);
function handleNavigationClick(evt) {
	// The this keyword will refer to the actual link	
	return false;
}

But this is much more optimal:

// Just one event applied
$("#navigation").addEvent("click", handleNavigationClick);
function handleNavigationClick(evt) {
	// The this keyword will refer to the navigation container
	// The eventTarget property will refer to the actual link
	var linkHref = evt.eventTarget.getAttribute("href");
	return false;
}

Easier syntax for preventDefault and cancelBubble

What I want to get away from is having to actually specify the DOMAssistant name in the call when you prevent or cancel the bubbling of events. Now those methods are also made available on every element. Like this:

$("a.read-more").addEvent("click", readMore);
function readMore(evt) {
	// The new easier way
	$(this).preventDefault(evt);
	$(this).cancelBubble(evt);
	
	// The old way, which is still supported
	DOMAssistant.Events.preventDefault(evt);
	DOMAssistant.Events.cancelBubble(evt);
}

replaceClass metod added

A replaceClass has been added, to replace an existing CSS class on an element with another. Example:

$("em.info").replaceClass("active", "hidden");

end method

There are times when you want to select a set of nodes, do some operation on them, and then have the need to return to the previous context. Therefore, the end method has been added for those into chaining syntax:

$("#content").create("p", {
	id: "dynamic-addition"
}, true, "Some dynamic content").end().addClass("content-added");

Let’s break that down for you: what happpened was that initially the content element was referred to, then a p element was created and added to the content element, which put the new p as the current context. After that, I wanted to refer the parent content element instead, so I used the end method to go back one step in the chain.

This of course works in as many steps as you’d like:

$("#content").create("p", {
	id: "dynamic-addition"
}, true, "Some dynamic content").create("em").end().end().addClass("content-added");

post method added to the AJAX module

I’ve also implemented a long-requested post method for the AJAX module. Example calls:

$("news").post("news.php?value=true", insertNews);

DOMAssistant.AJAX.post("my-url.aspx?number=10", callbackFunctionName);

What has been fixed?

There was a problem with the :not CSS pseudo-selector for the non-XPath version of DOMAssistant, affecting Internet Explorer and Opera (Opera is planned to utilize XPath when their 9.5 version is released, since it looks promising from beta testing).

AJAX header added

What I forgot to mention when I released DOMAssistant 2.5 is that I added a header to any AHX call being made. It’s name is AJAX and the value is “true”. Therefore, you distinguish on the server-side if it’s a regular request or an AJAX call, and then take the appropriate action (as opposed to having a querystring parameter for each call).

Download!

So, download DOMAssistant and have fun! :-)

Updated January 11th

Due to some problems with the file download, and an initial value needed for the new post method which wasn’t present, the download files have now been updated. If you downloaded them before January 11th, make sure to download a new version.

Posted in Developing,DOMAssistant,JavaScript,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *