Form submit isn't working

Question

I am creating login system with Sencha Touch 2. I am getting an issue while submitting my form. It is not getting response data from server. Below is my code

Controller:

Ext.define("MyMobile.controller.LoginController", {
extend: "Ext.app.Controller",
views: ['LoginView'],

config: {
    refs: {
        loginForm: "#loginFormPanel"
    },
    control: {
        'button[action=login]': {
            tap: "authenticateUser"
        }
    }
},

authenticateUser: function (button) {

    this.getLoginForm().submit({
        url: 'login/authenticate',
        method: 'POST',
        success: function (form, result) {
            debugger; //This block of code is not executing even after JSON response
            var jsonoutput = Ext.decode(result);  // json parsing
            Ext.MessageBox.alert('Error', "Success");

        },
        failure: function (form, result) {//This block of code is not executing even after JSON response
            Ext.MessageBox.alert('Error', "Invalid username/password");
        }

    });
}

});

View

Ext.define("MyMobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.mylogin",
id: 'loginFormPanel',

config: {

    margin: '0 auto',
    name: 'loginform',
    frame: true,
    url: 'login/Authenticate',
    title: 'Login',
    items: [
      {
      xtype: 'fieldset',

      itemId: 'LoginFieldset',
      margin: '10 auto 0 auto ',

      title: '',
      items: [
                {
                    xtype: 'textfield',

                    label: 'User Name',
                    name: 'my-username',
                    required: true,

                    placeHolder: 'Username'
                },
                {
                    xtype: 'emailfield',
                    label: 'Email',
                    name: 'Email'
                },
                {
                    xtype: 'passwordfield',

                    label: 'Password',
                    name: 'my-password',
                    required: true,

                    placeHolder: 'Password'
                }
            ]
  },
    {
        xtype: 'button',
        id: 'loginButton',
        margin: '25 auto 0 auto ',
        style: '',
        maxWidth: 200,
        ui: 'action',
        width: '',
        iconCls: 'user',
        iconMask: true,
        text: 'Login',
        action: 'login'
    }

    ]
}

 });

App.JS

Ext.application({

name: "MyMobile",
appFolder: "myapp",
controllers: ["LoginController"],
views: ['LoginView'],

launch: function () {

   var loginPanel= Ext.create('Ext.Panel', {
        layout: 'fit',

        items: [
            {
                xtype: 'mylogin'
            }
        ]
    });


    Ext.Viewport.add(loginPanel);
}

});

Can some one could figure out what should be the problem?

Below was the JSON response i am getting from server.

{"UserName":"Murali","isAdmin":true,"isAuthenticated":true}

Even after getting a JSON and 200 ok result, my code form submit function goes into failure callback. In failure call back function failure:function(form,result) i am getting result param as my JSON. But why it is in failure?

"Below was the JSON response from my server.", So you are getting a result, or is this the result you're expecting to get? — Rob, Oct 08 '12 at 09:29
I am getting JSON response and 200 ok result. But the success or failure call back of form submit is not executing — Murali Murugesan, Oct 08 '12 at 09:34
Hmm, what happens if you use `callback: function() { console.log('cb'); }`?? — Rob, Oct 08 '12 at 09:36
Yes i tried. Now it goes to Error Callback function failure. But why it goes when i get 200 Ok and JSON result? — Murali Murugesan, Oct 08 '12 at 09:42
I got my JSON result. But it goes into failure call back. I am using ASP.Net MVC for server side and returning JSON data — Murali Murugesan, Oct 08 '12 at 09:51
You're not getting an error in your browser's console? Try printing the parameters for clues.. — Rob, Oct 08 '12 at 09:53

score 2 · Accepted Answer · edited Oct 28 '19 at 13:11

2

Make your server return a JSON response like below:

If success:

{
    "success":true,
    "UserName":"Murali",
    "isAdmin":true,
    "isAuthenticated":true
}

If failure:

{
    "success":false
}

Read more here: http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel-method-submit

edited Oct 28 '19 at 13:11

Issung

385
3
14

answered Oct 08 '12 at 09:54

Sreenath S

1,269
1
14
21

Hi Sreenath. Awesome ! It worked like charm! Thanks. Is it possible to persist my cookie value sent as part of response header and use it for subsequent request? Like the way, we do it in normal web for session management – Murali Murugesan Oct 08 '12 at 09:59
1

yes ofcourse its possible, read this: http://stackoverflow.com/a/5045117/1600692 or this http://stackoverflow.com/questions/8733025/setting-persistent-cookies-with-javascript, you can do it from inside your `success` method. – Sreenath S Oct 08 '12 at 10:06
Thanks for the reference. I was going through http://stackoverflow.com/questions/12384150/authentication-on-sencha-touch-and-remote-server?lq=1. Also getting confused like how to store cookie in local storage and retrieve and send it as a header parameter in every request. Is there any example? – Murali Murugesan Oct 08 '12 at 10:08
servers usually use `Set-Cookie` header to set cookies, you shouldn't be worrying about that, look at this: http://stackoverflow.com/questions/3340797/can-an-ajax-response-set-a-cookie. even in case of AJAX request that method works – Sreenath S Oct 08 '12 at 10:34

Form submit isn't working

1 Answers1