PDA

View Full Version : Ext.Ajax.request fail in Chrome and FF



mdutra123
28 Feb 2010, 1:30 PM
This simple ajax resquest below fails in Chrome. The browse navigate to 'login-cs.php' page instead of calling js function. Also FF fails. Please let me know how to fix this behavior. Thank you, Mauro.



Ext.Ajax.request({
url: 'login-cs.php',
form: 'frmLogin',
method: 'POST',
success: function(response, opts) {
if (responseLoginDone) return;
responseLoginDone = true;
hideLoginProcessingMsg();
oUPData = Ext.util.JSON.decode(response.responseText);
if(oUPData.successMsg=="OK") {
return setUserIsLoggedIn();
} else {
showLoginMessage(oUPData.successMsg, false);
}
hideMask();
},
failure: function(response, opts) {
//console.log('server-side failure with status code ' + response.status);
if (responseLoginDone) return;
responseLoginDone = true;
hideMask();
hideLoginProcessingMsg();
showLoginMessage("Process failure. Try again!", false);
}
});

mdutra123
28 Feb 2010, 1:43 PM
Page is redirected.

http://www.cudacorp.com/extajax-chrome-failure.bmp

fay
1 Mar 2010, 4:32 AM
Need to double-check: would your 'login-cs.php' file be doing the redirecting?

mdutra123
3 Mar 2010, 12:07 PM
Here is a portion of my php login program:


$response_text

= '{"successMsg":"'.$response_text.'","upData":'.$upData.$uagt.'}';

header("Content-Type: text/plain");
header("Content-Length: " . strlen($response_text));
print


($response_text);
?>

This is how I write the response to Ext.ajax.request call.

fay
3 Mar 2010, 1:56 PM
Sorry, but I just did a quick test with the following in FireFox and it works fine:


<?php
$response_text = '{"successMsg":"OK","upData":{"firstname":"Mauro","lastname":"Dutra"}}';
header("Content-Type: text/plain");
header("Content-Length: " . strlen($response_text));
print($response_text);
?>


Ext.Ajax.request({
url: 'test.php',
form: 'frmLogin',
method: 'POST',
success: function(response, opts)
{
// ...
},
failure: function(response, opts)
{
// ...
}
});
There has to be something else amiss in your php code.

fay
3 Mar 2010, 1:57 PM
Have you looked at this example (http://www.extjs.com/learn/Tutorial:Basic_Login#Login.php)?

mdutra123
3 Mar 2010, 2:41 PM
Hi fay!

Thanks for helping. I will try the documentation example and verify if I get same problem in FF.

mdutra123
3 Mar 2010, 3:05 PM
I tried this login example and it does work in FF. But this example uses login.getForm().submit(...) method. I am using the Ext.ajax.request method plus I did not use Ext.FormPanel to create my form. I am adding ajax functionality to a legacy php website. So I am submitting an existing form thru Ext.ajax.request method.

It seems as this is a bug in Ext that needs fixing.

mdutra123
3 Mar 2010, 9:07 PM
I am not sure what I have done but now calling the Ext.Ajax.request no longer POST the form data in Chrome. It still works fine in IE. I have tried many different methods and no results.

Anyone have an insight on this issue?

Help please! Thank you!

fay
4 Mar 2010, 1:43 AM
I've now tried my short example (in post #5) in Chrome and it works fine. So FF + Chrome + IE are okay. There has to be something else wrong in either your ExtJS code or in your PHP code.


It seems as this is a bug in Ext that needs fixing.

Just because it doesn't work for you doesn't mean it's a bug in ExtJS :)

You need to debug your app - start by eliminating whether it is your ExtJS code or not; use my test.php instead of login-cs.php and see if that works... debug!

mdutra123
4 Mar 2010, 2:31 PM
Hi Fay,



Just because it doesn't work for you doesn't mean it's a bug in ExtJS :)



True! But the fact remains; it works in IE and doesn't work in FF and Chrome.

I did try your smaller sample program and indeed it works fine. But when calling form my much larger e-commerce application, the Ext.Ajax.request fails not posting the login form data. Obviously there is something in my page that breaks Ext in FF and Chrome.

This is not the first time I come across an issue with Ext JS failure when added to larger projects.

Thank you for helping me. Mauro

fay
5 Mar 2010, 2:38 AM
Without seeing the code of your larger app, I'm a bit stuck on what you should try next... All I can suggest is use FireBug with FireFox (and ext-all-debug.js) and step through your code - add breakpoints to your success + failure handlers, and to the code that calls your AJAX request (before + after). Also, ensure that you have "Break on all Errors" checked. And, of course, check what is being sent to and received from your server.


Obviously there is something in my page that breaks Ext in FF and Chrome.

It's always more likely that IE breaks than FF!

I just realised that there might be something else to consider. Would you have tested your php first by just loading it in FireFox's address bar? If so, try clearing your cache. You also might want to install something like the LiveHTTPHeaders add-on just to double-check you're not getting a 302 redirect.

hendricd
5 Mar 2010, 6:09 AM
Hi Fay,



True! But the fact remains; it works in IE and doesn't work in FF and Chrome.

I did try your smaller sample program and indeed it works fine. But when calling form my much larger e-commerce application, the Ext.Ajax.request fails not posting the login form data. Obviously there is something in my page that breaks Ext in FF and Chrome.

This is not the first time I come across an issue with Ext JS failure when added to larger projects.

Thank you for helping me. Mauro

If your login form is set up as (the usual default on various browsers) :

enctype="multipart/form-data"Ext.Ajax.request will treat it as a file upload automatically.

Try clearing it before POSTing your raw form in that fashion:

Ext.fly('frmLogin').set({enctype: ''});Also, make sure the "same-origin" policy isn't biting you during your tests.

mdutra123
5 Mar 2010, 7:04 AM
Hello hendricd,

I will try to submit Ext.Ajax.request w/ form set as you advised. Will let you know results. Thank you.


Hi fay,

I did actually build a hardcoded page that does not depend of the Production database and can be used for testing. This way we can test without interference on Production e-commerce site. I will later this after deploy this test page to our site and post instructions here on how you can run it. Thank you for helping me. Mauro