A little help getting started...

[rgoff]

I'm a web designer/programmer that didn't survive the crash, but I still dabble a bit. I'm going a bit cross-eyed looking at the examples and documentation, and I wonder if someone would give me some high-level suggestions for getting started in my application. I don't want anyone to write my code for me, or read the docs for me, just give me a little focus in this sea of information I find myself in. Something like "use this object to do this, then approach this in this manner..."

I'm starting an application that I want to design with AJAX principles - smaller amounts of data round-tripping to the server more frequently, usually transparent to the user. As part of the configuration, there will be SQL commands stored that server-side scripts use to fetch predefined datasets. Each stored SQL command will have a name for reference and a set of parameters that each have a name, datatype, and default value. Here's the problem statement: develop a page that displays command names, the associated strings, and the set of parameters with their attributes. Allow editing, deleting, and adding. Here's a mock-up page:

http://magpierising.com/QueryConfigProto.png

With traditional techniques, I'd use the recordset in the server script to write the HTML code for tables containing the information. I'd have buttons or checkboxes for deleting, and maybe a blank input form for adding. To edit, I'd probably select a table row and either reload the page with the data populated in an input form or open a new page for the form. How would you approach this with YUI and YUI.ext? Thanks for your time.

(As an aside, if anyone knows where I can learn how to reliably pass parameters to a Jet query in ASP/ADO, I'd be grateful if you'd tell me. I've spent the last two days and various amounts of time in the last two years trying to figure this out, and none of the techniques I've found work for me. This is the reason for the stored SQL command kludge.)

[jack.slocum]

The route you want to take is the right one. It will take a bit of learning and a different mindset. You will need to get very comfortable working with JavaScript and learn about event driven programming.

The example you put up is a common layout. If you look here: http://www.jackslocum.com/forum2/, I am in the process of doing a similar layout with this forum software. While it doesn't feature an editor grid, adding editing support is pretty easy. This article (http://www.jackslocum.com/yui/2006/09/10/adding-built-in-editing-support-to-the-yahoo-ui-extensions-grid/) should give you all the info you need to make it editable.

If you have any specific questions as your work progresses, feel free to ask. I'd be happy to help.

Jack

[rgoff]

/forum2 looks really promising, with the drag/drop, splitter, etc. Lots of features I'd like to incorporate and I'm having to force myself to just work on basic AJAX to start with. Thanks for the update.

Bob

[jack.slocum]

That's not a bad idea.

The UpdateManager in the library that can make Ajax much easier. Here's an example code snip:

Load html from foo.php into div element with id "myDiv".


var myDiv = getEl('myDiv');
myDiv.getUpdateManager().update('foo.php');


You can also auto refresh:



var myDiv = getEl('myDiv');
// auto refresh div every 60 seconds
myDiv.getUpdateManager().startAutoRefresh(60, 'foo.php');


Three diff ways to pass parameters to your script:



var myDiv = getEl('myDiv');
// 1 - GET
myDiv.getUpdateManager().update('foo.php?foo=1&bar=2');
// 2 - POST
myDiv.getUpdateManager().update('foo.php', 'foo=1&bar=2');
// 3 - POST and auto created query string
myDiv.getUpdateManager().update('foo.php', {foo: 1, bar: 2});


Get notified when it loads:



var myDiv = getEl('myDiv');
var um = myDiv.getUpdateManager();
um.onLoad.subscribe(yourFunction);


or use a callback:



var myDiv = getEl('myDiv');
myDiv.getUpdateManager().update('foo.php', {foo: 1, bar: 2}, myFunction);


All those examples assume you just want to stick returned HTML into the div. What if you were getting JSON data back?



var MyRenderer= {
render: function(el, o){
var myObj = eval('(' + o.responseText + ')');
// do something with the object returned by your server
}
};
var myDiv = getEl('myDiv');
var um = myDiv.getUpdateManager();
um.setRenderer(MyRenderer);
um.update('foo.php', {foo: 1, bar: 2});


Hopefully these examples are useful.

[rgoff]

Perfect examples to start with, thanks. Still working on the server-script to spit back XML. I'll get a client working RSN. (Day jobs are so demanding...)

Bob