Design view item detail page template?

Design view item detail page template?

I have a listitem.
I want after clicking on the item detail new data load of items.

I want get parameter form "#itemSearch/'+manh+'/'+taikhoan+"  // <a href="#itemSearch/'+manh+'/'+taikhoan+'" data-refresh-ajax="true"
I want to design a panel for all items. and every time you click on a detailed item data load of that item, to load detailed data I need the parameters on the item. So I do like?

See code after 
thank

Home 

Detail 

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>

<head>

    <title>Login View Template</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
    <link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/fastclick.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/jquery.numberformatter-1.2.4.js"></script>  
    <style>
        .panel-subinfo {
    margin-bottom: 5px;
    border-bottom: 4px solid #89dfff;
    border-radius: 0;
    background-color: #f1f1f1;
    padding: 5px;
}

    .panel-subinfo > .panel-heading {
        text-align: right;
        padding: 0;
    }

    .panel-subinfo .panel-body {
        padding: 5px 0;
    }

.panel.nh .panel-heading {
    display: none;
}

.panel-body-c1 .panel-body {
    background-color: #7761a7;
    color: #fff;
}

.panel-body-c1 > .panel-body > i {
    color: gray;
}

    </style>    
    <script>
        var donvi=0;
        $(document).ready(function(){

            $("#main").bind("panelbeforeload", startApp);
            $("#itemSearch").bind("panelbeforeload", startDetail);
            // setup signin and signup button events
            $("#login").on("click", function(){
                signIn();
            });
            
            $("#bntXem").on("click", function(){
                search();
            });
            
            $("#sigout").on("click", function(){
                showAbout();
            });
        });

        function signIn(){

            var valid_login = true;
            
            $.getJSON('http://10.1.3.155/taikhoan/AuthenService.asmx/Login', 
                {
                    user: "1",
                    pass: "2"
                }, 
                function(data) {
                    donvi=11000;
                    //valid_login=data;
                });
            // SIGNIN SERVER CALL CODE GOES HERE
                 donvi=11000;
            if(valid_login){
                $.afui.loadContent("#main", null, null, "fade");
            }
            else
            {
                //Example use of the error toast api
                var opts={
                    message:"Username or password incorrect",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"error"
                };
                $.afui.toast(opts);
            }
        }

        function startApp(){
            //clears all back button history
            //var number = 653654365;
            //number = $.formatNumber(number, {format:"#,###.00", locale:"us"});
            //alert(number);
            $.afui.clearHistory();
            getData('http://10.1.3.155/TaiKhoan/DataJsonService.asmx/GetAllTaiKhoan');
            // your app code here 
        }
        
        function getData(url) {
            var itemSearch = $("#itemSearch").html();
            $.getJSON(url,{iddonvi:donvi}, function(data){
            var list_html = "";
            var total_html = '<span style="margin-top: 5px; margin-bottom: 5px; font-weight: 300; font-weight: bold;" class="nfont">';
            // Tinh tong cong
            for(var i=0; i< data.Total.length; i++){
                var val = data.Total[i].currency
                total_html += val+'<br/>'
            }
            // Du lieu chi tiet    
            for(var i=0; i< data.TaiKhoan.length; i++){
                var manh = data.TaiKhoan[i].MaNH;
                var taikhoan = data.TaiKhoan[i].SoTK;
                var sodu = data.TaiKhoan[i].SoCuoiKy;
                var tyle = data.TaiKhoan[i].Tyle;
                var curr = data.TaiKhoan[i].Currency;
                list_html += '<li><a href="#itemSearch/'+manh+'/'+taikhoan+'" data-refresh-ajax="true"> <div style="text-align:right;padding-right:15px"><div style="color: #BC58C9;">'+manh+' TK: '+taikhoan+'</div><div><span style="font-weight: bold;">'+sodu+'</span> '+curr+' chiếm <span>'+tyle+'</span></div></div></a></li>';
                
                /* Dynamically add panel */
                var panel_content = '<div class="panel" data-title="'+manh+'" id="'+manh+'"><div id="total" style="border-left: 5px solid rgb(255, 116, 116);padding:10px 20px;text-align:right;"><span style="margin: 0; font-weight: 300;" class="hfont">Tài khoản: '+taikhoan+'</span><br /><span style="margin-top: 5px; margin-bottom: 5px; font-weight: 300; font-weight: bold;" class="nfont">Số dư : '+sodu+' '+curr+'</span></div>'+itemSearch+'</div>';
                //$("#listview").append(panel_content);
            }
			$("#total").append(total_html+'</span>');
			$("#dataList").append(list_html);
			});
		} 
        
        
        function startDetail(){
            // clears all back button history
            //$.afui.clearHistory();
            $("#subtotal" ).empty();
            $.afui.setTitle("New Title");
            getDataDetail('http://10.1.3.155/TaiKhoan/DataJsonService.asmx/GetATaiKhoan');
            // your app code here
        }
        
        function getDataDetail(url) {
    
        var html_sub = "";
        $.getJSON(url,{taikhoan: "26110001236688",nganhang: "BIDV"}, function(data){
        // Tinh tong cong
            for(var i=0; i< data.ATaiKhoan.length; i++){
                var manh = data.ATaiKhoan[i].MaNH;
                var taikhoan = data.ATaiKhoan[i].SoTK;
                var sodu = data.ATaiKhoan[i].SoCuoiKy;
                var curr = data.ATaiKhoan[i].Currency;
                html_sub = '<span id="nhinfo" style="margin: 0;font-weight: 300;color: #BC58C9;">'+manh+' Tài khoản: '+taikhoan+'</span><br />';
                html_sub += '<span id="sodu" style="margin: 0;font-weight: 300;font-weight: bold;">'+sodu+' '+curr+'</span>';
            }
            $("#subtotal").append(html_sub);
        });
        
        } 
        
        function search(){
            alert('aaaaaaaaaaaa')
        }
        
        function showAbout(){
            //$.afui.setTitle("New Title");
            $.afui.popup( {
               title:"About",
               message:"This is a test of the emergency alert system!! Don't PANIC!"
             });
        }
    </script>

