Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Passing form values to Ext.Ajax.request

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    19

    Default Answered: Passing form values to Ext.Ajax.request

    Hi!

    I have a question what is the proper way to pass form values to Ext.Ajax.request.

    Here is my code:
    Code:
     var panelForm = Ext.create('Ext.form.Panel', {
                    width: 300,
                    renderTo: 'fileUpload',
                    items: [
                        {
                            xtype: 'filefield',
                            name: 'document',
                            hideLabel: true,
                            anchor: '100%'
                        }
                    ],
    
    
                    buttons: [
                        {
                            text: 'Upload',
                            handler: function() {
                                var form = panelForm.getForm();
      /*                          form.submit({
                                    url: '<s:url namespace="/ajax"  action="uploadFile" />',
                                    success: function(fp, o) {
                                        alert('success');
                                    }
                                });*/
    
    
                                logMessage(panelForm.getForm().getValues());
    
    
                                Ext.Ajax.request({
                                    url : "<s:url namespace="/ajax"  action="uploadFile" />",
                                    params  : form.getValues(),
                                    method: 'POST',
                                    success : function(response){
                                         console.log(response.responseText);
                                    }
                                });
                            }
                        }
                    ]
                });
    The commented version using form.submit() works correctly - parameters are passed in submit request.
    I am not sure what I am doing wrong. Should params or extraParams property be used in Ext.Ajax.request? I have tried to use both and I also have tried to use form.getFieldValues() but no positive result.


    Thanks for help.

    Regards,
    Luke

  2. Sorry...but I should have asked this earlier.....

    How are you accessing the html file in your browser? using file:/// protocol or http:// ?

    I tried with http:// and the values are being posted to the mentioned url. Here is a screenshot:

    Attachment 30591

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    I did a small test

    Code:
    var form = Ext.getCmp('ext-comp-1032');
    var values = form.getValues();
    
    Ext.Ajax.request({
       url : '<s:url namespace="/ajax"  action="uploadFile" />',
                                    params  : values,
                                    method: 'POST',
                                    success : function(response){
                                         console.log(response.responseText);
                                    }
     
    });
    The params are filled in in the post request.

    This url : '<s:url namespace="/ajax" action="uploadFile" />', part gave an error, I took the single qouted one from the formSubmit url you posted.

    So whats the problem?

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    19

    Default

    Sorry but I don't catch you.
    Are you saying that it works? or should I use single quoted url?

    Regards,
    Luke

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Yes the params are passed, but the quotes on the url gave me an error. If you change the url in the way you did on the formSubmit it probably works fine. Anyway the params are passed fine.

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    19

    Default

    This improvement didn't work in my case. I don't see anything in request params.
    There must be something about getting field values from form.
    I am using extjs 4.07.
    Is this code ok for you:
    panelForm.getForm().getValues()?

    Best Regards,
    Luke

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    is the same as panelForm.getForm() wich I used. Its strange because I get them in the request.

    In your case panelForm.getValues() should work. In your sample I see form.getValues().

    Is form correct?

  8. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    19

    Default

    Yup, it should be ok:
    var form = panelForm.getForm();

    I will look at this in new year:-)
    Thanks for help.

    Regards,
    Luke

  9. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    19

    Default

    Hi!

    I would like to refresh this problem.
    Any help/suggestion will be appreciated.

    Best Regards,
    Luke

  10. #9
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    67
    Answers
    6

    Default

    @luke

    What is the problem? The URL or the params?
    Learn all about Sencha Charts - Sencha Charts Essentials Book
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  11. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    19

    Default

    Code:
    var form = panelForm.getForm();
    var values = form.getValues(); Ext.Ajax.request({ url : '<s:url namespace="/ajax" action="uploadFile" />', params : values, method: 'POST', success : function(response){ console.log(response.responseText); } });
    The problem is that in this case values are null.

    Regards,
    Luke

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •