DZone Snippets: yui code

YUI: parse json data from a async request

casperskovgaard (Casper Skovgaard) — Thu, 14 Aug 2008 13:18:05 GMT



var initializeHistoryLog = function(){

	var historyLog = YAHOO.util.Dom.get('historyLog');



	// Define the callbacks for the asyncRequest

	var callbacks = {

		success : function (o) {

			// Process the JSON data returned from the server

			var values = [];

			try {

				values = YAHOO.lang.JSON.parse(o.responseText).ResultSet.Result;

			}

			catch (e) {

				return;

			}



			var el = document.createElement("temp");

			for (var i = 0, len = values.length; i < len; ++i) {

				var v = values[i];

				YAHOO.widget.DataTable.formatDate(el, null, null, YAHOO.util.DataSource.parseDate(v.Date))

				historyLog.innerHTML += '' + el.innerHTML + ' ' + v.Time + '
' + v.Action + '
' + v.Changes.join('
') + '
';

			}

		},



		failure : function (o) {

			if (!YAHOO.util.Connect.isCallInProgress(o)) {

			}

		},



		timeout : 3000

	}



	// Make the call to the server for JSON data

	YAHOO.util.Connect.asyncRequest('GET',"json_GetHistoryLog?openagent&unid=" + unid, callbacks);

}

Send a request by YUI

collin (QWE) — Wed, 04 Jun 2008 08:47:27 GMT

// description of your code here

YUI DataTable - Understanding ISO / SQL Date Time Formats

jamesg (James Green) — Tue, 08 Apr 2008 22:16:35 GMT

As of YUI 2.5.1 the DataSource utility (which feeds the DataTable widget) only accepts either native Javascript Date objects or a string formatted to the North American locale (mm/dd/yyyyy) when using parser: "date" in your schema.

This can cause problems outside the USA, particularly if you are using ISO date formats say from MySQL DateTime columns. So let's fix this and include a Calendar widget for editing.

First, we depend on Datejs so ensure you've already got this loaded into the application. Next you need a couple of custom callback methods



/**

 * Accepts a date string in any format that datejs.com's library can recognise.

 * Returns a Date object if successful, false otherwise

 */

parseSQLDate = function(data)

{

       var date = null;

       try {date = Date.parse(data);return date;}

       catch(e) {return false;}

};

/**

 * This is a formatting callback for YUI DataTable to present date in ISO format

 * instead of American mm/dd/yyyy

 */

formatDateInDataTable = function(elCell, oRecord, oColumn, oData)

{

       var oDate = oData;

       elCell.innerHTML = oDate.toString('yyyy-MM-dd');

};

Now to activate modify your schema thus:



dataSource.responseSchema = {

       resultsList: "items",

       fields: [{key: "created_on", parser: parseSQLDate}]

};

And in your columnDefs:



dataSource.columnDefs = [

       {key: "created_on", label: "Created", editor: "date", formatter: formatDateInDataTable}

];

Lastly we set up an editor for cells:



dataTable.subscribe("cellClickEvent", dataTable.onEventShowCellEditor);

Code to disable YUI calendar previous and next month links icons

robd (Rob Dupuis) — Mon, 03 Mar 2008 20:57:33 GMT

This solution does not require modifying the yui source and works on YUI version 2.5.0. It will disable the next and previous arrows based on the out of bounds dates you specify with mindate and maxdate when you configure the calendar. Requires YUI dom and a namespace called your_app.

1) attach an onRender event when you configure the calendar and before you call render

calendar.renderEvent.subscribe(YAHOO.your_app.calendar().initArrows, calendar);

2) add the following function:



YAHOO.your_app.calendar = function() {

	

	var addDays = function(date, days) {

		return YAHOO.widget.DateMath.add(date, YAHOO.widget.DateMath.DAY, days);

	};

	

	var showPreviousArrow = function(cal) {

		return showArrow(cal, cal.toDate(cal.cellDates[0]), 1);

	};



	var showNextArrow = function(cal) {

		return showArrow(cal, cal.toDate(cal.cellDates[cal.cellDates.length-1]), -1);

	};

	

	var showArrow = function(cal, startingDate, step) {

		if (!cal.isDateOOM(startingDate)) { //ie not overlapping

			return !cal.isDateOOB(addDays(startingDate, (-1 * step)));

		}

		for (var i=0; (i * step) < 7; i += step) { //iterate forwards for previous month check, backwards for next month check

			var date = addDays(startingDate, i);

			if (!cal.isDateOOM(date)) { //shortcut exit; as soon as we find an in month date we can supress the arrow

				return false;

			} else if (!cal.isDateOOB(date)) {

				return true;

			}

		}

		return false;

	};

	

	return {

		initArrows: function(type, args, cal) {

			if (!showPreviousArrow(cal)) {

				hideArrow(cal, cal.Style.CSS_NAV_LEFT);

			}



			if (!showNextArrow(cal)) {

				hideArrow(cal, cal.Style.CSS_NAV_RIGHT);

			}

		}

	};

};

Date picker PHP + Javacript

tweather (Ted Weatherly) — Fri, 17 Aug 2007 19:27:52 GMT

// description of your code here