</head>

<body>

    <div id="splashscreen" class='ui-loader heavy'>
        App Framework - Login View
        <br>
        <br>
        <span class='ui-icon ui-icon-loading spin'></span>
        <h1>Starting app</h1>
    </div>

    <div class="view" id="mainview">
        <header>
            <h1>Login View Example</h1>
            <a id="sigout" href="#" class="button icon info" style="float:right"></a>
        </header>

        <div id="listview" class="pages">

            <!-- Login View -->
            <div class="panel" data-title="Số dư tài khoản" id="signin" data-header="none" data-footer="none" selected="true">
                <div style="text-align:center">
                    <br>
                    <br>
                    <p>TẬP ĐOÀN ĐIỆN LỰC VIỆT NAM</p>
                    <br>
                    <br>
                </div>
                <input name="username" type="text" placeholder="Tên đăng nhập" />
                <input name="password" type="password" placeholder="Mật khẩu" />
                <a class="button block" href="#" id="login">Đăng nhập</a>
            </div>

            <!-- Main App View -->
            
            <div class="panel" data-title="Số dư tài khoản" id="main">
                <div id="total" style="border-left: 5px solid rgb(255, 116, 116);padding:10px 20px;text-align:right;">
					<span style="margin: 0;font-weight: 300;">Tổng cộng</span><br />
				</div>
                <ul id="dataList" class="list">
                </ul>
            </div>
            
            <!--Detail View Pages for each list item-->
            <div  class="panel" id="itemSearch" >
               <div id="subtotal" style="border-left: 5px solid rgb(255, 116, 116);padding:10px 20px;text-align:right;">
				</div>
                <input type="date" name="tuday">
                <input type="date" name="denday">
                <a class="button" id="bntXem" style="width: 100%">Xem!</a>
               
                <div class="panel-subinfo" style="width: 100%;height:30px;">
                    <div class="panel-body" style="text-align: right">
                        <span style="font-weight: bold; float: left" >Đầu kỳ</span>
                        <span style="font-weight: bold;" > </span>
                    </div>
                </div>
                
                <div class="panel-subinfo" style="width: 100%;height:30px;">
                    <div class="panel-body" style="text-align: right">
                        <span style="font-weight: bold; float: left" >Cuối kỳ</span>
                        <span style="font-weight: bold;"> </span>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

</body>

</html>

 

6 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.
Best Reply

Let me reconfirm you want after clicking on details you want to go to a particular page? Is that correct?

Yes

Toi muon 

Hello,

You can use list view. Please see the attachment.

 

 

Or you can use JQM List view.

 

Hi ,

But..suppose we want to get the list items from a database (eg 100 items)...It's a bit strange having to declare 100 panels for their content

How could show content dynamically without creating 100 list items and 100 panels?

Maybe...

$.getJSON(url/getListItems.php',
                      {category: 5,},
                      function(data){
                        $.each(data.data,function(index,val){
                            $("#navPage1 ul").append('<li><a href="#content'" onclick="$.afui.clearHistory()">'+val+'</a></li>');  
                        });
                        }
                     );

?

This example does not work.

 

Thanks in advance

Hi Carlos,

I use a lot code like your sample to populate list items from database. Try removing "ul" from the list locator, like this:

$("#navPage1")...

Asuming that navPage1 is the id of the ul list.

Regards,

Diego

Leave a Comment

Please sign in to add a comment. Not a member? Join today