Sending AJAX requests with form contents

[SteveEisner]

Here's something I'm running up against:

I'm using the JSON request infrastructure to automatically build an URL and dispatch a request. I need the arguments to end up in the parameters, and it does that really well.

However, optionally - that is, only for certain requests - I'd like to also submit the entire contents of the page form.

So my first question, which by itself would have just ended up over in the Help forum:
* Is there a way to automatically bundle up the form's entire contents when sending a POST via Connection.request?

If not, that's fine, I can build up a params block from the members of the form. The problem, though, is that I'm depending on the URL-building code, but as soon as I switch to a POST, all my arguments get stuck into the body of the request. Ideally there would be some sort of separation between the idea of "GET" and "url-building".

All this got me thinking about a nice option for doing both of the above. 1st) It'd be great to have a form: member of the connection configuration block, which when set, automatically creates a param block for the Ext.get( ) of that argument - so it could be a string or element. 2nd) you could introduce a new "GET/POST" or just "auto-form" argument to method, which by default does a GET with any parameters you send, but if it has a form configged, it switches to POST (without moving the arguments into the body.) From this I'd get the ability to optionally send a form: element with the params block for certain requests.

Another alternative is to just offer an URL params setting vs. body params, and then let the body params be an ID or element.

I could make this change myself, but the basic "GET = url, POST = body" logic is scattered throughout the multiple layers involved in making a connection, so I'm blocked by the need for separate URL variables. Instead I thought I'd throw it out there for discussion!

Steve

[SteveEisner]

Anyone have any ideas how I can accomplish this? I'm about to need it in my code (ie. send along the entire form with a JSON request that stores URL parameters)
Thanks,
Steve

[JeffHowden]

The UpdateManager already has a formUpdate() method which will grab all the successful controls in your form and post them to the server:

http://www.yui-ext.com/deploy/ext-1....teManager.html

[SteveEisner]

OK, thanks Jeff - looks like I can at least figure out how to (ab)use that functionality to get what I want.

But it's not exactly what I need since I don't actually want to update any element based on the response - my URL is a JSON request. I guess I'll have it update some empty/hidden element just so I can get the response, then feed that response into a JSONReader & go from there. And I will be forced to build the URL myself, which is something nice that the Ext.data.Connection class was doing for me.

Anyway, since all this code exists already, Jack could you please consider for a future version binding it together such that the Connection class supports the functionality, and the UpdateManager just uses that? It'll let us make lower-level calls that don't forcibly refresh an element. Thanks!

[JeffHowden]

Since you don't want to update an element, perhaps Ext.data.Connection will suit you better.

FWIW, you don't need to build your URL yourself. You can call Ext.urlEncode() and pass it an object literal that contains the name/value pairs you wish to send.

[vtswingkid]

YAHOO.util.Connect.setForm('formId'); will grab all of your values with names that are enabled.

I am sure this wrapped in EXT somewhere too.

[Belgabor]

You can have a look at my AjaxForm class in the Example forum and on my page to see if it fits your requirements.

[SteveEisner]

Thanks, you were *all* right.

UpdateManager does wrap the "setForm()" func mentioned by vtswingkid, so I took Jeff's suggestion and built the URL and used an UpdateManager:

called with (url, params):

                callbackManager = new Ext.UpdateManager(theForm, true); 
                callbackManager.showLoadIndicator = false;
                callbackManager.setRenderer(new Ext.JSUpdate());
            
                callbackReader = new Ext.data.DynamicJsonReader({root: 'List.items'});
            }
            url = url + '?' + Ext.urlEncode(Ext.apply(params || {}, { "sendJSON": 'yes' }));
            callbackManager.formUpdate(theForm.dom, url, false, this.afterUpdate.createDelegate(this));

        afterUpdate: function(el, success, response) {
            if (success != true) {
                alert('failed to update');
                return;
                }
                
            var ret = callbackReader.read(response);
            for (var i = 0; i < ret.totalRecords; i++)
            {
                 ......

JSUpdate is a hack renderer that just eats the return rather than replacing the element's contents.
DynamicJsonReader is a class I wrote that loads all of the return resutls rather than being forced into a particular Record type.

Anyway, that was enough to get the UpdateManager over its need to replace an element's contents

Thanks all