Archive

Posts Tagged ‘ajax’

Remember state with YUI TreeView

July 17th, 2008
geek 5 comments

YUI Tree

I’ve got a YUI tree which loads the leaves dynamically with Ajax calls. But I want to open up the tree to a specific leaf – on the third level down – after the page loads – as the server is delivering content specific to that node.

How to do? It’s like saving state after a roundtrip to the server. (the hierarchy is team->role->position)

The server tells the team node to expand which in turn tells the role node to unsubscribe and expand itself. In effect the tree opens to the third leaf.

during page load
   after drawing the tree with teams nodes
   get the specific team node
   subscribe to 'expandcomplete' with this function
          unsubscribe from the expansion event
          expand the specific role node
   now expand the team node


var teamnode = tree.getNodeByProperty("tmn_id","#getPosIds.tmn_id#");
tree.subscribe("expandComplete", function(node) {
	var rolenode = this.getNodeByProperty("pos_id","#getPosIds.pos_id#");
	tree.unsubscribe("expandComplete");
	rolenode.expand();
});
teamnode.expand();

Another suggested solution is to save state with a cookie, but i didn’t try that one.

I’ve gone a little Ajax crazy; every solution looks like ajax at the moment, and this is just with the YAHOO! library. I know there are others, potentially better ones out there (extjs.com?) but I’ve not evaluated them.

Localization trap in Yahoo’s YUI Calendar

June 19th, 2008
life

Quick note to self and others having just wasted several hours trying to get Yahoo’s YUI calendar to work with dates in the format “2008-06-19″.

Working from this example I was only setting the “DATE_FIELD_DELIMITER”. It refused to work, but I struggled on confident that, for once, the americans really had implemented something which wasn’t culturally imperialistic.

Finally I’ve worked out that the “DATE_RANGE_DELIMITER” is already “-” and setting the “DATE_FIELD_DELIMITER” will not override that setting. It will continue parse your date as a range.

eg: So to use dates in yyyy-m-d format change the “DATE_RANGE_DELIMITER” to something else…

var call = new YAHOO.widget.Calendar("calendar");
call.cfg.setProperty("DATE_RANGE_DELIMITER", "+");
call.cfg.setProperty("DATE_FIELD_DELIMITER", "-");
call.cfg.setProperty("MDY_YEAR_POSITION", 1);
call.cfg.setProperty("MDY_MONTH_POSITION", 2);
call.cfg.setProperty("MDY_DAY_POSITION", 3);
call.select("2008-6-21");
call.render();

If you expect it to open at the selected day then don’t run away, there’s more…

The “pagedate” property only wants the month and the year; it can’t handle being fed the date you’ve just used, which is rather irritating. It not only wants you to trim the day off but also tell it the order of month/day strings (as opposed to month/day/year strings). It all starts to add up to lots of code…


call.cfg.setProperty("MY_YEAR_POSITION", 1);
call.cfg.setProperty("MY_MONTH_POSITION", 2);
call.cfg.setProperty("pagedate","2008-06");