JqGrid not Showing Grid in ASP.NET MVC3 - c#
View :
#{
ViewBag.Title = "TestGrid";
}
<link href="#Url.Content("~/Content/JqGrid/jquery-ui-jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/JqGrid/jquery-1.5.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery-ui.multiselect.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery.tmpl.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery.jqGrid.locale-en-4.1.2.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script>
<h2>
TestGrid</h2>
<h2>
My Grid Data</h2>
<table id="list">
</table>
<div id="pager">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: 'Grid/GridData',
datatype: 'json',
colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'],
colModel: [
{ name: 'COM_NAME', index: 'COM_NAME', width: 90 },
{ name: 'COM_CODE', index: 'COM_CODE', width: 100 },
{ name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right" },
{ name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right" },
{ name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right" },
{ name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
viewrecords: true,
jsonReader: {
root: "rows",
page: "page",
cell: "cell"
},
caption: "JSON Example"
});
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
</script>
Controller :
public ActionResult GridData(string sidx = "", string sord = "", int page = 1, int rows = 10)
{
TestGridModel tstGrid = new TestGridModel();
tstGrid.listArr = new List<CommodityReport>();
string conn = ConfigurationManager.ConnectionStrings["DbConnnectionString"].ConnectionString;
ReportDAL rptDal = new ReportDAL();
DataTable dt = rptDal.GetCommodity(conn, "");
//List<string[]> row = new List<string[]>();
List<Cell> row = new List<Cell>();
int i = 0;
foreach (DataRow item in dt.Rows)
{
row.Add(new Cell { cell = dt.Rows[i].ItemArray.Select(x => x.ToString()).ToArray() });
i++;
}
var jsonData = new
{
total = 1, // we'll implement later
page = page,
records = 3, // implement later
rows = row.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Result :
{"total":1,"page":1,"records":3,"rows":[{"cell":
["WHEAT","WHEAT","1","1.0000","1","100.000000"]},{"cell":["SL10","SILVER","1","1.0000","1","10.000000"]},{"cell":["CL10","CRUDE10","1","0.0100","1","10.000000"]},{"cell":["SL100","SL100OZ","1","0.0010","100","100.000000"]},{"cell":["TOLAGOLD","TOLAGOLD","1","1.0000","10","1.000000"]},{"cell":["JPYUSD","JPYUSD","1","0.0100","10000","10000.000000"]},{"cell":["GOKILO","GOLDKILO","1","1.0000","1","103.260000"]},{"cell":["TG100","TGOLD100","1","1.0000","100","100.000000"]},{"cell":
["TG50","TGOLD50","1","1.0000","50","50.000000"]},{"cell":["RBDPO","PALMOLEIN","1","1.0000","1","669.810000"]},{"cell":["GO","GOLD","1","1.0000","10","10.000000"]},{"cell":["GOD","GOLDOCTDEC","1","1.0000","1","1.000000"]},{"cell":["GSDJ","GOSPDECJAN","1","1.0000","1","1.000000"]},{"cell":["GSMA","GOSPMARAPR","1","1.0000","1","1.000000"]},{"cell":["RI6","RICEIRRI6","1","1.0000","1","250.000000"]},{"cell":["GSGP","GOSPAUGSEP","1","1.0000","1","10.000000"]},{"cell":["MGOLD","MINIGOLD","10","1.0000","10","1.000000"]},{"cell":["BCO","BRENTCRUDE","1","1.0000","1","1.000000"]},{"cell":["PT","PLATINUM","1","1.0000","1","1.000000"]},{"cell":["GSLG","GOSPJULAUG","1","1.0000","1","10.000000"]},{"cell":["PKRUSD","PKRUSD","1000","0.0100","1","10.000000"]},{"cell":["GO1KG","GOLD1KG","1","1.0000","1","103.260000"]},{"cell":["K3M","KIBOR3M","1","0.0100","1","2500.000000"]},{"cell":["TTGOLD","TTGOLD","10","1.0000","1","10.000000"]},{"cell":["CRUDEOIL","CRUDEOIL","1","0.0100","100","100.000000"]},{"cell":["GO100","GO100OZ","1","0.1000","100","100.000000"]},{"cell":["IRRI6W","IRRI6W","1","1.0000","1","250.000000"]},{"cell":["SL500","SL500OZ","1","0.0010","500","500.000000"]},{"cell":["GO1","GO1OZ","1","0.1000","1","1.000000"]},{"cell":["WTI100","WTI100","1","0.0100","100","100.000000"]},{"cell":["CL100","CRUDE100","1","0.0100","1","100.000000"]},{"cell":["EURUSD","EURUSD","1","0.0001","10000","10000.000000"]},{"cell":["GBPUSD","GBPUSD","1","0.0001","10000","10000.000000"]},{"cell":["USDJPY","USDJPY","1","0.0100","10000","10000.000000"]},{"cell":["TGOLD","TGOLD","1","1.0000","10","1.000000"]},{"cell":["SUGAR","SUGAR","1","0.0100","1","10000.000000"]},{"cell":["USCOTTON","USCOTTON","1","0.0100","1","50.000000"]},{"cell":["GO10","GO10OZ","1","0.1000","10","10.000000"]},{"cell":["SLV10","SL10","1","0.0010","10","10.000000"]},{"cell":
["ICT","ICOTTON","1","0.0100","1","50.000000"]},{"cell":["MTGOLD","MTOLAGOLD","1","1.0000","10000","0.001000"]},{"cell":["COPPER","COPPER","1","0.0001","1000","1000.000000"]},{"cell":["BRENT10","BRENT10","1","0.0100","1","10.000000"]},{"cell":["BRENT100","BRENT100","1","0.0100","1","100.000000"]}]}
problem is when my controller returns the Json it simply show the Json on Webpage instead of grid. can any help me whats the problem ?
Related
jqGrid filter dropdownlist not working with special characters
When using jqGrid inbuilt functionality of column searching, the dropdwonlist refuses to display special characters such as ç, Ë etc. For some reason they get split into two rows. This means if we take a word "Dfëstuç" the dropdownlist or rather option list will be generated as such: Dfë undefined stuç undefined My code is as follows: #model WS.ViewModels.CaseViewModel #{ ViewBag.Title = ""; Layout = "~/Views/Shared/_Layout.cshtml"; <meta charset="utf-8"> string idVendbanimiSelectValues = ":"; foreach (var item in Model.NomenklaturaVendbanimiDropDownListData.OrderBy(n => n.IdVendbanimi)) { idVendbanimiSelectValues += ";" + item.IdVendbanimi + ":" + item.EnPershkrimi; } } #section AdditionalCss { #Styles.Render("~/Content/Styles/ui.jqgrid.min.css") } #section AdditionalJavaScript { #Scripts.Render("~/bundles/jqgrid") #Scripts.Render("~/Scripts/jqgrid-listsearch.js") #Scripts.Render("~/Scripts/jquery.searchFilter.min.js") <script type="text/javascript"> $(function () { var idVendbanimiSelectValues = "#idVendbanimiSelectValues"; $('#list-grid').jqGrid({ url: '/Lenda/GridDataWithFilters/', datatype: 'json', mtype: 'GET', colNames: ['CaseId','IdVendbanimi'], colModel: [ { name: 'CaseId', index: 'CaseId', align: 'right' }, { name: 'IdVendbanimi', index: 'IdVendbanimi', align: 'left', stype: 'select', edittype: 'select', editoptions: { value: idVendbanimiSelectValues }, autoencode: false } ], pager: $('#list-pager'), rowNum: 10, rowList: [5, 10, 20, 50], sortname: 'CaseId', sortorder: "asc", viewrecords: true, height: '100%', width: '1200', ignoreCase: true, autoencode: true, }).jqGrid('navGrid', '#list-pager', { edit: false, add: false, del: false, search: false, refresh: false }); $('#list-grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, beforeSearch: function () { // verify entered data before searching var postData = $('#list-grid').jqGrid('getGridParam', 'postData'); var searchData = $.parseJSON(postData.filters); var isThereValidationErrors = false; var validationErrors = ""; for (var iRule = 0; iRule < searchData.rules.length; iRule++) { var enteredValue = searchData.rules[iRule].data; if (searchData.rules[iRule].field == "CaseId" && !isNumeric(enteredValue)) { validationErrors += " Id Lenda must be a valid number."; isThereValidationErrors = true; } } if(isThereValidationErrors) alert($.trim(validationErrors)); return isThereValidationErrors; } }); }); </script> } <h2>#ViewBag.Title</h2> <br /><br /> <table id="list-grid"></table> <div id="list-pager"></div>
Is your JSON data correctly UTF-8 encoded? e.g.: the ë character should be encoded with two bytes, 0xC3 0xAB. the JSON data maybe needs a UTF-8 preamble, 0xEF 0xBB 0xBF.
display child grid based on parent grid
I have a requirement where I need to Display parent grid. Based on the item selected in the parent, fetch data and display in child grid. I am currently doing a UI mockup and don't have the models all built yet. So the models you see below are just samples. I can display the parent grid with data I need. I also have code to select a row in the parent grid and send the row data to the controller using ajax post. I need to use this data to populate the child grid. This is the step where I am not sure what I am doing wrong. My controllers and views are below : Can you please help ? --Controller: public ActionResult GetData() { List<Hierarchy> lh = new List<Hierarchy>(); Hierarchy m = new Hierarchy(); m.Hierarchy1 = 1; m.Hierarchy2 = 2; m.Hierarchy3 = 3; lh.Add(m); Hierarchy n = new Hierarchy(); n.Hierarchy1 = 11; n.Hierarchy2 = 22; n.Hierarchy3 = 33; lh.Add(n); Hierarchy o = new Hierarchy(); o.Hierarchy1 = 111; o.Hierarchy2 = 222; o.Hierarchy3 = 333; lh.Add(o); return Json(new { rows = lh }, JsonRequestBehavior.AllowGet); } public ActionResult EditDescription(Hierarchy info) { List<Product> plist = new List<Product>(); if (info.Hierarchy1 == 1 && info.Hierarchy2 == 2 && info.Hierarchy3 == 3) { Product p = new Product(); p.ProductId = 1; p.Productdesc = "ABC"; plist.Add(p); Product q = new Product(); q.ProductId = 2; q.Productdesc = "DEF"; plist.Add(q); } if (info.Hierarchy1 == 11 && info.Hierarchy2 == 22 && info.Hierarchy3 == 33) { Product p = new Product(); p.ProductId = 11; p.Productdesc = "ABCD"; plist.Add(p); Product q = new Product(); q.ProductId = 22; q.Productdesc = "DDEF"; plist.Add(q); } return Json(new { rows = plist }, JsonRequestBehavior.AllowGet); //return Json("Response from Edit"); } View : #{ ViewBag.Title = "Index"; } <h2>Index</h2> <table id="jqGrid"></table> <div id="jqGridpager"></div> <table id="jqSubGrid"></table> <link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" /> <link href="~/Content/ui.jqgrid.css" rel="stylesheet" /> #section scripts{ <script src="~/Scripts/jqGrid/grid.locale-en.js"></script> <script src="~/Scripts/jqGrid/jquery.jqGrid.js"></script> <script> $(function () { $grid = $("#jqGrid").jqGrid({ url: '#Url.Action("GetData","TEST")', mtype: 'GET', datatype: 'json', colModel: [ { label: 'Hierarchy1', name: 'Hierarchy1' }, { label: 'Hierarchy2', name: 'Hierarchy2' }, { label: 'Hierarchy3', name: 'Hierarchy3' }, ], loadonce: true, pager: '#jqGridPager', rowNum: 10, rowList: [10, 20, 30, 50], viewrecords: true, height: 250, }); $("#jqGrid").jqGrid('navGrid', '#jqGridPager', { edit: false, add: false, del: false }) $("#jqGrid").jqGrid('setGridParam', { onSelectRow: function (rowid, iRow, iCol, e) { var rowData = $("#jqGrid").jqGrid("getRowData", rowid); //alert(rowData.Key); var data0 = { Hierarchy1: rowData.Hierarchy1, Hierarchy2: rowData.Hierarchy2, Hierarchy3: rowData.Hierarchy3 }; // var data0 = { numberId: "1", companyId: "531" }; // var roles = ["role1", "role2", "role3"]; jQuery.ajax({ type: "POST", url: "#Url.Action("EditDescription")", dataType: "json", contentType: "application/json; charset=utf-8", data: JSON.stringify(data0), success: function (data) { //alert(data); }, failure: function (errMsg) { alert(errMsg); } }); $grid1 = $("#jqSubGrid").jqGrid({ url: '#Url.Action("EditDescription", "TEST")', mtype: 'GET', datatype: 'json', colModel: [ { label: 'ProductId', name: 'ProductId' }, { label: 'Productdesc', name: 'Productdesc' }, ], loadonce: true, pager: '#jqGridPager', rowNum: 10, rowList: [10, 20, 30, 50], viewrecords: true, height: 250, }); } }); }); </script> }
How to draw line for real time flot?
Starting from here: How do I display a Json random number in a real-time Flot chart?, I managed to display a random number on a flot chart. The x axes is the current time's second. The problem I have is that now on my chart is shown only a point (current value). What I want is to display a real time line according to the values of the random number. How could I do this? I hope I made myself understood. Here is my cod: In C#: if (method == "rnd") { //Current second this.Page.Response.ContentType = "application/json1"; DateTime now = DateTime.Now; int sec = now.Second; Random rnd = new Random(); int nr = rnd.Next(1, 100); // creates a number between 1 and 99 var str = "{\"sec\":" + sec.ToString() + ",\"val\":" + nr.ToString() + "}"; var json2 = new JavaScriptSerializer().Serialize(str); this.Page.Response.Write(json2); } My ASP page: <%# Page Language="C#" AutoEventWireup="true" CodeBehind="MultiTrenduri.aspx.cs" Inherits="WebApplication2.MultiTrenduri" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.3.min.js"></script> <script src="Scripts/flot/jquery.flot.min.js"></script> <script src="Scripts/flot/jquery.flot.time.js"></script> <script src="Scripts/flot/jquery.flot.symbol.js"></script> <script src="Scripts/flot/hashtable.js"></script> <script src="Scripts/flot/jquery.flot.axislabels.js"></script> <script src="Scripts/flot/jquery.numberformatter-1.2.3.min.js"></script> <link href="Flot/examples.css" rel="stylesheet" /> <script type="text/javascript"> var sc = [], num = []; function test2() { $.ajax({ type: 'POST', url: ('ajax.aspx?meth=') + "rnd", contentType: 'application/json2; charset=utf-8', dataType: 'json', async: true, cache: false, global: false, timeout: 120000, success: function (data, textStatus, jqXHR) { var obj = jQuery.parseJSON(data); $('#azi').html(obj.sec); $('#nr').html(obj.val); var sc = [], num = []; sc.push(obj.sec); num.push(obj.val); data = [[[sc, num]]]; //var afis = [[[data]]]; //$('#afs').text(afis.join(" * ")); //show the data in a list in body var items = []; $.each(data, function (key, val1) { items.push("<li><a href=#'" + key + "'>" + val1 + "</a></li>"); }); $( "<ul/>", { "class": "my-new-list", html: items.join( "" ) }).appendTo( "body" ); //START: PLOT IN TIMP REAL $(function () { var plot = $.plot("#placeholder", data, { series: { shadowSize: 0 // Drawing is faster without shadows }, points: { show: true }, line: { show: true }, yaxis: { min: 0, max: 100 }, xaxis: { show: true } }); // plot.setData(data); //to reset data // plot.draw(); //to redraw chart }); // plot.draw(); //END: PLOT IN TIMP REAL }, error: function (jqXHR, textStatus, errorThrown) { window.alert(errorThrown); } }); } window.setInterval(test2, 1000); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="azi"></div> <div id="nr"></div> <div class="demo-container"> <div id="placeholder" class="demo-placeholder"> </div> </div> </div> </form> </body> </html>
Maybe is someone which needs to do the same. This is how I managed to do it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="Scripts/jquery-1.8.3.min.js"></script> <script src="Scripts/flot/jquery.flot.min.js"></script> <script src="Scripts/flot/jquery.flot.time.js"></script> <script src="Scripts/flot/jquery.flot.symbol.js"></script> <script src="Scripts/flot/hashtable.js"></script> <script src="Scripts/flot/jquery.flot.axislabels.js"></script> <script src="Scripts/flot/jquery.numberformatter-1.2.3.min.js"></script> <link href="Flot/examples.css" rel="stylesheet" /> <%-- Library for TOOLTIP:--%> <script src="Scripts/flot/jquery.flot.crosshair.js"></script> <!-- CSS --> <%--<style type="text/css"> #placeholder { width: 1000px; height: 500px; text-align: center; margin: 0 auto; } </style>--%> <%-- <link href="Flot/examples.css" rel="stylesheet" />--%> <%-- <script src="Scripts/jquery-1.4.1.js"></script> <script src="Scripts/flot/jquery.flot.js"></script>--%> <script type="text/javascript"> var sc = [], num = []; var data = []; var dataset; var totalPoints = 100; var updateInterval=30 ; var now = new Date().getTime(); var t; var multipleCalls, multCalls; var input = document.getElementById('input'); var st; /* window.onload = function f1() { document.getElementById('updateInterval').value = 90; } function f2() { // document.getElementById('up2').value = document.getElementById('up1').value var updateInterval = document.getElementById('updateInterval').value; // window.alert(updateInterval); }*/ $(function () { function test2() { $.ajax({ type: 'GET', url: ('ajax.aspx?meth=') + "rnd", contentType: 'application/json2; charset=utf-8', dataType: 'json', //async: true, //cache: false, //global: false, // timeout: 120000, success: function (data, textStatus, jqXHR) { var obj = jQuery.parseJSON(data); $('#azi').html(obj.sec); $('#nr').html(obj.val); t = obj.val; }, error: function (jqXHR, textStatus, errorThrown) { window.alert(errorThrown); } }); } function apel() { test2(); $('#fn').html(t); updateInterval = document.getElementById('updateInterval').value; } function GetData() { data.shift(); data.slice(1); while (data.length < totalPoints) { // var y = Math.random() * 100; var y = t; var temp = [now += updateInterval, y]; data.push(temp); } } $("#up").val(updateInterval).change(function () { var vv = $(this).val(); if (vv && !isNaN(+vv)) { updateInterval = +vv; if (updateInterval < 1) { updateInterval = 1; } else if (updateInterval > 2000) { updateInterval = 2000; } $(this).val("" + updateInterval); } }); var options = { series: { lines: { show: true, lineWidth: 1.2, fill: false } }, xaxis: { mode: "time", tickSize: [2, "second"], tickFormatter: function (v, axis) { var date = new Date(v); if (date.getSeconds() % 5 == 0) { var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); var w = hours + ":" + minutes + ":" + seconds; return w; } else { return ""; } }, axisLabel: "Time", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 10 }, grid: { hoverable: true, clickable: true }, yaxis: { min: 0, max: 100, tickSize: 5, tickFormatter: function (v, axis) { if (v % 10 == 0) { return v + "%"; } else { return ""; } }, axisLabel: "CPU loading", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 6 }, legend: { labelBoxBorderColor: "#fff" } }; //START TOOLTIP /* $("#placeholder").bind("plothover", function (event, pos, item) { if ($("#enablePosition:checked").length > 0) { var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")"; $("#hoverdata").text(str); } if ($("#enableTooltip:checked").length > 0) { if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); $("#tooltip").html(item.series.label + " of " + x + " = " + y) .css({ top: item.pageY + 5, left: item.pageX + 5 }) .fadeIn(200); } else { $("#tooltip").hide(); } } }); $("#placeholder").bind("plotclick", function (event, pos, item) { if (item) { $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label); plot.highlight(item.series, item.datapoint); } }); */ //END TOOLTIP st = $(document).ready(function f1() { test2(); GetData(); dataset = [ { label: "CPU", data: data } ]; $.plot($("#placeholder"), dataset, options); function stop() { //window.alert("Stop"); //multipleCalls.clearTimeout(); window.clearTimeout(updateInterval); } function update() { test2(); GetData(); $.plot($("#placeholder"), dataset, options) multipleCalls = setTimeout(update, updateInterval); multCalls = multipleCalls; } update(); }); }); </script> </head> <body> //Stops the graph <button onclick="clearInterval(multipleCalls)">Stop</button> <div id="header"> <div id="azi"></div> <div id="nr"></div> </div> <div id="content"> <div class="demo-container"> <div id="placeholder" class="demo-placeholder"></div> </div> <p>Time between updates: <input id="up" type="text" value="" style="text-align: right; width:5em"/> milliseconds</p> </div> </body> </html>
Post request in web view windows phone - using C#
I am trying to achieve the same thing, but I am getting exception when I call the InvokeScript method, Please help. I used this link (Post data with a request in a Windows Store app WebView - using C#) to code, Here is my JV webview.NavigateToString(#"<html> <head> <script type='text/javascript'> function doSomething(userIdValue, sessionIdValue) { document.getElementById('Username').value = userIdValue; document.getElementById('Password').value = sessionIdValue; document.getElementById('myForm').submit(); return 'Hello World!'; } </script> </head> <body> <form id='myForm' action='http://integr-dev-ma.test.plano/myplano/Account/Login' method='post'> <input type='hidden' id='ext-element-18' name='Username' /> <input type='hidden' id='ext-element-24' name='Password' /> </form> </body> </html>"); When I call this script I get following Exception private async void Button_Click_1(object sender, RoutedEventArgs e) { // this.Frame.Navigate(typeof(SettingsPage)); try { await webview.InvokeScriptAsync("doSomething", new string[] { "30001", "12345" }); } catch (Exception aex) { string messages = ""; messages += aex.Message + "\r\n"; System.Diagnostics.Debug.WriteLine(messages); } I resolved above problem, there was problem in Javascript, The ID was written wrong in following code document.getElementById('Username').value = userIdValue; document.getElementById('Password').value = sessionIdValue; The Username and Password should have been "ext-element-18" and "ext-element-18". Correcting javascript removed the exception. Now the basic aim of this request was to login in the webview. My other team has developed the webpart, they have used sanchatouch framework so in the HTML code of login page there are no <form> tags so submitting this didn't work. I was not logged in, I am posting source of the login page, may be someone can help on this. When the user clicks on login button normally loginfunction is called, you can locate in code but anyhow I need to do post request to automate login <!DOCTYPE html> <html> <head> <!-- General Meta things --> <meta charset="utf-8" /> <title>Login - myplano</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link href="/myplano/Content/Stylesheets/myplano.css" rel="stylesheet"/> <link href="/myplano/Scripts/Sencha/resources/css/sencha-touch.css" rel="stylesheet"/> --> <link href="/myplano/Scripts/Sencha/resources/css/cupertino.css" rel="stylesheet"/> <link href="/myplano/Content/Stylesheets/myplano.css" rel="stylesheet"/> <!-- Apple Meta things --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent" /> <link rel="apple-touch-icon" sizes="144x144" href="/myplano/Content/Images/App_Icons/Apple/myplano144.png"> <link rel="apple-touch-icon" sizes="57x57" href="/myplano/Content/Images/App_Icons/Apple/myplano57.png"> <link rel="apple-touch-icon" sizes="72x72" href="/myplano/Content/Images/App_Icons/Apple/myplano72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/myplano/Content/Images/App_Icons/Apple/myplano114.png"> <link rel="apple-touch-startup-image" href="/myplano/Content/Images/App_Icons/Apple/apple_startup.png"> <!-- Android Meta things --> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#384093"> <link rel="icon" sizes=”192×192″ href="/myplano/Content/Images/App_Icons/Android/myplano192.png"> <!-- Windows meta things --> <!-- TODO: Icon size needs to be 310x310 --> <meta name="application-name" content="myplano" /> <meta name="msapplication-TileColor" content="#384093" /> <meta name="msapplication-square70x70logo" content="/myplano/Content/Images/App_Icons/Windows/tiny.png" /> <meta name="msapplication-square150x150logo" content="/myplano/Content/Images/App_Icons/Windows/square.png" /> <meta name="msapplication-wide310x150logo" content="/myplano/Content/Images/App_Icons/Windows/wide.png" /> <meta name="msapplication-square310x310logo" content="/myplano/Content/Images/App_Icons/Windows/large.png" /> <meta name='msapplication-navbutton-color' content='#384093' /> <meta name='msapplication-tooltip' content='start myplano' /> <meta name="msapplication-window" content="width=800;height=1024;" /> <!--<meta name='msapplication-starturl' content='http//domain.de' />--> <!-- This script is required for the swipe calendar--> <!--<script type="text/javascript" src="/myplano/Scripts/myplano/momentjs/moment.js"></script> --> </head> <body> <script type="text/javascript"> var baseUrl = "/myplano/"; </script> <script src="/myplano/Scripts/Sencha/sencha-touch-all.js"></script> <script src="/myplano/Scripts/Sencha/src/ux/picker/DateTime.js"></script> <script src="/myplano/Scripts/Resources/Resource-de.js"></script> <script type="text/javascript"> Ext.Date.defaultDateFormat = "d.m.Y"; Ext.Date.defaultTimeFormat = "H:i"; Ext.Date.defaultTimeHMSFormat = "H:i:s"; Ext.Date.defaultFullDateTimeFormat = "d.m.Y H:i:s"; var localLanguage = 'en'; </script> <script src="/myplano/Scripts/myplano/momentjs/moment.js"></script> <script src="/myplano/Scripts/Controls/Timefield.js"></script> <script src="/myplano/Scripts/Controls/DateTimePicker.js"></script> <script src="/myplano/Scripts/myplano/Base.js"></script> <script src="/myplano/Scripts/myplano/MainMenu.js"></script> <script src="/myplano/Scripts/myplano/Views/AccountValues.js"></script> <script src="/myplano/Scripts/myplano/Views/Profile.js"></script> <script src="/myplano/Scripts/myplano/Views/RequestList.js"></script> <script src="/myplano/Scripts/myplano/Views/TimeStamps.js"></script> <script src="/myplano/Scripts/myplano/Views/Calendars/DayCalendar.js"></script> <script src="/myplano/Scripts/myplano/Views/Calendars/MonthCalendar.js"></script> <script src="/myplano/Scripts/myplano/Views/Calendars/WeekCalendar.js"></script> <script src="/myplano/Scripts/myplano/Views/Calendars/GroupCalendar.js"></script> <script src="/myplano/Scripts/myplano/Views/Calendars/Calendar_Shared.js"></script> <script src="/myplano/Scripts/myplano/Views/Requests/FullDay.js"></script> <script src="/myplano/Scripts/myplano/Views/Requests/RequestTypeList.js"></script> <script src="/myplano/Scripts/myplano/Views/Requests/NewRequest.js"></script> <script src="/myplano/Scripts/myplano/Views/ApproverList.js"></script> <script src="/myplano/Scripts/myplano/placeholder.js"></script> <script src="/myplano/Scripts/myplano/util/PaintMonitor.js"></script> <script src="/myplano/Scripts/myplano/util/SizeMonitor.js"></script> <script src="/myplano/Scripts/myplano/shared.js"></script> <script src="/myplano/Scripts/myplano/TransponderUi.js"></script> <div> <script type="text/javascript"> var userTextfield = new String; Ext.setup({ onReady: function () { // create local user model Ext.define('LocalUser', { extend: 'Ext.data.Model', config: { fields: [ { name: "id" }, { name: "username", type: "string" }, { name: "firstname", type: "string" }, { name: "lastname", type: "string" }, { name: "globalmessage", type: "string" }, { name: "employeemessage", type: "string" } ], proxy: { type: 'localstorage', id: 'local-user' } } }); var store = Ext.create('Ext.data.Store', { model: 'LocalUser' }); store.load(); var storageCount = store.getAllCount(); if (storageCount > 0) { //console.log(storageCount + " users found"); var userObject = store.getAt(storageCount - 1); var user = userObject.get("username"); userTextfield = user; //console.log("last logged in user was: " + userTextfield); } //login var login = function () { var label = form.down("[itemId='signInFailedLabel']"); var btn = form.down("button"); label.hide(); btn.setDisabled(true); form.setDisabled(true); btn.setText(plano.myplano.Resources.Get("LogingIn")); //login Ext.Ajax.request({ url: plano.Base.ResolveUrl('~/Account/Login'), method: 'POST', params: form.getValues(), success: function (response) { var data = Ext.decode(response.responseText); if (data.error) { label.setHtml(data.error); label.show(); form.setValues({ Username: "", Password: "" }); btn.setText(plano.myplano.Resources.Get("LoginDescription")); btn.setDisabled(false); form.setDisabled(false); } else if (data.success) { var firstName = ""; var lastName = ""; var globalMessage = ""; var employeeMessage = ""; //if new password needed if (data.newPasswordNeeded) { location.href = plano.Base.ResolveUrl('~/Account/ResetPassword'); }; Ext.Ajax.request({ url: plano.Base.ResolveUrl("~/Home/getEmployeeName"), success: function (result) { var resultData = Ext.decode(result.responseText); console.log(resultData); console.log("Employee Name"); console.log(resultData.data['FirstName'] + " " + resultData.data['LastName']); firstName = resultData.data['FirstName']; lastName = resultData.data['LastName']; //Store Username var thisuser = form.down("textfield").getValue(); Ext.Ajax.request({ url: plano.Base.ResolveUrl("~/Home/getWelcomeText"), success: function (result2) { var resultData2 = Ext.decode(result2.responseText); console.log("WelcomeText"); console.log(resultData2['employeeMessage']); globalMessage = resultData2['globalMessage']; if (resultData2['employeeMessage']) { employeeMessage = resultData2['employeeMessage']; } var store = Ext.create('Ext.data.Store', { model: "LocalUser" }); store.load(); store.getProxy().clear(); store.data.clear(); store.add({ username: thisuser, firstname: firstName, lastname: lastName, globalmessage: globalMessage, employeemessage: employeeMessage }); store.sync(); location.href = plano.Base.ResolveUrl('~/'); } }); } }); } }, error: function (errorResponse) { Ext.Msg.alert('Error', 'Login request failed'); } }); }; var form = Ext.create('Ext.form.Panel', { fullscreen: true, id: 'loginForm', scrollable: null, baseCls: 'login-form', config: { //scrollable: false }, layout: { type: 'vbox', pack: 'center', align: 'center' }, items: [ { xtype: 'panel', hideAnimation: 'fadeOut', showAnimation: 'fadeIn', itemId: 'myplanoLogo', html: '<img id="logo" class="login-myplano-logo" src="/myplano/Content/Images/Vector/myplano.svg" />' //~/Content/Images/myplano 256x256.png }, { xtype: 'fieldset', baseCls: 'login-form', //title: plano.myplano.Resources.Get("LoginTitle"), defaults: { margin: '5px 0', listeners: { action: login } }, items: [ { xtype: 'panel', html: '<div class="separator-login"></div>' }, { xtype: "textfield", clearIcon: false, baseCls: 'login-form', placeHolder: plano.myplano.Resources.Get("UserName"), value: userTextfield, name: "Username", required: true }, { xtype: "passwordfield", clearIcon: false, baseCls: 'login-form', placeHolder: plano.myplano.Resources.Get("Password"), name: "Password", required: true }, { xtype: 'button', cls: 'login-button', labelCls: 'x-button-label login-button-label', text: plano.myplano.Resources.Get("LoginDescription"), margin: '5px auto', handler: login }] }, { xtype: 'label', itemId: 'signInFailedLabel', hidden: true, //hideAnimation: 'fadeOut', //showAnimation: 'fadeIn', style: 'color: #FF8888; text-align: center;', margin: "6 12 6 12" }, { xtype: 'label', itemId: 'vernsionInfo', docked: 'bottom', style: 'text-align: center; color:#FFF; font-size: 0.5em;', margin: "0 0 5px 0", html: 'myplano' + ' Version 1' + '.' + '2' + ' Rev. 73666' }, { xtype: 'panel', docked: 'bottom', itemId: 'planoLogo', //hideAnimation: 'fadeOut', //showAnimation: 'fadeIn', //margin: '5% 0 0 0', html: '<img id="logo" class="login-plano-logo" src="/myplano/Content/Images/Vector/plano_logo_white.svg" />' //~/Content/Images/myplano 256x256.png }] }); //hide image if soft keyboard is shown var myplanoLogo = form.down("[itemId='myplanoLogo']"); var planoLogo = form.down("[itemId='planoLogo']"); window.onresize = function () { // If the current active element is a text input, we can assume the soft keyboard is visible. var windowWidth = Ext.getBody().getWidth(true); var windowHeight = Ext.getBody().getHeight(true); if (windowWidth < windowHeight) { //keyboard is shown console.log("keyboard on"); myplanoLogo.show(); planoLogo.show(); } else { //keyboard is hidden console.log("keyboard off"); myplanoLogo.hide(); planoLogo.hide(); } } } }); </script> </div> <script src="/myplano/Scripts/jquery-2.1.1.js"></script> </body> </html> <script> //back button disabled document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false); function onBackKeyDown(eve) { eve.preventDefault(); //do something alert('back button pressed'); } //this script checks if user is idling var timeoutInMinutes = "20"; //console.log("timeout in " + timeoutInMinutes + " minutes.") var IDLE_TIMEOUT = timeoutInMinutes*60; //seconds var _idleSecondsCounter = 0; var deviceType = ""; document.onclick = function () { _idleSecondsCounter = 0; }; //document.onmousemove = function () { // _idleSecondsCounter = 0; //}; document.onkeypress = function () { _idleSecondsCounter = 0; }; window.setInterval(CheckIdleTime, 1000); function CheckIdleTime() { // create local user model Ext.define('LocalUser', { extend: 'Ext.data.Model', config: { fields: [ { name: "id" }, { name: "username", type: "string" }, { name: "firstname", type: "string" }, { name: "lastname", type: "string" }, { name: "globalmessage", type: "string" }, { name: "employeemessage", type: "string" }, { name: "devicetype", type: "string" } ], proxy: { type: 'localstorage', id: 'local-user' } } }); var store = Ext.create('Ext.data.Store', { model: 'LocalUser' }); store.load(); var storageCount = store.getAllCount(); if (storageCount > 0) { //console.log(storageCount + " users found"); var userObject = store.getAt(storageCount - 1); deviceType = userObject.get("devicetype"); //console.log("device type found by shared: " + deviceType); } _idleSecondsCounter++; var oPanel = document.getElementById("SecondsUntilExpire"); if (oPanel) oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + ""; if (_idleSecondsCounter >= IDLE_TIMEOUT) { if (deviceType == "terminal") { location.href = plano.Base.ResolveUrl('~/Account/TerminalLogout'); } else { location.href = plano.Base.ResolveUrl('~/Account/Logout'); } } } </script>
Not all points are appearing
I did this code I want to display a list of float(points in the map) But only the first point appears the others didn't. The path between the points is hidden also and I don't know why. #model IList #{ Layout = "~/Views/Shared/_Lay2.cshtml";} var culture = System.Globalization.CultureInfo.GetCultureInfo("en-US");} #for (int marker=2;marker<#Model.Count; marker++) { <script type="text/javascript"> alert(#marker); var myOptions = {zoom: 30, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var flightPlanCoordinates = [ new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)),]; var flightmarker = new google.maps.Marker({ position: new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)), map: map, title: " denden" });var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map); </script> marker++; } Any Suggestions?
Looks like you're recreating your map with each iteration of your loop. Maybe try something like this: #model IList<float> #{ Layout = "~/Views/Shared/_Lay2.cshtml"; var culture = System.Globalization.CultureInfo.GetCultureInfo("en-US");} <body onload="initialize(#Model[0].ToString(culture), #Model[1].ToString(culture))"> <table style="width: 100%; height: 70%"> <tr> <td style="width: 100%"><div id="map_canvas" style="width: 100%; height: 500px;"></div></td> <script type="text/javascript"> var myOptions = {zoom: 30, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); #for (int marker=2;marker<#Model.Count; marker += 2) { var flightPlanCoordinates = [ new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)),]; var flightmarker = new google.maps.Marker({ position: new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)), map: map, title: " denden" });var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map); } </script> </tr> </table> <script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>