AJAX example

[barryrs]

Steve,

Happy Labor Day!!!

I'm trying to use AJAX to pull selected data for the next select box on my form.
my onchange event for the first select box eventually calls the following:

getDataReturnText('http://xatafaceWebsite/index.php?-action=ajax_get_categories&cat='.value, 'ajaxUpdateCat')

'ajax_get_categories' is a registered action in xataface that returns a json array of items.

My thought is that the request would filter through the url decoding process and pass the data?'cat' to my action.
(This didn't happen. Nothing did Can you give me a short example or explanation here, please?)

from there I'll return my data to the callback, decode, display,etc.

If what I'm asking makes sense, I'll be happy to rewrite the question and answer into something a little more coherent for others to follow.

Thanks,
-Barry

[shannah]

A couple of things here:

1. When in Rome ... Javascript doesn't use the dot for string concatenation. It uses a '+'. (i.e. '...cat='.value is incorrect -- should be '...cat='+value).

2. The 2nd parameter is a callback. In javascript Functions are just objects - and you should be passing a function instead of a string function name.

3. Any GET parameters should be encoded. In javascript you use encodeURIComponent() for this. e.g. '...cat='+encodeURIComponent(value)

4. You can find an example using this function in Dataface/templates/Dataface_Calendar.html

-Steve

[shannah]

Another note: I haven't used these methods in a long time. Generally I use the jQuery post or get methods instead as jQuery is the best thing to happen to Javascript ever.

[barryrs]

Thank you Steve! Yes, Jquery is really cool! (It's just the syntax that kills me.
Anyway, for those who may wish to implement an AJAX validation scheme, here's an example that retrieves data for a select widget.

> from fields.ini
[TransactionTypeID]
widget:type = select
widget:atts:onchange="updateCats(this.value);"

// an action in xataface to return values
class actions_ajax_get_categories {
function handle(&$params)
{
$app =& Dataface_Application::getInstance();
$query =& $app->getQuery();
$cat_id = $query['-cat_id'];
// do something here to collect the data you need
echo json_encode($categories);
return;
}}

>myLib.js

function updateCats(value)
{ getDataReturnText('index.php?-action=ajax_get_categories&-cat_id='+encodeURIComponent(value), ajaxUpdateCats); }

function ajaxUpdateCats(values)
{


// remove steve's execution time
values = values.substr(0,values.search("<p>"))

var json_data_object = eval('(' + values + ')');

var categorySelect = document.getElementById('CategoryID_Allocations_0');
categorySelect.options.length=0
// update the widget with the new data
for (i=0; i<json_data_object.length; i++)
categorySelect.options[i]=new Option(json_data_object[i].Name, json_data_object[i].CategoryID, true, false)
}

This is just one way to accomplish this, JQuery is another.
Thanks again Steve for your help!