PDA

View Full Version : Ajax.request() vs form.submit() difference...



Crockford
25 Sep 2011, 2:03 AM
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???



// 1)
// This is working and jsonData is posted correctly
Ext.Ajax.request({
url: '/WS/CartWs/TestMe',
jsonData: Ext.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',
jsonData: Ext.encode({ "form": "uh" })
});

existdissolve
25 Sep 2011, 3:21 AM
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?

mberrie
25 Sep 2011, 6:27 AM
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.



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

Crockford
25 Sep 2011, 10:49 PM
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.



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

form.submit({
url: '/WS/DotNetWs',
jsonData: Ext.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.

28328

Thanks

mitchellsimoens
26 Sep 2011, 5:06 AM
Using jsonData in Ext.Ajax.request will automatically Ext.encode the value so you don't have to.
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.

Crockford
26 Sep 2011, 6:14 AM
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.

mitchellsimoens
26 Sep 2011, 6:18 AM
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/showthread.php?138165-How-to-report-a-bug

mberrie
26 Sep 2011, 7:13 AM
Write your own override that will submit the form as json!


Create your own Ext.form.action.Action implementation
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)

:D

Crockford
26 Sep 2011, 7:28 AM
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.

mitchellsimoens
26 Sep 2011, 8:06 AM
Write your own override that will submit the form as json!


Create your own Ext.form.action.Action implementation
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)

:D

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