xds ajax file upload

hoping someone can hel pon this one...

I am building a webservice to be consumed in many places.

www.mywebservice.dev and www.mysite.dev set up on my local machine to replicate the real thing in the wild...

I am using the dynamic script tag method to allow me to post a form including a file upload to a second server.

page on www.mysite.com makes a call to www.mywebservice.dev (at the moment its just echoing a file_get_contents call).

the web service returns

<script script type="text/javascript">
$(function(){
    var $scrpt = $('<script><\/script>');
    $scrpt
        .attr('type' , 'text/javascript')
        .attr('src','http://www.mywebservice.dev/_assets/script/processEvent.js');
$('head').append($scrpt);

});
</script>
<form id=£event-form" ... >
.......
</form>

which is injected into the page and no complaints...

Inside processEvent.js is another another call to include the jquery.form plugin (same as above call but diferenct file obviously) and an ajax call:

$('#event-form').bind('submit',function(){
    $(this).ajaxSubmit({
        url     : 'http://www.nmssys.dev/webservices.php',
        type    : 'POST' ,
        data    : { ajax : 'true' , webservice : 'processEvent' } ,
        success : function( response ){
                      consloe.log( ' WOOHOO ' , response );
                  },
        error   : function( jqXHR , textStatus , errorThrown ){
                      console.log( ' BORKED ' , jqXHR , textStatus , errorThrown );
                  }
    });
    return false;
});

So far so good...

Now when the submission is triggered I get some odd results.

According to the docs jquery.form will auto create an iframe to accomodate the file upload. When submiting I get the follwoing info from firebug...

Console:

[jquery.form] state = uninitialized
[jquery.form] canno开发者_如何学运维t access response document: Error: Permission denied to access property 'document'
[jquery.form] aborting upload... aborted
BORKED Object { aborted=1, status=0, more...} aborted server abort
[jquery.form] state = interactive

HOWEVER...

In the Net Tab under the entry for the request the response is a JSONObj as expected with details of the post sent...

Any help on getting this fecker right would be MOST welcome.

Hugs and Kisses to all.

The solution to getting response data back into the parent page was to use the jquery postmessage plugin

OK I have made progress!!!!

I was struggling with the iframetarget option which is the way to manage file uploads response. Browser was opening a new tab rather delivering output into a specified iframe.

The solution... create the iframe dynamically and append it to the body...

$('<iframe name="iframeUploader"/>')
    .prependTo('body')
    .attr({'id': 'responseTarget'})
    .css({'width':'1px','height':'1px','position':'absolute','left':'-9999px','top': '-9999px'});

and modify the submit like so:

$('#nms-event-form').live('submit',function(){
    $(this).ajaxSubmit({
        url          : 'http://www.mywebservice.dev/webservices.php' ,
        type         : 'POST' ,
        dataType     : 'xml' ,
        data         : { ajax : 'true' , webservice : 'processEvent' } ,
        success      : function( response , status ){
                           consloe.log( ' WOOHOO ' , response );
                       } ,
        error        : function( jqXHR , textStatus , errorThrown ){
                           console.log( ' BORKED ' , jqXHR , textStatus , errorThrown );
                       } ,
        complete     : function(){
                           console.log($('#responseTarget').html());
                       } ,
        iframeTarget : '#responseTarget'
    });
    return false;
});

the css simply prevents a flash of visibility when the iframe content changes.

This is delivering the response from the remote server and so far it looks like all data and files are passed.

In firebug I now get:

[jquery.form] state = complete

AND the response data can be seen in iframe...

I have added a complete option to the ajaxSubmit but as yet it is not firing (even though I get the state = complete mssg in console) but I'll over come this and report back when I get it...

The docs say that if you use the iframetarget, then it doesn't attempt to handle the response. It'd be nice to still be able to do this.