locked
Help on designing Connected device dash board RRS feed

  • Question

  • User1263547581 posted

    Dear all,

    I have a device database table which is used to display different type of client device to the web site.
    from that device table I have different information like :

    - Device name
    - Ip Adress
    - Mac Adress
    - Device Type

    This information is send from each client device every minutes in order simply to informed in a way that they are still alive.

    This part works great.

    Now I have difficulty to display efficiently the information in my web page in order to render it as below

    Device Dashboard

    Thanks for your help on designing this simple device status.
    Of course if screen is smaller device should render on mobile correctly

    regards

    Thursday, December 1, 2016 3:39 PM

Answers

  • User1263547581 posted

    Hello, I have tried to impement your sample in my page but nothing gets displayed and no error return.

    Here is below my test controller

    public JsonResult DeviceList()
    		{
    			using (DeviceModel s = new DeviceModel(base.uiDTO, base.LanguageID))
    			{
    				
    				List<ClientDeviceVM> itemlist = new List<ClientDeviceVM>()
                {
                    new ClientDeviceVM()
                    {
                          DeviceID="1001",  DeviceName = "Device1",  IpAdress="10.128.172.1"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1002", DeviceName = "Device2", IpAdress="10.128.172.2"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1003", DeviceName = "Device3", IpAdress="10.128.172.3"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1004", DeviceName = "Device4", IpAdress="10.128.172.4"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1005", DeviceName = "Device5", IpAdress="10.128.172.5"
                    }
                };
    
    				
    		return Json(itemlist, JsonRequestBehavior.AllowGet);
    
    				
    			}
    		}

    Then here is below my test page

    @model SCMS.Web.Models.ViewModels.ClientDeviceVM
    @using SCMS.Web.Helpers;
    
    @{
    	ViewBag.Title = Resources.headingFlashInfo;
    	ViewBag.SelMenu = "device";
    	UserInfoDTO uiDTO = AppHelper.GetUserInfoDTOFromSession();
    
    	bool isAdmin = uiDTO.IsPortalUser;
    	//string backURL = AppHelper.ServerBaseURL + (isAdmin ? "store" : "home") + (isAdmin ? "/adminmenu" : "/index");
    	string backURL = AppHelper.ServerBaseURL + ("home") + ("/index");
    }
    
    <h2>@ViewBag.Title</h2>
    <div class="form-group">
    	<a href="@backURL" role="button" class="btn btn-default"><i class="icon-arrow-left"></i><span>@Resources.lblBack</span></a>
    </div>
    <input id="btnGetDevice" type="button" value="Get Device" />
    <div id="div_device" class="col-xs-12 col-sm-12 col-lg-12">
    </div>
    
    <script type="text/javascript">
    
    	$(function () {
    		$("#btnGetDevice").click(function () {
    
    			//Using Ajax function all web method to get all devices
    			$.ajax({
    				type: "GET",
    				url: ServerBaseURL + "device/DeviceList",
    				contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				done: function (data) {
    					var list = data;
    					//dynamically create html elements and attach bootstrap css style.
    					var html = "<table class='table table-bordered'><tr>"
    					//using each function to loop through the device list.
    					$.each(list.d, function (index, element) {
    						html += "<td  style='text-align:center'>" +
    						+ "<span>" + element.IpAdress + "</span><br />" +
    						"<span>" + element.DeviceName + "</span><br />" +
    						"<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.DeviceID + "' />" +
    						"</td>";
    						if (index % 3 == 2) {
    							html+="</tr><tr>"
    						}
    					});
    					html += "</table>"
    					$("#div_device").append(html);
    				},
    				fail: function (r) {
    
    					alert("error");
    				},
    				failure: function (r) {
    					alert("failure");
    
    				}
    			});
    			return false;
    		});
    
    	});
    	
    </script>
    

    Any idea whay nothing gets displayed on my page ?

    regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 19, 2016 12:14 PM
  • User1263547581 posted

    Yes I am using already bootstrap and JQerry on my site and it is loaded from a shared layout at start . here is all what is laoded from my shared page when I press F12

    <!DOCTYPE html>
    <html lang="fr-FR" dir="ltr">
    <script>
    	var SelectedCulture = "fr-FR";
    	var ServerBaseURL = "http://localhost:3000/";
    </script>
    <head>
    	<meta charset="utf-8" />
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Configuration Informations Breves</title>
    	<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    	<meta name="viewport" content="width=device-width" />
    	<!-- Force latest IE rendering engine or ChromeFrame if installed -->
    	<!--[if IE]>
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<![endif]-->
    
    	<script src="/Scripts/Core/jquery-1.8.2.js"></script>
    
    	<script src="/Scripts/Core/modernizr-2.6.2.js"></script>
    
    	<script src="/Scripts/Core/jquery-ui-1.8.24.js"></script>
    
    	<script src="/Scripts/jqGrid/i18n/grid.locale-en.js"></script>
    <script src="/Scripts/jqGrid/jquery.jqGrid.src.js"></script>
    
    
    	<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    	
    	<link href="/Content/Layout/css/bootstrap.min.css" rel="stylesheet">
    	<link href="/Content/Layout/css/bootstrap-reset.css" rel="stylesheet">
    	<link href="/Content/Layout/jQgrid/ui.jqgrid.css" rel="stylesheet"/>
    
    	<link href="/Content/Layout/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    	<link href="/Content/Layout/assets/font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet" />
    	<link rel="stylesheet" href="/Content/Layout/css/owl.carousel.css" type="text/css">
    	<link href="/Content/jqGrid.bootstrap.css" rel="stylesheet"  type="text/css"/>
    	
    	<link rel="stylesheet" href="/Content/Layout/css/style.css?v=1.0.0" type="text/css">
    	<link rel="stylesheet" href="/Content/Layout/css/style-responsive.css?v=1.0.0" type="text/css">
    	<link href="/Content/site_content.css?v=1.0.0" rel="stylesheet" type="text/css"/>
    	<script src="/Scripts/Core/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/Core/jquery.validate.js"></script>
    <script src="/Scripts/Core/jquery.validate.unobtrusive.js"></script>
    
    	<script src="/Scripts/Core/globalize.js" type="text/javascript"></script>
    	<script src="/Scripts/Core/globalize.culture.fr-FR.js"></script>
    
    	
    	<!--[if lt IE 9]>
    		<script src="/Scripts/Core/html5shiv.js"></script>
    		<script src="/Content/Layout/js/respond.min.js"></script>
    	<![endif]-->
    	
    	
    
    	
    	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfMACVTyH7ibKt5vrSqesJSXUUubYvhJ8" async defer></script>
    	 
    </head>
    <body>
    	<div id="loadingDiv" style="display: none;">
    		<div id="LoadingImageDiv">
    			<img src="/Images/ajax-loader-1.gif" alt="Chargement +"..."/>
    		</div>
    	</div>
    	
    	<header>
    			<div class="leftmenu-toggle-box">
    				
    				<div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
    
    			</div>
    		<a href="/" class="logo">
    			
    			<img src="/Images/ola.png" alt="logo" class="img-responsive">
    			 
    		</a>
    		
    
    		
    
    
    			<div class="nav notify-row" id="top_menu">
    				
    				
    				
                           <i class="fa fa-share-alt-square fa-2x fa-fw" style="vertical-align: middle; margin-right: 20px"></i>Solatys Estate&nbsp;&nbsp;
                           <i class="fa fa-dot-circle-o fa-2x fa-fw" style="vertical-align: middle; margin-left: 20px"></i>Solatys Immo&nbsp;&nbsp;
    			</div>
    		<div class="top-nav">
    			
    				
    				<ul class="nav pull-right top-menu">
    					<li class="dropdown">
    						
    	<a data-toggle="dropdown" class="dropdown-toggle" href="#">
    		
    		<i class="icon-user"></i>
    		
    		<span class="username">Bonjour, serge.calderara@solatys.com</span>
    		<i class="caret"></i>
    	</a>
    	<ul class="dropdown-menu extended logout">
    		<li>
    			<div class="log-arrow-up"></div>
    			<ul>
    				<li><a id="lnkuserProfile" href="/userProfile"><i class="icon-user"></i><span>Profil de configuration</span></a></li>
    				<li><a  id="logoutLink" href="/account/logout"><i class="icon-signout"></i><span>Se d&#233;connecter</span></a></li>
    			</ul>
    		</li>
    	</ul>
    
    
    
    					</li>
    				</ul>
    				<div class="top-nav-left1 pull-right">
    <form action="/home/setculture" id="frmSetCulture" method="post">						<select id="ddlCulture" name="ddlCulture">
    								<option value='1' data-imagesrc='http://localhost:3000//assets/countryflag/fr-FR.png' selected="selected"
    										data-description="">
    									Fran&#231;ais
    									</option>
    								<option value='2' data-imagesrc='http://localhost:3000//assets/countryflag/en-US.png'
    										data-description="">
    									Anglais
    									</option>
    								<option value='3' data-imagesrc='http://localhost:3000//assets/countryflag/nl-NL.png'
    										data-description="">
    									N&#233;erlandais
    									</option>
    								<option value='4' data-imagesrc='http://localhost:3000//assets/countryflag/de-DE.png'
    										data-description="">
    									Allemand
    									</option>
    								<option value='5' data-imagesrc='http://localhost:3000//assets/countryflag/es-ES.png'
    										data-description="">
    									Espagnol
    									</option>
    						</select>
    </form>				</div>
    			
    		</div>
    		<div style="clear: both;"></div>
    	</header>
    	
    	<div class="clearfix">
    		<section id="container">
    			
    				<div id="leftmenu">
    
    					<ul class="collapsemenu">
    						<li><a href="/" class="" ><i class="texticon icon-home"></i>
    							<span>Acceuil</span></a></li>
    
    							<li>
    								<a href="javascript:void(0);" class=""><i class="fa fa-sliders fa-fw"></i>
    									<span>Param&#232;tres globaux</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    										<li>
    											<a href="/role" class=""><i class="fa fa-unlock fa-fw"></i><span>R&#244;les</span></a></li>
    																			<li><a href="/portaluser" class=""><i class="texticon icon-group"></i>
    											<span>Utilisateurs</span></a></li>
    																			<li>
    											<a href="/storemanagement/culturelist" class="")"><i class="fa fa-language fa-fw"></i>Langues</a></li>
    																			<li>
    											<a href="/stateprovince" class=""><i class="texticon icon-map-marker"></i>R&#233;gions</a></li>
    																			<li>
    											<a href="/reseller" class=""><i class="fa fa-share-alt fa-fw"></i><span>Hub Entit&#233;s</span></a></li>
    								</ul>
    							</li>
    							<li>
    								<a href="javascript:void(0);" class=""><i class="fa fa-share-alt-square fa-fw"></i>
    									<span>Hub</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    										<li>
    											<a href="/store" class=""><i class="icon-table"></i>
    												Entit&#233;s</a></li>
    																			<li>
    											<a href="/reselleruser" class=""><i class="texticon icon-group"></i>
    												<span>Utilisateurs</span></a></li>
    																			<li>
    											<a href="/productcategory" class=""><i class="texticon icon-tag"></i><span>Cat&#233;gories</span></a></li>
    																			<li>
    											<a href="/productmodl" class=""><i class="texticon icon-list-alt"></i><span>Types</span></a></li>
    																			<li>
    											<a href="/storemanagement/salestaxratelist" class=""><i class="texticon icon-barcode"></i>Taxes</a></li>
    																			<li>
    											<a href="/specialoffers" class=""><i class="fa fa-bookmark fa-fw"></i><span>Promotions</span></a></li>
    																			<li>
    										<a href="/storemanagement/unitmeasurelist" class=""><i class="texticon icon-road"></i>Unit&#233; de mesure </a></li>
    																			<li>
    											<a href="/product" class=""><i class="texticon icon-gift"></i><span>Produits</span></a></li>
    
    										<li>
    											<a href="/pricegroup" class=""><i class="texticon icon-money"></i><span>Listes de Prix</span></a></li>
    																			<li>
    											<a href="/productmedia/productphotolist" class=""><i class="texticon icon-picture"></i><span>Photos</span></a></li>
    																			<li>
    											<a href="/productmedia/productvideolist" class=""><i class="texticon icon-facetime-video"></i><span>Videos</span></a></li>
    
    								</ul>
    							</li>
    							<li>
    								<a href="javascript:void(0);" class=""><i class="fa fa-dot-circle-o fa-fw"></i>
    									<span>Solatys Immo</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    								
    										<li>
    											<a href="/storeproduct" class=""><i class="texticon icon-gift"></i><span>Produits</span></a></li>
    																			<li>
    											<a href="/storagelocation" class=""><i class="fa fa-cubes fa-fw"></i>Storage</a></li>
    																			<li>
    											<a href="/flashinfo" class=""><i class="texticon icon-info"></i>Informations Br&#232;ves</a></li>
    									<li>
    
    										<a href="/device" class="active"><i class="texticon icon-gift"></i><span>Connected Devices</span></a>
    									</li>
    
    									
    								</ul>
    							</li>
    	<li>
    		<a href="javascript:void(0);" class="active">
    			<i class="fa fa-dot-circle-o fa-fw"></i>
    			<span>Statistics</span><i class="arrow icon-arrow-right"></i>
    		</a>
    		<ul class="submenu" style=display:none;>
    			
    				<li>
    
    					<a href="/report/productviewcount" class=""><i class="icon-bar-chart"></i>Product viewed</a>
    				</li>
    		</ul>
    	</li>
    							<li>
    								<a href="javascript:void(0);" class=""><i class="texticon icon-wrench"></i>
    									<span>Maintenance</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    										<li>
    											<a href="/portalordermanage" class=""><i class="texticon icon-archive"></i>Archivages Commandes</a></li>
    								</ul>
    							</li>
    
    						<li><a href="/account/logout"><i class="fa fa-sign-out fa-fw"></i><span>Se d&#233;connecter</span></a></li>
    					</ul>
    				</div>
    
    			
    
    			<section id="main-content" style="">
    				<section class="wrapper site-min-height">
    					
    					<section class="panel">
    						
    						<div class="panel-body">
    							
    
    
    <h2>Configuration Informations Breves</h2>
    <div class="form-group">
    	<a href="http://localhost:3000/home/index" role="button" class="btn btn-default"><i class="icon-arrow-left"></i><span>Retour</span></a>
    </div>
    <input id="btnGetDevice" type="button" value="Get Device" />
    <div id="div_device" class="col-xs-12 col-sm-12 col-lg-12">
    </div>
    
    
    <script type="text/javascript">
    
    	$(document).ready(function () {
    		$("#btnGetDevice").click(function () {
    
    			//Using Ajax function all web method to get all devices
    			$.ajax({
    				type: "GET",
    				url: ServerBaseURL + "device/DeviceList",
    				//contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				done: function (data) {
    					var list = data;
    					alert(data[0].DeviceID);
    					//dynamically create html elements and attach bootstrap css style.
    					var html = "<table class='table table-bordered'><tr>"
    					//using each function to loop through the device list.
    					$.each(list.d, function (index, element) {
    						
    						//html += "<td  style='text-align:center'>" +
    						////"<img style='width:auto; height:50px'  src='" + element.Image + "' /> <br />" +
    						//+ "<span>" + element.IpAdress + "</span><br />" +
    						//"<span>" + element.DeviceName + "</span><br />" +
    						//"<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.DeviceID + "' />" +
    						//"</td>";
    						//if (index % 3 == 2) {
    						//	html+="</tr><tr>"
    						//}
    
    					});
    
    					for (var i in data) {
    						html += "<td  style='text-align:center'>" +
    						//"<img style='width:auto; height:50px'  src='" + element.Image + "' /> <br />" +
    						+ "<span>" + data[i].IpAdress + "</span><br />" +
    						"<span>" + data[i].DeviceName + "</span><br />" +
    						"<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + data[i].DeviceID + "' />" +
    						"</td>";
    						//if (index % 3 == 2) {
    						//	html+="</tr><tr>"
    						//}
    					}
    
    					html += "</table>"
    					$("#div_device").append(html);
    				},
    				fail: function (r) {
    
    					alert("error");
    				},
    				failure: function (r) {
    					alert("failure");
    
    				}
    			});
    			return false;
    		});
    
    	});
    	
    </script>
    
    						</div>
    					</section>
    					
    					
    				</section>
    			</section>
    			
    			
    			<footer>
    				<p class="text-center">
    					Copyrigth 2014-2015 &copy; - www.solatys.com
    						
    				</p>
    			</footer>
    		</section>
    	</div>
    
    	
    	<script src="/Content/Layout/js/bootstrap.min.js"></script>
    	<script class="include" type="text/javascript" src="/Content/Layout/js/jquery.dcjqaccordion.2.7.js"></script>
    	<script src="/Content/Layout/js/jquery.scrollTo.min.js"></script>
    	<script src="/Content/Layout/assets/jquery-knob/js/jquery.knob.js"></script>
    	
    	<script src="/Content/Layout/js/common-scripts.js"></script>
    	<script src="/Scripts/LocalizedStrings-fr-FR.js?v=1.0.0"></script>
    	<script type="text/ecmascript">
    		$(".knob").knob();
    	</script>
    	<script src="/Scripts/Common.js?v=1.0.0"></script>
    	
    	<script type="text/javascript" src="/Scripts/jquery.ddslick.js?v=1.0.0"></script>
    
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"Chrome","requestId":"73cbdaa278f2444db43824e189eda3e3"}
    </script>
    <script type="text/javascript" src="http://localhost:57378/fc094d0603434c5bae77e66188deb55f/browserLink" async="async"></script>
    <!-- End Browser Link -->
    
    </body>
    </html>
    <script type="text/javascript">
    	$(document).ready(function () {
    
    		var defaultselectedculture = $('#ddlCulture').val();
    
    		$('#ddlCulture').ddslick({
    			onSelected: function (selectedData) {
    				//alert(defaultselectedculture);
    				if (defaultselectedculture != selectedData.selectedData.value) {
    					var cultureID = selectedData.selectedData.value;
    					var pageURL = $(location).attr('href');
    					$.ajax({
    						url: ServerBaseURL + "common/setculture",
    						type: "POST",
    						cache: false,
    						data: { cultureID: cultureID },
    						beforeSend: showLoader,
    						complete: hideLoader,
    						success: function (data) {
    							hideLoader();
    							if (data) {
    								loadRedirectToPage(pageURL);
    							}
    							else {
    								alert(_LS['Error']);
    							}
    						},
    						failure: function (xhr) {
    							hideLoader();
    							alert(_LS['NetworkReqFailure']);
    						}
    					});
    				}
    			}
    		});
    	});
    </script>
    
    
    

    When I check my page in the SOURCE TAB after pressing F12, I have  a red cross at the line

    Any other idea ?
    I am stuck on how to check what could be wrong

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 21, 2016 10:13 AM

