Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    adamhull is on a distinguished road

      0  

    Default ExtJS treating text/html as JSON in Chrome?

    REQUIRED INFORMATIONExt version tested:
    • Ext 4.0.2a
    Browser versions tested against:
    • Firefox 5.0.1 (mac) (works)
    • Chrome (mac) (broken)
    Description:
    • Sorry if this is not a bug but I searched high and low for an answer and can only conclude that somewhere ExtJS is behaving differently with Chrome than with Firefox. When I use a standard HTML form with a text/javascript Prototype response from the server, it works properly in Chrome. When I use the ExtJS code below with Firefox 5.0.1 it works properly with a text/html response. What doesn't work is when ExtJS tries to use a text/html response from the server with Chrome. Chrome/ExtJS treats the text/html as JSON. Thanks for your help.
    Steps to reproduce the problem:
    • use Chrome
    • use form provided under Test Case
    • make sure server will return header with ContentType text/html
    The result that was expected:
    • server responds with:
    • <div>
      <h1>Thank you.</h1>
      <p>We've received your inquiry and will get back to you with a response shortly.</p>
      </div>
    • form_result div should be populated with server response
    The result that occurs instead:
    • Chrome throws error:
    • Uncaught Ext.Error: You're trying to decode an invalid JSON String
    • Header Response looks like this:
    • Cache-Control:
      private, max-age=0, must-revalidate
    • Connection:
      Keep-Alive
    • Content-Length:
      126
    • Content-Type:
      text/html; charset=utf-8
    • Date:
      Sun, 14 Aug 2011 16:01:18 GMT
    • ETag:
      "83cce4e9e5c730581cc5dccd476290e3"
    • Keep-Alive:
      timeout=5, max=100
    • Server:
      Apache/2.2.17 (Unix) DAV/2 Phusion_Passenger/3.0.8
    • Set-Cookie:
      _ext4.com_session=6a917931a800dc480bd7d7cb8eb310de; path=/; HttpOnly
    • Status:
      200
    • X-Powered-By:
      Phusion Passenger (mod_rails/mod_rack) 3.0.8
    • X-Runtime:
      146
    Test Case:
    Code:
        
    <div id="form_result"></div>
    
    
    <script type="text/javascript">
          Ext.onReady(function(){
              Ext.QuickTips.init();
    
    
              var contact_form = Ext.create('Ext.form.Panel',{
                  id: 'contact_form_panel',
                  url:'/widgets/contact_us/new/dca81f9ee9a8c793338bb7092cdddf82b30b21ac',
                  title: 'Contact Form',
                  width: 350,
                  frame: true,
                  bodyStyle:'padding: 5px 5px 0;',
                  renderTo: 'contact_form_target',
                  items: [{
            "xtype": "textfield",
            "fieldLabel": "First Name",
            "name": "first_name",
            "value": "", 
            "allowBlank": true,  
            "readOnly": false,
            "width": 200,
            "height": "auto",
            "labelWidth": 75},{
            "xtype": "textfield",
            "fieldLabel": "Last Name",
            "name": "last_name",
            "value": "", 
            "allowBlank": true,  
            "readOnly": false,
            "width": 200,
            "height": "auto",
            "labelWidth": 75},{
            "xtype": "textfield",
            "fieldLabel": "Email",
            "name": "email",
            "value": "", 
            "allowBlank": true,  
            "readOnly": false,
            "width": 200,
            "height": "auto",
            "labelWidth": 75,    
            "validateOnBlur": true,
            "validator": function(v){
              var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
              var regex = new RegExp(pattern);
              return regex.test(v);          
            }},{
            "xtype": "textarea",
            "fieldLabel": "Message",
            "name": "message",
            "value": "", 
            "allowBlank": true,  
            "readOnly": false,
            "width": 200,
            "height": 100,
            "labelWidth": 75}],
    
    
                  buttons: [{
                      text: 'Submit',
                      listeners:{
                          'click':function(button){
                              var formPanel = Ext.getCmp('contact_form_panel');
                              formPanel.getForm().submit({
                                  reset:true,
                                  success:function(form, action){
                                      Ext.get('form_result').dom.innerHTML = action.response.responseText;
                                      var scriptTags = Ext.get('form_result').dom.getElementsByTagName('script');
                                      Ext.each(scriptTags, function(scriptTag){
                                            eval(scriptTag.text);
                                      });
                                  },
                                  failure:function(form, action){
                                    Ext.get('form_result').dom.innerHTML = action.response.responseText;
                                  }
                              });
                          }
                      }
                      
                  },{
                      text: 'Cancel'
                  }]
              });        
          });        
           </script>
      <div id="contact_form_target"></div>
    HELPFUL INFORMATION
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Mac OS X 10.6.8

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    BBoyle is on a distinguished road

      0  

    Default Same bug on Windows

    This is happening on windows as well with chrome. Exact same error.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    adamhull is on a distinguished road

      0  

    Default appears to not be limited to chrome

    I'm seeing the same thing in IE 9. IE 8 and 7 have the same problem, different error message:

    IE 9:
    SCRIPT5022: You're trying to decode an invalid JSON String: <div>
    <h1>Thank you.</h1>
    <p>We've received your inquiry and will get back to you with a response shortly.</p>
    </div>
    ext-all-debug.js, line 4738 character 17

    I
    E 7 & 8:
    SCRIPT5022: Exception thrown and not caught
    ext-all-debug.js, line 4738 character 17

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    adamhull is on a distinguished road

      0  

    Default Browser Testing Summary

    Here's an updated summary of browser behavior:
    • Firefox 5.0.1 (mac) - works
    • Firefox 6.0 (mac) - works
    • Firefox 3.6 (win) - works
    • Firefox 6.0 (win) - works
    • Chrome (mac) - broken
    • Chrome (win) - broken
    • IE 7, 8 & 9 - broken
    • Safari 5.1 - broken
    Last edited by adamhull; 30 Aug 2011 at 12:27 PM. Reason: adding Safari to testing summary

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    29
    Vote Rating
    1
    flatbugz is on a distinguished road

      0  

    Default +1

    Also experiencing this. Seems like some very thorough steps to re-produce have already been provided.

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    adamhull is on a distinguished road

      0  

    Default

    Broken in Safari 5.1 as well.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,822
    Vote Rating
    782
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default

    The form expects a JSON response, which is why you're seeing it throw the exception.

    There's more info in the docs here: http://docs.sencha.com/ext-js/4-0/#!....action.Submit
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    adamhull is on a distinguished road

      0  

    Default why does it work in FF?

    Thanks for the reply evant. But why then does it work in Firefox? The inconsistent behavior is confusing.

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    17
    Vote Rating
    4
    k.pavithra is on a distinguished road

      1  

    Default

    By default ExtJS treats the server response as JSON. If we are not returning the response in JSON format. Instead if we are returning in text/html format. Then in FormPanel we should make: standardSubmit:true Then the html response will render properly in the given window. Hope this helps.

  10. #10
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    17
    Vote Rating
    4
    k.pavithra is on a distinguished road

      0  

    Default Code Sample

    var formPanel = Ext.create('Ext.form.Panel', {
    xtype: 'form',
    frame: true,
    url:'/intruvert/action/AuthServerAction',
    method:'POST',
    title: 'Edit Trusted Domain Controller',
    width: 600,
    height:400,
    bodyPadding: 5,
    standardSubmit: true,
    fieldDefaults: {
    labelAlign: 'left',
    labelWidth: 200,
    anchor: '100%'
    },
    items: [
    {
    xtype: 'hiddenfield',
    name: 'accessRight'
    },
    ],
    buttons: [
    {
    text: 'Update',
    formBind: true,
    handler: function() {
    var form = this.up('form').getForm();
    if (form.isValid()) {
    form.submit({
    params: {userAction: 'update'},
    success: function(form, action) {
    Ext.Msg.alert('Success', 'Successfully Updated!!!');
    },
    failure: function(form, action) {
    //Ext.Msg.alert('Failed',action.failureType + ' Failure');
    switch (action.failureType) {
    case Ext.form.action.Action.CLIENT_INVALID:
    Ext.Msg.alert('Failure1', 'Form fields may not be submitted with invalid values');
    break;
    case Ext.form.action.Action.CONNECT_FAILURE:
    Ext.Msg.alert('Failure2', 'Ajax communication failed');
    break;
    case Ext.form.action.Action.SERVER_INVALID:
    Ext.Msg.alert('Error', action.result.msg);
    }
    }
    });
    } // if
    } // handler
    } // Save button
    ]
    });