json response is not open in new window

Question

I want to open the json response in to the new window, i tried a lot but didn't get ant success, if any one can helps me, it will be appreciated.

this is my app.js code

Titanium.UI.setBackgroundColor('#fff');
var tabGroup = Titanium.UI.createTabGroup();

var login = Titanium.UI.createWindow({
    title:'User Authentication Demo',
    tabBarHidden:true,
    url:'main_windows/login.js'
});

var loginTab = Titanium.UI.createTab({
    title:"Login",
    window:login
});

tabGroup.addTab(loginTab); 
tabGroup.open();

and this is my login.js code

var win = Titanium.UI.currentWindow;

var UserLogin = Titanium.UI.createTextField({
    color:'#336699',
    top:10,
    left:10,
    width:300,
    height:40,
    hintText:'UserLogin',
    keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
    returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(UserLogin);

var UserPassword = Titanium.UI.createTextField({
    color:'#336699',
    top:60,
    left:10,
    width:300,
    height:40,
    hintText:'UserPassword',
    passwordMask:true,
    keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
    returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(UserPassword);

var loginBtn = Titanium.UI.createButton({
    title:'Login',
    top:110,
    width:90,
    height:35,
    borderRadius:1,
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
win.add(loginBtn);

/*
* Login Event Handling
*/
var loginReq = Titanium.Network.createHTTPClient();
var data, User, UserName, UserEmail, UserFirstName, UserLastName, UserAvatar, BioGraphyNative,BioGraphyEnglish,UserPhone,CreatedOn;
loginReq.onload = function() {
    var json = this.responseText;
    var response = JSON.parse(json);
    var message = response.message;
    var code    = response.code;

    if (response.data == null) {
        alert("Message " + message + "code " + code);
    } else {
        var win1 = Titanium.UI.createWindow();
        win1.open();

        User               = response.data.User;
        UserName           = User.UserLogin;
        UserEmail          = User.UserEmail;
        UserFirstName      = User.UserFirstName;
        UserLastName       = User.UserLastName;
        UserAvatar         = User.UserAvatar;
        BioGraphyNative    = User.BioGraphyNative;
        BioGraphyEnglish   = User.BioGraphyEnglish;
        UserPhone          = User.UserPhone;
        CreatedOn          = User.CreatedOn;
        alert("UserName " + UserName + "UserEmail " + UserEmail);
    }
};

loginReq.onerror = function() {
    alert("Network error");
};

/*
* Login Button Click Event
*/

loginBtn.addEventListener('click',function(e) {

    if (UserLogin.value !== '' && UserPassword.value !== '') {
        var win1 = Titanium.UI.createWindow();
        loginReq.open("POST", "url");
        var params = {
            UserLogin: UserLogin.value,
            UserPassword: UserPassword.value
        };
        loginReq.send(params);

    } else {
        alert("Username/Password are required");
    }
});

I am new in titanium, i f any body can helps me it will be very appreciated, and million ton thanks in advance.

Answer 1

Your window object is created but it's empty and has transparent background, so you don't see it on the screen.

You can change your onload to this:

loginReq.onload = function() {
    var json = this.responseText;
    var response = JSON.parse(json);
    var message = response.message;
    var code    = response.code;

    if (response.data == null) {
        alert("Message " + message + "code " + code);
    } else {
        var win1 = Titanium.UI.createWindow({
            backgroundColor: 'white',
            layout: 'vertical',
        });

        var User = response.data.User;
        for (var i in User) {
            win1.add(Ti.UI.createLabel({ text: User[i] });
        }
        win1.open();
    }
};

Also look out for JavaScript issues like declaring variable without var statement. Always use and try put all declaration at the beginning of function. To keep it monitored it's good have JSHint or JSLint installed and checking your code on every save.