Yui, form and data view table

Question

I am a Java programmer, but not a JavaScript programmer. I just opened YUI and am trying to start using it. What I would like to try is to have a query form at the top of the page, the user clicks "Submit", and the results are displayed in the YUI DataTable under the query form.

Usually, of course, in the HTML form, the user clicks Submit, the request is sent to the server, and I use Struts to process it, and then forwards the request to the JSP, and the HTML is sent back to the browser. This is what I do daily. With Ajax, I understand that this is different in that I have to return XML. No problem. Easy to do.

Questions that I have in dealing with YUI. When the submit button is clicked, what happens? Not a normal feed, is it? Am I implementing the onSubmit () JavaScript function, which then runs some YUI data source to get the data? How are query parameters passed? Hope I don't need to manually create a query. I assume that I am using YAHOO.util.XHRDataSource and that the DataSource is for a DataTable.

I managed to get the YUI DataTable to work using an HTML table element. Now I just need to switch it to real data. Curiously, the YUI documentation looks a little weaker here if I don't miss a thing. Maybe it's just basic Ajax that the YUI docs don't cover?

Answer 1

, Ajax XML , , XML, JSON, , . Datatable JSON:

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

, Ajax YUI.

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

, .

, Yahoo.util.Connect.asyncRequest, :

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

. , "GET", "GET" "POST", ,

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

"onSuccess", , JSON

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

"jsonData" , :

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

, datatable , . -

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"});

"div" HTML- "" , DataTable

,