1. #1
    Ext Premium Member
    Join Date
    Mar 2007
    Posts
    175
    Vote Rating
    0
    SteveEisner is on a distinguished road

      0  

    Default Sending AJAX requests with form contents

    Sending AJAX requests with form contents


    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

  2. #2
    Ext Premium Member
    Join Date
    Mar 2007
    Posts
    175
    Vote Rating
    0
    SteveEisner is on a distinguished road

      0  

    Default


    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

  3. #3
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    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
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  4. #4
    Ext Premium Member
    Join Date
    Mar 2007
    Posts
    175
    Vote Rating
    0
    SteveEisner is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    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.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    501
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Default


    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.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    140
    Vote Rating
    0
    Belgabor is on a distinguished road

      0  

    Default


    You can have a look at my AjaxForm class in the Example forum and on my page to see if it fits your requirements.
    Belgabor's Ext Playground - Showcase for my Extensions

  8. #8
    Ext Premium Member
    Join Date
    Mar 2007
    Posts
    175
    Vote Rating
    0
    SteveEisner is on a distinguished road

      0  

    Default


    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):
    Code:
                    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));
    Code:
            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

Similar Threads

  1. wrap the contents of an element
    By knagurski in forum Community Discussion
    Replies: 8
    Last Post: 8 Jun 2009, 2:38 AM
  2. BasicDialog in JSF: Submit a Form without Ajax, revisited
    By tromanow in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jul 2007, 5:45 AM
  3. Resize dialog to fit contents
    By JeffHowden in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 2 Mar 2007, 6:48 PM
  4. BasicDialog: how to submit a form without AJAX.
    By moraes in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jan 2007, 7:02 AM
  5. ajax form submission & post process
    By seldon in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 1 Dec 2006, 6:36 AM

Thread Participants: 3