Results 1 to 10 of 10

Thread: Ajax.request() vs form.submit() difference...

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    24
    Vote Rating
    1
      0  

    Default Answered: Ajax.request() vs form.submit() difference...

    Hi guys,
    I lost 3 hours debugging an error.
    I'm not able to understand why these two pieces of code works differently.
    I cannot see a reason... Why???

    PHP Code:
    // 1)
    // This is working and jsonData is posted correctly
    Ext.Ajax.request({
      
    url'/WS/CartWs/TestMe',
      
    jsonDataExt.encode({ "form""uh" })
    }); 

    // 2)
    // This is not working correctly. It posts strange (Fiddler tested) thing. 
    var form item.up('form').getForm();
    form.submit({ 
      
    url'/WS/CartWs/TestMe',
      
    jsonDataExt.encode({ "form""uh" })
    }); 

  2. Quote Originally Posted by Crockford View Post
    Ajax.request() is an hack. I hate hacks.
    I would tend to agree. Here is an option to get it changed if you would like to (I would invite you to do it):

    http://www.sencha.com/forum/showthre...o-report-a-bug

  3. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    32
    Vote Rating
    92
      0  

    Default

    Hi Crockford--

    Can you describe what "strange thing" gets posted on the form submit? And what is the standardSubmit property of your form set to?

  4. #3
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    19
      0  

    Default

    Chrockford,

    You have us do a lot of guess-work here. Next time please provide more info about what is exactly going on (or wrong).

    My guess is that all 'action' methods on the Ext.form.Basic class don't pass through the config properties to the Ext.ajax.request() call.

    The 'jsonData' property is most likely just ignored in case of Ext.form.Basic#submit() (because the Ajax#request method never receives it).


    What you can do is override Ext.form.action.Action#createCallback() to pass more properties on to the Ajax.request() method.

    Code:
    Ext.require('Ext.form.action.Action', function() {
        Ext.override(Ext.form.action.Action, {
            createCallback: function() {
                var result = this.callOverridden(arguments);
                // all properties that were passed into the Action method (form#submit() or #load())
                // have been applied as members of this Action object. We can therefore just
                // read any property and apply it to the result object as we see fit.
                // We use copyTo because it will only apply a value if it actually exists on the source object
                return Ext.copyTo(result, this, 
                        ['disableCaching', 'username', 'password', 'async']); 
            }
        });
    });
    However, I'm not sure if this is helping you with what you are trying to achieve, even if you add jsonData to the list.

    The Ext.Ajax.request method has to account for so many different use-cases that it is pretty confusing. Stepping through it with a debugger might clear up the confusion what happens in your particular use case.

    I guess you'll have to pick it up from here

  5. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    24
    Vote Rating
    1
      0  

    Default

    Hi Guys,
    I made some research.

    jsonData is not managed in the same way. It leads to some issue.
    Ajax.request() & jsonData produce a Good request.
    form.submit() & jsonData produce a Bad request because on the server-side the value of jsonData is not readable using Querystring or Form generic method.

    Using fiddler to listen the following code you get an overview of the problem.

    PHP Code:
    var form item.up('form').getForm(); // The getForm() method returns the Ext.form.Basic instance
    Ext.Ajax.request({
         
    url'/WS/DotNetWs',
        
    jsonDataExt.encode({ "form""uh" })
    });

    form.submit({
         
    url'/WS/DotNetWs',
        
    jsonDataExt.encode({ "form""uh" })
    }); 
    In the following image you can see that the second request even if uses jsonData has not the correct headers.
    Adding the headers is not a solution. Maybe they are ignored.

    Extjs-1.jpg

    Thanks
    Attached Images Attached Images
    Last edited by Crockford; 26 Sep 2011 at 6:17 AM. Reason: typo

  6. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    1. Using jsonData in Ext.Ajax.request will automatically Ext.encode the value so you don't have to.
    2. submit() on Ext.form.Basic will gather your values and post them with the POST method. Hardly doubt that the jsonData will work very well.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    24
    Vote Rating
    1
      0  

    Default

    Hi Mitchell,
    I think form.submit() is breaking the rules.
    I thinked a 100% json webservice was the Right choice.

    This time I had to use Ajax.request() to achieve my goal.
    I don't like it.
    form.submit() is the natural way of doing this thing and it should be able to post jsonData.
    (It manages response jsonData but it doesn't manage request?!).

    Ajax.request() is an hack. I hate hacks.



    Bye.
    Last edited by Crockford; 26 Sep 2011 at 7:14 AM. Reason: typo

  8. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    Quote Originally Posted by Crockford View Post
    Ajax.request() is an hack. I hate hacks.
    I would tend to agree. Here is an option to get it changed if you would like to (I would invite you to do it):

    http://www.sencha.com/forum/showthre...o-report-a-bug
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #8
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    19
      0  

    Default

    Write your own override that will submit the form as json!

    1. Create your own Ext.form.action.Action implementation
    2. Override Ext.form.Basic#submit to use your new submit action if a certain config property is set (either on the form object or as an argument to submit)


  10. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    24
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I would tend to agree. Here is an option to get it changed if you would like to (I would invite you to do it)
    I'll try to take the time to do that, in the name of clean code.
    Thanks.

  11. #10
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    Quote Originally Posted by mberrie View Post
    Write your own override that will submit the form as json!

    1. Create your own Ext.form.action.Action implementation
    2. Override Ext.form.Basic#submit to use your new submit action if a certain config property is set (either on the form object or as an argument to submit)

    In the meantime yes but I think @Crockford has a valid point that Ext.form.Basic#load handle JSON so why can't #submit? Just like asking out a girl... worst thing that can happen is be turned down
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

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