action.result is undefined

[mike.tallroth]

This problem sounds similar at the start to the following post:
http://extjs.com/forum/showthread.php?t=42231.

However, I'm having a slightly different problem.

I have an upload form which I submit via a BasicForm from within a PanelForm. I submit this to a php server script that renames the file, copies it to a storage location, then responds to the client with JSON indicating success and including a few other variables like a result message, the old name and the new name of the file.

When I load the form from one server, and submit the form to the same server (with an Apache alias), everything works just fine. The JSON response gets parsed out automatically into the action.result object. This works regardless of whether I'm using localhost or a remote server.

However, when I load the form from one server and submit the form to a different VirtualHost (even on the same domain but on a different port), the submit works fine, the response from the server works fine, the JSON comes across as expected, but it doesn't appear to be parsed and loaded into the action.result object. When I try to access it, I get an "action.result is undefined" error in FireBug.

The response IS being parsed enough for the correct success / failure event handler to be called when the submit is complete, just not loaded into the action.result object.

Because I'm submitting this to a different VirtualHost, I suppose that's the same as a different domain. Am I dealing with some security issue with my browser (FF)? That doesn't seem to explain the actions on the response side however with most of the activity happening just as it should, just not the loading of that final variable.

Any ideas?
Mike Tallroth

[Animal]

Are you setting the Content-Type of the response to "text/html"?

[mike.tallroth]

I wasn't doing anything to actively control that, but yes, it is text/html in both cases.

did not parse properly (POSTed to localhost:8000):

Date: Thu, 19 Mar 2009 18:31:37 GMT 
Server: Apache/1.3.41 (Darwin) PHP/5.2.2 
X-Powered-By: PHP/5.2.2 
Keep-Alive: timeout=15, max=100 
Connection: Keep-Alive 
Transfer-Encoding: chunked 
Content-Type: text/html

parsed properly (POSTed to localhost):

Date: Thu, 19 Mar 2009 18:35:27 GMT 
Server: Apache/1.3.41 (Darwin) PHP/5.2.2 
X-Powered-By: PHP/5.2.2 
Keep-Alive: timeout=15, max=96 
Connection: Keep-Alive 
Transfer-Encoding: chunked 
Content-Type: text/html

I'll send some code in another post.

[mike.tallroth]

My server side code that receives the upload responds with the following string:

if ($success === false) {
    // Report the rsync failure.
    echo "{failure: true, message: 'File was not rsynced properly', ";
    echo "error: '{$error}'}";
    exit();
} else {
    // Report success.
    echo "{success: true, message: 'File Uploaded', name: '{$origname}'," .
        " destination: '{$destname}'}";
    exit();
} 

The configuration object I use when submitting the form:

    var upload_config = {
        success:
            function uploadSuccess(form,action) {
                // update the status in the upload window
                Ext.get('panel-status-' + form.idNumber).update(
                    'File sent'
                );
                // update the full file name and path to be passed to
                // create the ticket
                Ext.get('ds-name-' + form.idNumber).set(
                    {value:action.result.destination}  // <----- error occurs here
                );
                // update the status in the main window, text and color
                status[form.idNumber].update(
                    'File sent: ' + action.result.name
                );
                status[form.idNumber].setStyle(
                    'color', 'green'
                );
                pt_box[form.idNumber].set({checked:true});
                setTimeout(function(){form.window.hide();},1500);
            },
        failure:
            function(form,action) {
                var message = action.result.message;
                var error = action.result.error;
                Ext.get('panel-status-' + form.idNumber).update(
                    'Failed sending datasheet, please retry ('
                        + message + ':' + error + ')'
                )
                Ext.get('main-status-' + form.idNumber).update(
                    'Failed sending datasheet, please retry'
                );
            },
        scope: this
    }

Then, here is some of the code used to create the form and submit it:

    function DatasheetWindow(idNumber, uploadUrl, filename, width, height, config) {

        ...

        config = config || upload_config;

        this.formPanel = new Ext.form.FormPanel({
            url:                uploadUrl,

            ...

            buttons: [{
                text:           'Upload',
                handler:        function() {

                    // process upload form
                    var form = this.getForm();

                    if (form.isValid()) {
                        form.waitMsgTarget = true;
                        Ext.get('panel-status-' + this.idNumber).update('Sending');
                        form.idNumber = this.idNumber;
                        form.window = this.window;
                        config.scope = this;
                        form.submit(config);
                    }
                },
                scope: this
            }]
        });

        this.window.insert(0, this.formPanel);
    }

[Animal]

You'll have to do some digging.

Use ext-all-debug.js

Look for the function

doFormUpload : function(o, ps, url){

In there, you will see it set up a callback function which becomes the onload listener for the IFRAME to which the submit was targetted:

        function cb(){
            var r = {  // bogus response object
                responseText : '',
                responseXML : null
            };

            r.argument = o ? o.argument : null;

            try { //
                var doc;
                if(Ext.isIE){
...

Set a break in that callback function, and step through it.

It attempts to create a fake XMLHttpRequest by grabbing innerHTML from the document body. That should yield your JSON.

See what's happening.

[mike.tallroth]

By the way, thanks for the great suggestions Animal!

I added the breakpoint as suggested and found that doc.body contains a bunch of stuff including innerHTML. I can see this using FireBug. But as I step through the cb function, it gets to the line "if(doc && doc.body){" then drops to the catch block.

In the catch(e) block, I added "alert(e);" and got the following popup:
Error: Permission denied to get property HTMLDocument.body

So, this answers the direct question of "why" its not getting the response, but it begs a bigger question, "why" can't I do that?

[mike.tallroth]

Maybe the answer to the bigger question is blocking of XSS. This is the first time I've tried this, so I suppose that makes sense.

If anyone else has any comments on that, I'd love to hear them, but it seems like this is the resolution to my problem.

Thanks again for the help!

[Animal]

If the data in the frame comes from another domain, you're not going to be able to access it.

[linuxguy2001]

Just in case you're still having issues with this (I was too and couldn't find an answer anywhere), this is what worked for me:

If you have any fields in your form with --> allowBlank: false
i.e:

{    xtype: textfield
            name : "full_name",
            fieldLabel : "Full Name",
            allowBlank: false
        }

You'll need to add this right before your form submit--> if (simple.getForm().isValid())
i.e:

buttons:
        [{
            text: 'Reset',
            handler: function(){simple.getForm().reset()}
        },{
            text: 'Submit',
            handler: function()
            {
         if (simple.getForm().isValid())                
                simple.getForm().submit
                ({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },

                    failure: function(form, action) {
                       Ext.Msg.alert('Failure', action.result.error);
                    }
                });
            }
        }]

Hope this helps. It took me forever to figure this out, I spent hours looking for a solution and all I could find were tons of run around and no straight answers.

[joesir]

I get similar issue, linuxguy2001's solution works, Thanks