Unable to replace view.

Discontinued products DHTMLX Touch
#1

Hi All,

I create a login view and after the user click the button, the login view will be replaced by
another view called main view, but it doesn’t work, could anyone let me know what’s the problem please?

Winston.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>mobile</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
	<link rel="stylesheet" href="touchui.css" type="text/css" media="screen" charset="utf-8">
	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8">
	<script src="touchui.js" type="text/javascript" charset="utf-8"></script>	
	<script src="config.js" type="text/javascript" charset="utf-8"></script>	
	
	<style>            
			.tb_sup{
				font-size:10px;
				text-shadow: none;
				font-style:italic;
			}
    </style>
	
</HEAD>
<BODY>
<script type="text/javascript" charset="utf-8">
			dhx.ready(function(){
			
				dhx.ui.fullScreen(); //activates the full-screen mode and hides the address bar. We use default values (268, 420), that's why don't pass any parameters.
 						
				dhx.ui(loginView, $$('app'));
								
			});
									
			function doLogin(){
				
				dhx.ui(mainView);										
				return;
				
			}
		</script>
		
</BODY>
</HTML>

config.js

var mainView = { id: 'app1', view: 'layout',
	rows: [
		{ view: 'layout', type: 'wide',
			rows: [
				{ view: 'multiview', type: 'wide',
					cells: [
						{ view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_2'}
					], id: 'multiview_2'
				}
			], id: 'layout_2'
		}
	]
};

checkEmptyForm = function(obj) {
				
					if(obj.memberid == "")
					{
						dhx.alert({
								title: "Error",
								message: "Missing Member ID"
						});
						return false;
					}
					else if(obj.password == "") 
					{
						dhx.alert({
								title: "Error",
								message: "Missing Password"
						});
						return false;
					}
					return true;;
				};
				
validate_data=function(){
				if ($$("myform").validate()==true)
				{
					doLogin();
				}
			};

var loginView = {  id: 'app', view: 'layout',
	rows: [
		{ view: 'layout', type: 'wide',
				 rows:[
						{ 	
							view:"toolbar", 
							type:"MainBar", 
							elements:[
								{view:"label", label: "POS <sup class='tb_sup'>mobile</sup>", align:'left'}								
							]
						},
						
						{
							view:"form", id:"myform", css:"account",
							elements:[
								{ view:"label", label:"Member ID",height:28,css:"top"},
								{ view:"input",  id:"memberid",height:48,inputWidth:290},		
								{ view:"label", label:"Password",height:23},
								{ view:"input",type:"password", id:"password",height:48,inputWidth:290}
								
							],
							rules:{
								$obj:checkEmptyForm
                            }
						},
						
						{view:"toolbar", type:"MainBar", elements:[
							{ view:"button", type:"round", label: 'Sign In',  align:"center", click:"validate_data" }
						]}
					]
		}
	], id: 'layout_login'
}
#2

loginView in your sample has two ids assigned - app1, and layout_login ( both assigned to the same view )

You need to
a) remove second id
b) change doLogin as
$(‘app’).destructor();
dhx.ui(mainView);

Alternative strategy will be to create multiview as top element and place login and main view in its cells. In such case you will need call something as $$(‘app1’).show() to change visible view.