All replies

  • User-1838255255 posted

    Hi sergeC,

    According to your description and image, I design a board is similar with image, you can use Ajax to call webservice, then return need data. In my sample, I suppose have get data.

    I use percent to set width and height of elements, also you can set it use bootstrap, it is a responsive jQuery framework, you can learn it in this website:

    http://getbootstrap.com/ 

    Sample Code:

    <head runat="server">
        <title></title>
        <style>
            .box {
                width: 30%;
                height: 90%;
                margin-left: 2%;
                margin-top: 1.5%;
                border: 1px solid green;
                float: left;
            }
    
            .btn {
                margin-top: 10%;
                margin-left: 30%;
                border-radius: 5px;
                background: white;
                color: black;
                width: 40%;
                height: 20%;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div style="width: 50%; height: 170px; border: 1px solid red">
                    <div id="box1" class="box">
                        <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn" />
                    </div>
                    <div id="box2" class="box">
                        <asp:Button ID="Button2" runat="server" Text="Button" CssClass="btn" />
                    </div>
                    <div id="box3" class="box">
                        <asp:Button ID="Button3" runat="server" Text="Button" CssClass="btn" />
                    </div>
                </div>
            </div>
            <script>
                var lab = ['Device name : ', 'IP Address : ', 'Mac Adress : ', 'Device Type : '];
                var box1 = ['mobile phone', '10.168.172.190', ' 01-23-45-67-89-ab-cd-ef', 'mobile client'];
                var box2 = ['pad', '10.168.172.190', ' 01-23-45-67-89-ab-cd-ef', 'Table client'];
                var box3 = ['computer', '10.168.172.190', ' 01-23-45-67-89-ab-cd-ef', 'PC client'];
                $(function () {
                    debugger;
                    var labjson = lab;
                    for (var i = 0; i < box1.length; i++) {
                        $("#Button1").before(
                        "<text>" + "<label style='color:orange'>" + lab[i] + "</label>" + box1[i] + "</text>" + "</br>"
                    );
                    }
                    for (var i = 0; i < box2.length; i++) {
                        $("#Button2").before(
                        "<text>" + "<label style='color:orange'>" + lab[i] + "</label>" + box2[i] + "</text>" + "</br>"
                    );
                    }
                    for (var i = 0; i < box3.length; i++) {
                        $("#Button3").before(
                        "<text>" + "<label style='color:orange'>" + lab[i] + "</label>" + box3[i] + "</text>" + "</br>"
                    );
                    }
                })
            </script>
        </form>

    Result:

    If this reply can not solve your problem or something not satisfied, please let me know!

    Best Regards,

    Eric Du

    Friday, December 2, 2016 8:28 AM
  • User1263547581 posted

    Hello Eric,

    Thnaks you for your replay and your sample.

    In fact in the box will at the end represent the image for a device type, like desktop, mobile, tablette,.. and information will be outside the box just above the button
    Next thing which is important for me as well is that I do not know in advance the number of device I will have to display. The list of device will comes from the back end table records and then I should display then dynamically and have no idea how to do that to construct dynamically the layour based on number of device return.

    regards

    serge

    Friday, December 2, 2016 8:41 AM
  • User-1838255255 posted

    Hi sergeC,

    According to your description,

    In fact in the box will at the end represent the image for a device type, like desktop, mobile, tablette,.. and information will be outside the box just above the button

    1. About this issue, I think you can show the matching image according to the device type value.

     function myFunction() {
                var d = device.type;
                switch (d) {
                    case Mobie:
                        //Mobile image show
                        break;
                    case Computer:
                        //Computer image show
                        break;
                    default:
                        //default image show
                }   
            }

    2.

    The list of device will comes from the back end table records and then I should display then dynamically and have no idea how to do that to construct dynamically the layour based on number of device return.

    As for this issue, you could get devices number from code behind, use 'for' loop to create dash board dynamically. Write method is my previous reply!

    Best Regards,

    Eric Du

    Wednesday, December 7, 2016 11:54 AM
  • User1263547581 posted

    Hello, thnaks for you reply.

    I do not understand how can I create a for loop to present html data layout and how to inject the image from the function you define.

    Sorry for basic question but this is new for me and all chineese :-(

    Wednesday, December 7, 2016 2:04 PM
  • User-271186128 posted

    Hi sergeC,

    From your description, I suppose you want to dynamically load data and create responsive layout. If that is the case, I suggest you could you could use JQuery Ajax to call the web method or web service, then, in the success function, you could use JQuery.each function or for statement to loop through the result and render the them. More details information, you could refer to the following links:

    http://www.aspsnippets.com/Articles/Retrieve-data-from-Database-and-display-on-page-using-jQuery-AJAX-in-ASPNet.aspx

    http://www.aspsnippets.com/Articles/Load-data-while-Scrolling-Page-down-with-jQuery-AJAX-and-ASPNet.aspx

    http://api.jquery.com/jquery.each/

    As for the responsive layout, you could use Bootstrap grid system, when dynamically create elements(such as text box or label, you could attach this bootstrap css style):

    http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

    Best regards,
    Dillion

    Tuesday, December 13, 2016 5:43 AM
  • User1263547581 posted

    I have check your link. The 2 first are dead and the last one I do some test with it but could not make it work. I do not understand how to really do it.

    When I call my web service, it calls a controller method named GetDevicesList whih then return the list of device with properties mentionned at the top of the post.

    Could you please tell me how will be success return loop on the method, I can't catch it never done it.

    Thanks, few weeks that I am fighting with that simple think which in C# will have done in second but here not used to at all

    regards

    Tuesday, December 13, 2016 8:22 AM
  • User-271186128 posted

    Hi sergeC,

    You could refer to the following code:

    Code behind (web method):

            //query database and get all device and convert it to object list.
            [System.Web.Services.WebMethod]
            public static List<DeviceModel> GetDevice()
            {
                List<DeviceModel> itemlist = new List<DeviceModel>()
                {
                    new DeviceModel()
                    {
                         ID=1001, Name = "Device1", IPAddress="10.128.172.1", Image="Images/Image1.jpg"
                    },
                    new DeviceModel()
                    {
                         ID=1002, Name = "Device2", IPAddress="10.128.172.2", Image="Images/Image2.jpg"
                    },
                    new DeviceModel()
                    {
                         ID=1003, Name = "Device3", IPAddress="10.128.172.3", Image="Images/Image3.jpg"
                    },
                    new DeviceModel()
                    {
                         ID=1004, Name = "Device4", IPAddress="10.128.172.4", Image="Images/Image4.jpg"
                    },
                    new DeviceModel()
                    {
                         ID=1005, Name = "Device5", IPAddress="10.128.172.5", Image="Images/Image5.jpg"
                    }
                };
    
                return itemlist;
            }

    Code in page (.aspx):

        <%-- JQuery and Bootstrap reference  --%>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
                <script type="text/javascript">
                    $(function () {
                        $("#btnGetDevice").click(function () {
    
                            //Using Ajax function all web method to get all devices
                            $.ajax({
                                type: "POST",
                                url: "JQ_WebService.aspx/GetDevice",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (result) {
    
                                    //dynamically create html elements and attach bootstrap css style.
                                    var html = "<table class='table table-bordered'><tr>"
                                    //using each function to loop through the device list.
                                    $.each(result.d, function (index, element) {
                                        html += "<td  style='text-align:center'>" +
                                        "<img style='width:auto; height:50px'  src='" + element.Image + "' /> <br />" +
                                        "<span>" + element.IPAddress + "</span><br />" +
                                        "<span>" + element.Name + "</span><br />" +
                                        "<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.ID + "' />" +
                                        "</td>";
                                        if (index % 3 == 2) {
                                            html+="</tr><tr>"
                                        }
                                    });
                                    html += "</table>"
                                    $("#div_device").append(html);
                                },
                                error: function (r) {
    
                                    alert("error");
                                },
                                failure: function (r) {
                                    alert("failure");
    
                                }
                            });
                            return false;
                        });
    
                    });
                </script>
                <input id="btnGetDevice" type="button" value="Get Device" />
                <div id="div_device" style="background-color:antiquewhite"  class="col-xs-12 col-sm-12 col-lg-12">
                </div>

    The output as below:

    Best regards,
    Dillion

    Wednesday, December 14, 2016 9:35 AM
  • User1263547581 posted

    Zhi, you are great, I would not be able to find this without your help

    thnaks you very much

    Wednesday, December 14, 2016 4:38 PM
  • User1263547581 posted

    Hello, I have tried to impement your sample in my page but nothing gets displayed and no error return.

    Here is below my test controller

    public JsonResult DeviceList()
    		{
    			using (DeviceModel s = new DeviceModel(base.uiDTO, base.LanguageID))
    			{
    				
    				List<ClientDeviceVM> itemlist = new List<ClientDeviceVM>()
                {
                    new ClientDeviceVM()
                    {
                          DeviceID="1001",  DeviceName = "Device1",  IpAdress="10.128.172.1"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1002", DeviceName = "Device2", IpAdress="10.128.172.2"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1003", DeviceName = "Device3", IpAdress="10.128.172.3"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1004", DeviceName = "Device4", IpAdress="10.128.172.4"
                    },
                    new ClientDeviceVM()
                    {
                         DeviceID="1005", DeviceName = "Device5", IpAdress="10.128.172.5"
                    }
                };
    
    				
    		return Json(itemlist, JsonRequestBehavior.AllowGet);
    
    				
    			}
    		}

    Then here is below my test page

    @model SCMS.Web.Models.ViewModels.ClientDeviceVM
    @using SCMS.Web.Helpers;
    
    @{
    	ViewBag.Title = Resources.headingFlashInfo;
    	ViewBag.SelMenu = "device";
    	UserInfoDTO uiDTO = AppHelper.GetUserInfoDTOFromSession();
    
    	bool isAdmin = uiDTO.IsPortalUser;
    	//string backURL = AppHelper.ServerBaseURL + (isAdmin ? "store" : "home") + (isAdmin ? "/adminmenu" : "/index");
    	string backURL = AppHelper.ServerBaseURL + ("home") + ("/index");
    }
    
    <h2>@ViewBag.Title</h2>
    <div class="form-group">
    	<a href="@backURL" role="button" class="btn btn-default"><i class="icon-arrow-left"></i><span>@Resources.lblBack</span></a>
    </div>
    <input id="btnGetDevice" type="button" value="Get Device" />
    <div id="div_device" class="col-xs-12 col-sm-12 col-lg-12">
    </div>
    
    <script type="text/javascript">
    
    	$(function () {
    		$("#btnGetDevice").click(function () {
    
    			//Using Ajax function all web method to get all devices
    			$.ajax({
    				type: "GET",
    				url: ServerBaseURL + "device/DeviceList",
    				contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				done: function (data) {
    					var list = data;
    					//dynamically create html elements and attach bootstrap css style.
    					var html = "<table class='table table-bordered'><tr>"
    					//using each function to loop through the device list.
    					$.each(list.d, function (index, element) {
    						html += "<td  style='text-align:center'>" +
    						+ "<span>" + element.IpAdress + "</span><br />" +
    						"<span>" + element.DeviceName + "</span><br />" +
    						"<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.DeviceID + "' />" +
    						"</td>";
    						if (index % 3 == 2) {
    							html+="</tr><tr>"
    						}
    					});
    					html += "</table>"
    					$("#div_device").append(html);
    				},
    				fail: function (r) {
    
    					alert("error");
    				},
    				failure: function (r) {
    					alert("failure");
    
    				}
    			});
    			return false;
    		});
    
    	});
    	
    </script>
    

    Any idea whay nothing gets displayed on my page ?

    regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 19, 2016 12:14 PM
  • User-271186128 posted

    Hi sergeC,

    Any idea whay nothing gets displayed on my page ?

    Since we are using Bootstrap, please make sure you have add the Bootstrap and JQuery reference. You could use F12 developer tools to check whether it is load successful.

    Best regards,
    Dillion

    Wednesday, December 21, 2016 9:13 AM
  • User1263547581 posted

    Yes I am using already bootstrap and JQerry on my site and it is loaded from a shared layout at start . here is all what is laoded from my shared page when I press F12

    <!DOCTYPE html>
    <html lang="fr-FR" dir="ltr">
    <script>
    	var SelectedCulture = "fr-FR";
    	var ServerBaseURL = "http://localhost:3000/";
    </script>
    <head>
    	<meta charset="utf-8" />
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Configuration Informations Breves</title>
    	<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    	<meta name="viewport" content="width=device-width" />
    	<!-- Force latest IE rendering engine or ChromeFrame if installed -->
    	<!--[if IE]>
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<![endif]-->
    
    	<script src="/Scripts/Core/jquery-1.8.2.js"></script>
    
    	<script src="/Scripts/Core/modernizr-2.6.2.js"></script>
    
    	<script src="/Scripts/Core/jquery-ui-1.8.24.js"></script>
    
    	<script src="/Scripts/jqGrid/i18n/grid.locale-en.js"></script>
    <script src="/Scripts/jqGrid/jquery.jqGrid.src.js"></script>
    
    
    	<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    	
    	<link href="/Content/Layout/css/bootstrap.min.css" rel="stylesheet">
    	<link href="/Content/Layout/css/bootstrap-reset.css" rel="stylesheet">
    	<link href="/Content/Layout/jQgrid/ui.jqgrid.css" rel="stylesheet"/>
    
    	<link href="/Content/Layout/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    	<link href="/Content/Layout/assets/font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet" />
    	<link rel="stylesheet" href="/Content/Layout/css/owl.carousel.css" type="text/css">
    	<link href="/Content/jqGrid.bootstrap.css" rel="stylesheet"  type="text/css"/>
    	
    	<link rel="stylesheet" href="/Content/Layout/css/style.css?v=1.0.0" type="text/css">
    	<link rel="stylesheet" href="/Content/Layout/css/style-responsive.css?v=1.0.0" type="text/css">
    	<link href="/Content/site_content.css?v=1.0.0" rel="stylesheet" type="text/css"/>
    	<script src="/Scripts/Core/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/Core/jquery.validate.js"></script>
    <script src="/Scripts/Core/jquery.validate.unobtrusive.js"></script>
    
    	<script src="/Scripts/Core/globalize.js" type="text/javascript"></script>
    	<script src="/Scripts/Core/globalize.culture.fr-FR.js"></script>
    
    	
    	<!--[if lt IE 9]>
    		<script src="/Scripts/Core/html5shiv.js"></script>
    		<script src="/Content/Layout/js/respond.min.js"></script>
    	<![endif]-->
    	
    	
    
    	
    	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfMACVTyH7ibKt5vrSqesJSXUUubYvhJ8" async defer></script>
    	 
    </head>
    <body>
    	<div id="loadingDiv" style="display: none;">
    		<div id="LoadingImageDiv">
    			<img src="/Images/ajax-loader-1.gif" alt="Chargement +"..."/>
    		</div>
    	</div>
    	
    	<header>
    			<div class="leftmenu-toggle-box">
    				
    				<div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
    
    			</div>
    		<a href="/" class="logo">
    			
    			<img src="/Images/ola.png" alt="logo" class="img-responsive">
    			 
    		</a>
    		
    
    		
    
    
    			<div class="nav notify-row" id="top_menu">
    				
    				
    				
                           <i class="fa fa-share-alt-square fa-2x fa-fw" style="vertical-align: middle; margin-right: 20px"></i>Solatys Estate&nbsp;&nbsp;
                           <i class="fa fa-dot-circle-o fa-2x fa-fw" style="vertical-align: middle; margin-left: 20px"></i>Solatys Immo&nbsp;&nbsp;
    			</div>
    		<div class="top-nav">
    			
    				
    				<ul class="nav pull-right top-menu">
    					<li class="dropdown">
    						
    	<a data-toggle="dropdown" class="dropdown-toggle" href="#">
    		
    		<i class="icon-user"></i>
    		
    		<span class="username">Bonjour, serge.calderara@solatys.com</span>
    		<i class="caret"></i>
    	</a>
    	<ul class="dropdown-menu extended logout">
    		<li>
    			<div class="log-arrow-up"></div>
    			<ul>
    				<li><a id="lnkuserProfile" href="/userProfile"><i class="icon-user"></i><span>Profil de configuration</span></a></li>
    				<li><a  id="logoutLink" href="/account/logout"><i class="icon-signout"></i><span>Se d&#233;connecter</span></a></li>
    			</ul>
    		</li>
    	</ul>
    
    
    
    					</li>
    				</ul>
    				<div class="top-nav-left1 pull-right">
    <form action="/home/setculture" id="frmSetCulture" method="post">						<select id="ddlCulture" name="ddlCulture">
    								<option value='1' data-imagesrc='http://localhost:3000//assets/countryflag/fr-FR.png' selected="selected"
    										data-description="">
    									Fran&#231;ais
    									</option>
    								<option value='2' data-imagesrc='http://localhost:3000//assets/countryflag/en-US.png'
    										data-description="">
    									Anglais
    									</option>
    								<option value='3' data-imagesrc='http://localhost:3000//assets/countryflag/nl-NL.png'
    										data-description="">
    									N&#233;erlandais
    									</option>
    								<option value='4' data-imagesrc='http://localhost:3000//assets/countryflag/de-DE.png'
    										data-description="">
    									Allemand
    									</option>
    								<option value='5' data-imagesrc='http://localhost:3000//assets/countryflag/es-ES.png'
    										data-description="">
    									Espagnol
    									</option>
    						</select>
    </form>				</div>
    			
    		</div>
    		<div style="clear: both;"></div>
    	</header>
    	
    	<div class="clearfix">
    		<section id="container">
    			
    				<div id="leftmenu">
    
    					<ul class="collapsemenu">
    						<li><a href="/" class="" ><i class="texticon icon-home"></i>
    							<span>Acceuil</span></a></li>
    
    							<li>
    								<a href="javascript:void(0);" class=""><i class="fa fa-sliders fa-fw"></i>
    									<span>Param&#232;tres globaux</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    										<li>
    											<a href="/role" class=""><i class="fa fa-unlock fa-fw"></i><span>R&#244;les</span></a></li>
    																			<li><a href="/portaluser" class=""><i class="texticon icon-group"></i>
    											<span>Utilisateurs</span></a></li>
    																			<li>
    											<a href="/storemanagement/culturelist" class="")"><i class="fa fa-language fa-fw"></i>Langues</a></li>
    																			<li>
    											<a href="/stateprovince" class=""><i class="texticon icon-map-marker"></i>R&#233;gions</a></li>
    																			<li>
    											<a href="/reseller" class=""><i class="fa fa-share-alt fa-fw"></i><span>Hub Entit&#233;s</span></a></li>
    								</ul>
    							</li>
    							<li>
    								<a href="javascript:void(0);" class=""><i class="fa fa-share-alt-square fa-fw"></i>
    									<span>Hub</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    										<li>
    											<a href="/store" class=""><i class="icon-table"></i>
    												Entit&#233;s</a></li>
    																			<li>
    											<a href="/reselleruser" class=""><i class="texticon icon-group"></i>
    												<span>Utilisateurs</span></a></li>
    																			<li>
    											<a href="/productcategory" class=""><i class="texticon icon-tag"></i><span>Cat&#233;gories</span></a></li>
    																			<li>
    											<a href="/productmodl" class=""><i class="texticon icon-list-alt"></i><span>Types</span></a></li>
    																			<li>
    											<a href="/storemanagement/salestaxratelist" class=""><i class="texticon icon-barcode"></i>Taxes</a></li>
    																			<li>
    											<a href="/specialoffers" class=""><i class="fa fa-bookmark fa-fw"></i><span>Promotions</span></a></li>
    																			<li>
    										<a href="/storemanagement/unitmeasurelist" class=""><i class="texticon icon-road"></i>Unit&#233; de mesure </a></li>
    																			<li>
    											<a href="/product" class=""><i class="texticon icon-gift"></i><span>Produits</span></a></li>
    
    										<li>
    											<a href="/pricegroup" class=""><i class="texticon icon-money"></i><span>Listes de Prix</span></a></li>
    																			<li>
    											<a href="/productmedia/productphotolist" class=""><i class="texticon icon-picture"></i><span>Photos</span></a></li>
    																			<li>
    											<a href="/productmedia/productvideolist" class=""><i class="texticon icon-facetime-video"></i><span>Videos</span></a></li>
    
    								</ul>
    							</li>
    							<li>
    								<a href="javascript:void(0);" class=""><i class="fa fa-dot-circle-o fa-fw"></i>
    									<span>Solatys Immo</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    								
    										<li>
    											<a href="/storeproduct" class=""><i class="texticon icon-gift"></i><span>Produits</span></a></li>
    																			<li>
    											<a href="/storagelocation" class=""><i class="fa fa-cubes fa-fw"></i>Storage</a></li>
    																			<li>
    											<a href="/flashinfo" class=""><i class="texticon icon-info"></i>Informations Br&#232;ves</a></li>
    									<li>
    
    										<a href="/device" class="active"><i class="texticon icon-gift"></i><span>Connected Devices</span></a>
    									</li>
    
    									
    								</ul>
    							</li>
    	<li>
    		<a href="javascript:void(0);" class="active">
    			<i class="fa fa-dot-circle-o fa-fw"></i>
    			<span>Statistics</span><i class="arrow icon-arrow-right"></i>
    		</a>
    		<ul class="submenu" style=display:none;>
    			
    				<li>
    
    					<a href="/report/productviewcount" class=""><i class="icon-bar-chart"></i>Product viewed</a>
    				</li>
    		</ul>
    	</li>
    							<li>
    								<a href="javascript:void(0);" class=""><i class="texticon icon-wrench"></i>
    									<span>Maintenance</span><i class="arrow icon-arrow-right"></i></a>
    								<ul class="submenu" style=display:none;>
    										<li>
    											<a href="/portalordermanage" class=""><i class="texticon icon-archive"></i>Archivages Commandes</a></li>
    								</ul>
    							</li>
    
    						<li><a href="/account/logout"><i class="fa fa-sign-out fa-fw"></i><span>Se d&#233;connecter</span></a></li>
    					</ul>
    				</div>
    
    			
    
    			<section id="main-content" style="">
    				<section class="wrapper site-min-height">
    					
    					<section class="panel">
    						
    						<div class="panel-body">
    							
    
    
    <h2>Configuration Informations Breves</h2>
    <div class="form-group">
    	<a href="http://localhost:3000/home/index" role="button" class="btn btn-default"><i class="icon-arrow-left"></i><span>Retour</span></a>
    </div>
    <input id="btnGetDevice" type="button" value="Get Device" />
    <div id="div_device" class="col-xs-12 col-sm-12 col-lg-12">
    </div>
    
    
    <script type="text/javascript">
    
    	$(document).ready(function () {
    		$("#btnGetDevice").click(function () {
    
    			//Using Ajax function all web method to get all devices
    			$.ajax({
    				type: "GET",
    				url: ServerBaseURL + "device/DeviceList",
    				//contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				done: function (data) {
    					var list = data;
    					alert(data[0].DeviceID);
    					//dynamically create html elements and attach bootstrap css style.
    					var html = "<table class='table table-bordered'><tr>"
    					//using each function to loop through the device list.
    					$.each(list.d, function (index, element) {
    						
    						//html += "<td  style='text-align:center'>" +
    						////"<img style='width:auto; height:50px'  src='" + element.Image + "' /> <br />" +
    						//+ "<span>" + element.IpAdress + "</span><br />" +
    						//"<span>" + element.DeviceName + "</span><br />" +
    						//"<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.DeviceID + "' />" +
    						//"</td>";
    						//if (index % 3 == 2) {
    						//	html+="</tr><tr>"
    						//}
    
    					});
    
    					for (var i in data) {
    						html += "<td  style='text-align:center'>" +
    						//"<img style='width:auto; height:50px'  src='" + element.Image + "' /> <br />" +
    						+ "<span>" + data[i].IpAdress + "</span><br />" +
    						"<span>" + data[i].DeviceName + "</span><br />" +
    						"<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + data[i].DeviceID + "' />" +
    						"</td>";
    						//if (index % 3 == 2) {
    						//	html+="</tr><tr>"
    						//}
    					}
    
    					html += "</table>"
    					$("#div_device").append(html);
    				},
    				fail: function (r) {
    
    					alert("error");
    				},
    				failure: function (r) {
    					alert("failure");
    
    				}
    			});
    			return false;
    		});
    
    	});
    	
    </script>
    
    						</div>
    					</section>
    					
    					
    				</section>
    			</section>
    			
    			
    			<footer>
    				<p class="text-center">
    					Copyrigth 2014-2015 &copy; - www.solatys.com
    						
    				</p>
    			</footer>
    		</section>
    	</div>
    
    	
    	<script src="/Content/Layout/js/bootstrap.min.js"></script>
    	<script class="include" type="text/javascript" src="/Content/Layout/js/jquery.dcjqaccordion.2.7.js"></script>
    	<script src="/Content/Layout/js/jquery.scrollTo.min.js"></script>
    	<script src="/Content/Layout/assets/jquery-knob/js/jquery.knob.js"></script>
    	
    	<script src="/Content/Layout/js/common-scripts.js"></script>
    	<script src="/Scripts/LocalizedStrings-fr-FR.js?v=1.0.0"></script>
    	<script type="text/ecmascript">
    		$(".knob").knob();
    	</script>
    	<script src="/Scripts/Common.js?v=1.0.0"></script>
    	
    	<script type="text/javascript" src="/Scripts/jquery.ddslick.js?v=1.0.0"></script>
    
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"Chrome","requestId":"73cbdaa278f2444db43824e189eda3e3"}
    </script>
    <script type="text/javascript" src="http://localhost:57378/fc094d0603434c5bae77e66188deb55f/browserLink" async="async"></script>
    <!-- End Browser Link -->
    
    </body>
    </html>
    <script type="text/javascript">
    	$(document).ready(function () {
    
    		var defaultselectedculture = $('#ddlCulture').val();
    
    		$('#ddlCulture').ddslick({
    			onSelected: function (selectedData) {
    				//alert(defaultselectedculture);
    				if (defaultselectedculture != selectedData.selectedData.value) {
    					var cultureID = selectedData.selectedData.value;
    					var pageURL = $(location).attr('href');
    					$.ajax({
    						url: ServerBaseURL + "common/setculture",
    						type: "POST",
    						cache: false,
    						data: { cultureID: cultureID },
    						beforeSend: showLoader,
    						complete: hideLoader,
    						success: function (data) {
    							hideLoader();
    							if (data) {
    								loadRedirectToPage(pageURL);
    							}
    							else {
    								alert(_LS['Error']);
    							}
    						},
    						failure: function (xhr) {
    							hideLoader();
    							alert(_LS['NetworkReqFailure']);
    						}
    					});
    				}
    			}
    		});
    	});
    </script>
    
    
    

    When I check my page in the SOURCE TAB after pressing F12, I have  a red cross at the line

    Any other idea ?
    I am stuck on how to check what could be wrong

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 21, 2016 10:13 AM
  • User-1838255255 posted

    Hi sergeC,

    When I check my page in the SOURCE TAB after pressing F12, I have  a red cross at the line

    I have read the previous replies, I am not clear this sentence meaning, I hope you could post your screenshot of debug result.

    Best Regards,

    Eric Du

    Wednesday, December 28, 2016 10:04 AM
  • User1263547581 posted

    Hi Eric,

    Sorry was miss lookiing at wrong line.

    I have post my code page above after pressing F12 according to advise in order to see if necessary files are loaded in order to get things working.

    Do you have any idea, why I get nothing display in return to script function btnGetDevice.Click ?

    The controller methods return correctly the data in JSON format but for some reason, the HTML redering is not happening ?

    Any idea, I am stuck

    regards

    serge

    Wednesday, December 28, 2016 1:46 PM