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?