1. #11
    Ext User
    Join Date
    Nov 2007
    Posts
    68
    Vote Rating
    0
    markpele is an unknown quantity at this point

      0  

    Default


    I moved the unload event and handler inside the iframe.
    Tried setting a cookie or sending a synchronous ajax request.
    The cookie affect only later requests.
    The synchronous ajax request is being sent after the request for the next page.

    It looks like the beforeunload event is the only option and I need to wait few years
    until webkit will implement it inside iframes.

  2. #12
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Lightbulb Something occured to me...

    Something occured to me...


    @mark -- Perhaps from a different angle -- interception. If you're using ManagedIframe, you could handle the intercept a bit differently (from the parent page or apply similar technique from within -- if Ext is loaded in the child-page):

    Code:
    someContainer.add({
       xtype: 'iframepanel',
       defaultSrc : startUrl,
       listeners : {
          domready :  function(frame){   //raised for same-origin frames only
    
              //apply a delegation listener every time the frames url changes
              frame.getDoc().on('click', function(e){
                  var url = e.getTarget().href;
                  e.stopEvent();  //prevent the browser from acting on the click
    
                  (function(){
                        //set your session cookies here
    
                       Ext.Ajax.request({
                            method: 'POST', 
                            url : ???,
                            callback : function(options, success, response){
                                   success && frame.setSrc(url);
                             }
                        });
                        
                  }).defer(50); 
                 
                  return false;  //let the event cancel
               }, null , {delegate: 'a'});
          }
       }
      });
    Then it wouldn't matter if the Ajax request was synchronous or not.

    Just not sure how your child pages handle navigation tho....
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #13
    Ext User
    Join Date
    Nov 2007
    Posts
    68
    Vote Rating
    0
    markpele is an unknown quantity at this point

      0  

    Default


    @hendricd
    That's interesting. I'll play with this idea.
    Thanks

  4. #14
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default


    I am using the older version (I actually do not see the version # in the code..), and I am essentially JUST using the moduleManager to load external JS and CSS ondemand.

    It looks like there is a ton of functionality I am not using. Is this overkill for me? To simply use it to load external JS on demand?

  5. #15
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @brookd: Although ModuleManager has been been moved to jit.js,

    - some new Ext(global) features have been added
    - and Ext.lib.Ajax has been modernized to support xdomain, and multipart requests

    there is only an incremental increase in size relative to new features added.

    Your call really.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  6. #16
    Sencha User
    Join Date
    Mar 2009
    Location
    Reading, UK
    Posts
    33
    Vote Rating
    1
    Curtis Fletcher is on a distinguished road

      0  

    Default


    @hendricid:

    Thanks for your reply to the thread I started regarding ajax timeouts in ext. I've since found out that we will be targeting ie6 so I decided to give basex a try (current svn), but I'm really not getting very far.

    I was under the impression that basex didn't require JIT to work? I tried to replicate your multi-part demo at my end without your demo harness or JIT and it failed to recognise the multipart regardless what I tried. I thought that the ajax parts of basex simply overrode Ext.lib.Ajax and thus provided additional abilities but otherwise didn't effect ext ajax use in the usual manner? Additionally the thread titles indicates [2.x,3.x] from that I'm assuming that basex shouldn't have any negative effects on an ext 2.2.1 application from just being included? (I'm getting forms failing to include some of their elements)

    Are there any non-JIT standalone examples of multi-part ajax that I might be able to dissect? Because at the moment I can't get even get a basic test case running.

    Sorry if these seem like simple questions but I'm finding it difficult to test even basic usage. and the javadoc don't really say much about how to use the new events, unless I've missed some documentation or a wiki?

  7. #17
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Question


    @Curtis -- You do not need to incude jit.js to get any of the basic enhancements for lib.Ajax (including multipart parsing).

    Could you describe more about what you are attempting and how, and what problems you are having with Form posting?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #18
    Sencha User
    Join Date
    Mar 2009
    Location
    Reading, UK
    Posts
    33
    Vote Rating
    1
    Curtis Fletcher is on a distinguished road

      0  

    Default


    @hendricid:
    Sure, I didn't want to start posting code unless prompted
    I was hoping to add ext.basex to an application we already have and I'd then start working on using the additional events to allow a long running cgi to periodically "check-in" with the ext-ui, however as soon as I added the ext-basex.js script tag, a number of forms started misbehaving. (firebug showed that some or all of the form controls were not getting their values sent) so I decided to simplify and get a single working test case.

    So I tried to duplicate the test case here
    Code:
    <html>
    <head>
    <title>Multi-test</title>
    <script type="text/javascript" src="/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/ext-3.0-rc2/ext-all.js"></script>
    <script type="text/javascript" src="/ext-3.0-rc2/ext-basex.js"></script>
    <link rel="stylesheet" type="text/css" href="/ext-2.2.1/resources/css/ext-all.css"/>
    <script type="text/javascript">
    var dw = Ext.extend( Ext.Window, {
    
        title     : 'Multipart Ajax with ext-basex',
        width     : 745,
        height    : 369,
        maximizable   : true,
        initComponent: function(){
    
            this.items = [{
                xtype:'tabpanel',
                id: this.getId() + '-center',
                activeTab : 0,
                region : 'center',
    
                items: [{
                    title: "Response Output",
                    autoScroll : true,
                    responseTpl : new Ext.XTemplate(
                        '<tpl for="."><h3>Part #{partCt}</h3><span><hr>',
                        'Content-Type: {contentType}<br/>',
                        '<pre>{responseText:htmlEncode}</pre>',
                        '</span></tpl>'
                    ).compile(),
                    partCt : 0,
                    id : 'demo-panel',
                    ref: '../output',
                    onPart: function(response){
                        response.partCt = ++this.partCt;
                        this.responseTpl.append(this.body, response );
                    },  
                    onCompleted: function(response){
                        response.partCt = ' Full Response';
                        if(Ext.isArray(response.parts)){
                            forEach(response.parts, function(responsePart){ });
                        }
                        this.responseTpl.append(this.body, response );
                    },
                    onBooBoo: function(response){
                        response.partCt = ' Failure Response';
                        this.responseTpl.append(this.body, response );
    
                    },
                    tbar : [{
                        text   :'Make Request',
                        iconCls:'demo-action',
                        scope  : this,
                        handler : function(button){
    
                            var demo = Ext.getCmp('demo-panel');
                            demo.partCt = 0;
                            demo.body.update('');
                            Ext.Ajax.request({
                                url     : 'cgi-tst.php',
                                method  : 'POST',
                                onpart  : demo.onPart,
                                failure : demo.onBooBoo,
                                success : demo.onCompleted,
                                scope   : demo,
                                timeout : 15000
    
                            });
                        }
                    }]
                }]
            }];
    
            dw.superclass.initComponent.apply(this,arguments);
        },
        sourceModule : 'multipart',
        serverSource : 'demos/basex/multipart.php'
    });
    
    Ext.onReady(function(){
        new dw ({id:'multipwin'}).show();
    });
    </script>
    </head>
    <body>
    </body>
    </html>
    When using this firebug reports the output of the AJAX call as being:
    Code:
    --agile
    Content-Type: text/html
    
    Hello World at 12:06:58 PM
    --agile
    Content-Type: text/html
    
    <b>Hello World from xx.xx.xx.xx</b>
    --agile
    Content-Type: application/json
    
    {success:true, name:"yours"}
    --agile--
    And no part events fire. Using firebug on the demo on your site shows
    Code:
        ({success: true, name: "yours"});
     /* !eval(new String("("+json+');)) */
    as the response (which is what I'd expect, the last bit of the multipart)
    The only thing I currently suspect is that the test cgi/php I'm using seems to be setting Transfer-Encoding: chunked whereas yours does not.

    If I can just get basex multi-part working in a test case I'll investigate the application form issues further (stripping out the form panels from the application ends up with them working just fine)

    Thanks for any help you can offer.

  9. #19
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @Curtis --

    'chunked' is not a multipart HTTP response. As shown in the PHP sample code online, your initial response header ( per the HTTP RFC) for Content-Type must be structured as: multipart/mixed; boundary="name"


    Any more details about what Form elements are affected?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #20
    Sencha User
    Join Date
    Mar 2009
    Location
    Reading, UK
    Posts
    33
    Vote Rating
    1
    Curtis Fletcher is on a distinguished road

      0  

    Default


    @hendricid:
    Oh indeed, sorry I wasn't clear, the Content-Type is indeed 'multipart/mixed; boundary="XXX"' in both cases its just that in my local case "Transfer-Encoding" is "chunked" and in the demo you have hosted it is not set (and I can see the chunked encoding if I wireshark the http conversation)

    I'll post an example of a form that fails to submit properly in a moment (but as I said, I haven't been able to replicate it in isolation yet)

    Here is my isolated example, it behaves as I'd expect:

    Code:
    <html>
    <head>
    <title>xxx</title>
    <script type="text/javascript" src="/ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/ext-2.2/ext-all.js"></script>
    <script type="text/javascript" src="/ext-2.2/ext-basex.js"></script>
    <link rel="stylesheet" type="text/css" href="/ext-2.2/resources/css/ext-all.css"/>
    <script type="text/javascript">
        var lw = function() {
            var passwordField = new Ext.form.TextField({
                fieldLabel:'Password', 
                name:'password', 
                inputType:'password', 
                allowBlank:false 
            });
            
            function submitData() {
                login.getForm().submit({ 
                    waitTitle:'Connecting', 
                    waitMsg:'Authorising...',
                    url: '/misc/cgi-tst.php', 
                    success:function(){                
                        var redirect = 'index2.html'; 
                        window.location = redirect;
                    },  
                    failure:function(form, action) {
                        obj = Ext.util.JSON.decode(action.response.responseText); 
                        if (obj) {
                            Ext.Msg.alert('Login Failed!', obj.status_detail); 
                        } else {
                            Ext.Msg.alert('Login Failed!', 'No reason provided');
                        }
                        login.getForm().reset(); 
                    } 
                }); 
            }
            
            var login = new Ext.FormPanel({ 
                labelWidth:80,
                url: 'http://',
                width:230, 
                padding:200, 
                defaultType:'textfield',
                monitorValid:true,
                frame:true,
                items:[{ 
                     fieldLabel:'Username', 
                     name:'username', 
                     allowBlank:false 
                }, 
                    passwordField
                ],
                buttons:[{ 
                    text:'Login',
                    formBind: true,
                    handler: function() { 
                        submitData();
                    } 
                }]
            });
                 
            var win = new Ext.Panel({
                title:'Please Login',
                width:300,
                height:150,
                plain: true,
                layout:'fit',
              items: [login]
            });
            
            return {
                init: function(divId) {
                    win.render(divId);
                },
            };
        };
        Ext.onReady(function(){
            lw().init("here");
        });
    </script>
    </head>
    <body>
    <div id="here"></div>
    </body>
    </html>
    That is firebug shows the post to contain:
    Code:
    password:xxx
    username:xxx
    However, almost the same code in the application results in a post with no parameters if ext-basex.js is included and works fine without ext-basex.js

    Still working on stripping down the app to isolate when it starts working.
    EDIT:
    Got it, its 2.1, the app in question is running on 2.1 and I was testing on 3rc2 2.2.1 and 2.2 so it would seem that 2.1 +current ext.basex results in odd form behavior.

    So, back to getting a basic working multi-part submit. I'm tempted to scrape your entire multi-part demo and test it on a machine on my side, because if it misbehaves without any changes at all it must be the transfer-encoding that's messing it up, what do you think?