Since had some trouble today combining those tho technologies but eventually found a way, I’d like to share my experience with you. This article requires some knowledge about xajax and the YUI; otherwise it’d be quite hard to understand.
Yahoo’s User Interface library (short: YUI) is a powerful and rich javascript toolset which makes several nifty javasript interactions possible; such as: animation, color fading, animated sliders and autocomplete and many more.
In our project transLucid we wanted to achieve the autocomplete mechanism with an autocomplete method: When connecting to a desired node we get suggestions appear so that we don’t have to type in the name completely.
To use as much existing code as possible we agreed on using the YUI toolset and the PHP Ajax framework xajax, which we’re using for the complete editmode in our application.
So now let’s have a look at the YUI autocomplete interface: [Documentation]. Our interest is rather the data sources than the UI and styles - we can copy them from an example later on and modify it. We have three possibilities for data sources:
- YAHOO.widget.DS_JSArray(myArray); The data source that consists of an array. No way of querying our server over ajax here.
- YAHOO.widget.DS_JSFunction(myFunction); The function given as a parameter here delivers a JS array. Again, we can specify the data delivering function but no way of letting a callback function triggered.
- YAHOO.widget.DS_XHR(myServer, mySchema); The XmlHttpRequest datasource would be appropriate. Indeed, this function is a very flexible way of querying the server for XML, JSON or plain text data, putting the from ajax returned data back into our auto complete object. But here we would have to implement a complying function on our server that gives out the data. Since we use xajax we’d have to define another way of data output and could not use our common channel.
So - what to do? Let’s first check, what xajax does. It somehow hides the XML transport from the user/developer and gives him the ability to fill specific DIVs, call JS functions, redirect etc. So what we have in case of our autocomplete is following:
- a JS function that is triggered when the autocomplete object (built by the YUI) decides to query data from the server.
- a callback JS function that is called by the xajax with the function xajaxResponse::addScriptCall(). This function shall trigger the autocomplete object to display the results. we call it autocompleteCallback(aResponse). The aResponse is the actuall array (a PHP array converted to a JS array by xajax) containing the data.
Looking at the YUI file autocomplete/autocomplete.js we notice the class YAHOO.widget.DS_XHR already has a callback function in its function description of doQuery (that’s the function which is triggered every time the autocomplete box wants data):
YAHOO.widget.DS_XHR.prototype.doQuery = function(oCallbackFn, sQuery, oParent)
It is the oCallbackFn that we want to trigger. So now, we copy the whole DS_XHR class and make up our own derivation of a data source.
We need that code to initialize our own derivation:
YAHOO.
widget.
DS_XAJAXConnector =
function()
{
this._init
();
};</p><p>YAHOO.
widget.
DS_XAJAXConnector.
prototype =
new YAHOO.
widget.
DataSource();
Then we copy the function doQuery and inject our code:
YAHOO.
widget.
DS_XAJAXConnector.
prototype.
doQuery =
function(oCallbackFn, sQuery, oParent
)
{
doQueryXajax
(oCallbackFn, oParent, sQuery
);<
/p><p>return;</p><p>
}
DoQueryAjax is our JS function that wraps the xajax request and saves the callback function in a global variable. The whole code customed to our need now looks like this:
var m_fCallBackToAutocomplete;
var m_oParent;
var m_sQuery;</p><p>function doQueryXajax
(fCallBack, oParent, sQuery
)
{
m_fCallBackToAutocomplete = fCallBack;
m_oParent = oParent;
m_sQuery = sQuery;
xajax_findNodeName
(sQuery
);
}</p><p>function autocompleteCallback
(sResponse
)
{
if (sResponse.
constructor != Array
)
{
sResponse =
new Array
();
}
m_fCallBackToAutocomplete
(m_sQuery, sResponse, m_oParent
);
}</p><p>
As you can see, we store the callback function and call it later on when the xajax response comes back and calls our wrapper autocompleteCallback.
The YUI autocomplete now talks to our server over our common channel xajax. We have our custom functions and spend just little time on coding and keep our way of handling ajax communication. If you have any questions, email me (about page) or write a comment.
elsif path.length > 1
# walk down if possible:
if element[path.first].is_a?(Hash) and element.has_key?(path.first)
ensure_yaml_contains(element[path.first], path[1..-1], val)
else
# We don't have a hash in the dest file, so we create the hash
# and fill in all subsequent children:
element[path.first] = Hash.new
ensure_yaml_contains(element[path.first], path[1..-1], val)
end
else
puts "REPLACING FAILED"
# should stop here
end
end
end