yui, form submission and data table

Question

I'm a Java programmer, but not a JavaScript programmer. I have just discovered YUI, and am trying to get started using it. What I'd like to try and do is have the query form at the top of the page, the user press Submit and the results show up in a YUI DataTable below the query form.

Normally, of course, on a HTML form the user presses Submit, the request gets sent to the server, and I use Struts to process it and then forward the request to a JSP and HTML gets sent back to the browser. That's what I do on a daily basis. With Ajax, I understand it's different in that I should return XML instead. Not a problem. Easy to do.

The questions I have deal with the YUI side of things. When the Submit button is pressed, what happens? Not normal form submission, right? Do I implement an onSubmit() JavaScript function which then triggers some YUI DataSource to go fetch the data? How do the request params get passed? Hopefully I don't have to construct the request manually. I'm guessing that I use a YAHOO.util.XHRDataSource and that's the DataSource for the DataTable.

I've managed to get the YUI DataTable to work using an HTML table element. Now I just need to switch it over to real data. Curiously, the YUI documentation seems a bit weak here, unless I'm missing something. Maybe this is just basic Ajax that the YUI docs don't cover?

Answer 1

First of all, when working with Ajax you don't need to return XML from the server, you could return plain text, XML, JSON strings, literally any form of textual data that you want. One example of populating a Datatable with JSON data is provided here:

http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

An example of how to send a post request using Ajax and YUI is provided here.

http://developer.yahoo.com/yui/examples/connection/post.html

That should get you started, now just link both of them together.

To connect to the server you can use the Yahoo.util.Connect.asyncRequest method which takes in the following parameters:

static object asyncRequest ( method , uri , callback , postData );

See an example here, this one uses "GET" so you can use either "GET" or "POST" just make sure you pass in your parameters

http://developer.yahoo.com/yui/examples/json/json_connect.html

Once your function returns on your "onSuccess" do the following to parse the response text to JSON

try {
    jsonData = YAHOO.lang.JSON.parse(o.responseText);
}
 catch (x) {
    alert("JSON Parse failed!");
    return;
}

The "jsonData" object now contains your data, so now you can follow this example:

http://developer.yahoo.com/yui/examples/datatable/dt_basic.html

It shows you how to initialize a datatable with a local object holding the datasource. basically it would be something like this

var myColumnDefs = [
        {key:"Column1Data", label:"Column1 Header" sortable:true, resizeable:true},
        {key:"Column2Data", label:"Column2 Header" sortable:true, resizeable:true}
        ];

var myDataSource = new YAHOO.util.DataSource(jsonData);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["Column1Data","Column2Data"]
        };

        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, {caption:"DataTable Caption"});

For this to work, you have to have a "div" container in the HTML code with an id of "basic" note this matches the first parameter on the DataTable

Hope this helps