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 |

8 Comments

  • [...] Nymand has released DOMAssistant 2.5.5 , with “improved event handling, replaceClass and end methods.” Anyone know if this end() function is available in jQuery? If not, then I suggest [...]

  • Doug says:

    Hey, there's a typo in one of your examples: <code>evt.evtTarget.getAttribute</code> should be <code>evt.eventTarget.getAttribute</code>

    I like the AJAX header you send with AJAX calls! I've already found it useful.

    Still wish there was a POST method in AJAX for unsafe interactions, though. It could even be an extra parameter like <code>.get(url, callBack, {method : "POST"})</code>. That wouldn't increase the code TOO much, would it?

  • Robert Nyman says:

    Doug,

    Thanks! Sloppy me.

    Yes, the POST method would indeed be just a little bit more code. When you mentioned it, I think I really should've added it in this version. Therefore, I just coded it together and uploaded a new version where every element and the <code>DOMAssistant.AJAX</code> object also has a <code>post</code> method.

    This post (above) is updated with more info.

  • chenghong says:

    Congrats on the new release!

    You may want to check the 'complete' file. It is missing the DOMAssistant.Load module.

    Also, shouldn't the last line in the makeCall function be

    <code>XMLHttp.send((method==="GET")? null : params[1]);</code>

    ?

  • Robert Nyman says:

    Doug,

    No problem, I should have done it before.

    chenghong,

    Thanks!

    I appreciate you letting me know! It was ok in my code repository, but in the offered download, it was initially wrong. When I tried to fix that, Google code mangled the end of the file again.

    Therefore, I changed the namestandard (something I've wanted to do anyway) so that there's a dot (.) instead of a hyphen (.) in the file name, i.e. DOMAssistantComplete.2.2.5.js instead of DOMAssistantComplete-2.2.5.js.

    For future downloads, this should never be a problem anyway. Lesson learned: never try to update a file with the same filename; instead, use new names for modified files.

    And, you're absolutely right about what's posted in the post request, and I've seen to that.

    Thanks for your help!

  • chenghong says:

    Just another thing (I should have said this earlier, sorry), you should probably change this line

    <code>XMLHttp.open(method, url, true);</code>

    such that <code>params[0]</code> instead of <code>url</code> is sent for 'post' method.

    The current way still works for short params, but you will essentially be sending over GET as well as POST data in one request. For requests with extremely long params (which is the reason why POST is being used), it might break.

  • Robert Nyman says:

    chenghong,

    Ah, you're absolutely right. It's just unnecessary, and actually plain wrong, to include all the parameters within a POST request.

    I've updated the code and released a new fix version: DOMAssistant 2.5.6 released – AJAX module post method has been fixed.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>