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>
Related
I have seen this http://codepedia.info/chartjs-asp-net-create-pie-chart-with-database-calling-jquery-ajax-c/ link and followed every steps but dint get the output(i have used "public class cityPopulation") in code behind instead of asmx page will it be the error
</head>
<body>
<script>
function drawPieChart(seriesData) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Population percentage city wise'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: seriesData
}]
});
}
$("#btnCreatePieChart").on('click', function (e) {
var pData = [];
pData[0] = $("#ddlyear").val();
var jsonData = JSON.stringify({ pData: pData });
$.ajax({
type: "POST",
url: "aspchartjsdemo.aspx/getCityPopulation",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
var aData = response.d;
var arr = []
$.map(aData, function (item, index) {
var i = [item.city_name, item.population];
var obj = {};
obj.name = item.city_name;
obj.y = item.population;
arr.push(obj);
});
var myJsonString = JSON.stringify(arr);
var jsonArray = JSON.parse(JSON.stringify(arr));
drawPieChart(jsonArray);
}
function OnErrorCall_(response) {
alert("Whoops something went wrong!");
}
e.preventDefault();
});
</script>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlyear" runat="server" >
<asp:ListItem>2010</asp:ListItem>
<asp:ListItem>2011</asp:ListItem>
<asp:ListItem>2012</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnCreatePieChart" runat="server" Text="Button" />
<br />
<div>
<div id="container" style="width: 500px; height: 500px"></div>
</div>
</div>
</form>
</body>
</html>
here is my Code Behind..Im Unable to Fetch the data from database.
[WebMethod]
public List<cityPopulation> getCityPopulation(List<string> pData)
{
List<cityPopulation> p = new List<cityPopulation>();
using (NpgsqlConnection con = new NpgsqlConnection("Server=Localhost;Port=5432;User Id=postgres;Password=postgres;Database=database4;"))
{
string myQuery = "SELECT id_, city_name, population FROM tb_city_population WHERE year_of = #year";
NpgsqlCommand cmd = new NpgsqlCommand();
cmd.CommandText = myQuery;
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("#year", pData[0]);
cmd.Connection = con;
con.Open();
NpgsqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
cityPopulation cpData = new cityPopulation();
cpData.city_name = dr["city_name"].ToString();
cpData.population = Convert.ToInt32(dr["population"].ToString());
p.Add(cpData);
}
}
}
return p;
}
public class cityPopulation
{
public string city_name { get; set; }
public int population { get; set; }
public string id { get; set; }
}
Any Help Highly appreciated..
This is how I build the Pie:
<div id="pieChart"></div>
<script type="text/javascript" src="highcharts.js"></script>
<script>
var myPieData = [ ['AAA', 34.03], ['BBB', 27.01], ['CCC', 18.77], ['DDD', 11.01], ['EEE', 5.91], ['FFF', 3.27] ];
chart = new Highcharts.Chart({
chart: {
renderTo: 'pieChart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'My PieData'
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
percentageDecimals: 2
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'default',
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: '',
data: myPieData
}]
});
</script>
The part you have to replace with your own data is [ ['Label A', 34.03], ['Label B', 27.01], ['Label C', 18.77], ['Label D', 11.01], ['Label E', 5.91], ['Label F', 3.27] ]
Of course the total value of all the data should be 100.00%
You can do that with a Literal or a string that is filled with content from code behind: var myPieData = [ <%= pieData %> ] or get it from an external source.
Depending on your localization settings, a numeric value can contain a "," instead of a "." (23,59 or 23.59). If your localization uses a "," you will have to replace that with a dot.
UPDATE
As requested an example of how to get a correct string that you can use to build the pie. This should get you started... Just make sure that population is in percentages, not absolute numbers.
public string getCityPopulation(List<string> pData)
{
StringBuilder sb = new StringBuilder();
string myQuery = "SELECT city_name, population FROM tb_city_population WHERE (year_of = #year)";
using (SqlConnection connection = new SqlConnection(Common.connectionString))
using (SqlCommand command = new SqlCommand(myQuery, connection))
{
command.Parameters.AddWithValue("#year", pData[0]);
try
{
connection.Open();
SqlDataReader dr = command.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
sb.Append("[");
sb.Append("'" + dr["city_name"].ToString() + "'");
sb.Append(", ");
sb.Append(dr["population"].ToString().Replace(",", "."));
sb.Append("],");
}
}
}
catch
{
//error connecting\reading the database
}
}
return "[ " + sb.ToString().TrimEnd(',') + " ]";
}
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>
I am using google maps. And I can see the google map. But I get every this error:
SCRIPT5009: 'google' is undefined
My script is this:
var map;
if (typeof initMap == 'function') {
initMap();
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: 52.001321, lng: 4.374577 }
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function () {
geocodeAddress(geocoder, map);
});
}//end function initMap
$("document").ready(function () {
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
});
//function loadScript() {
// var script = document.createElement('script');
// script.type = 'text/javascript';
// script.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initMap';
// document.body.appendChild(script);
//}
//addLoadEvent(loadScript);
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
var marker;
var infowindow;
function geocodeAddress(geocoder, resultsMap) {
if (typeof infowindow != 'undefined') {
infowindow.close();
}
if (typeof marker != 'undefined') {
marker.setMap(null);
}
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: resultsMap,
draggable: true,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location,
title: "Drag me!"
});
//document.getElementById(marker.getPosition().lat().toFixed(6)).className += "geolocation_long";
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:'
+ 'lat: ' + marker.getPosition().lat().toFixed(6)
+ ', '
+ 'lng: ' + marker.getPosition().lng().toFixed(6)
+ '</p>'
});
document.getElementById("form_inp17").value = marker.getPosition().lng().toFixed(6);
document.getElementById("form_inp18").value = marker.getPosition().lat().toFixed(6);
google.maps.event.addListener(marker, 'dragend', function (event) {
if (typeof infowindow != 'undefined') {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:'
+ 'lat: ' + event.latLng.lat().toFixed(6)
+ ', '
+ 'lng: ' + event.latLng.lng().toFixed(6)
+ '</p>'
});
document.getElementById("form_inp17").value = event.latLng.lng().toFixed(6)
document.getElementById("form_inp18").value = event.latLng.lat().toFixed(6)
infowindow.open(map, marker);
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function (event) {
if (typeof infowindow != 'undefined') {
infowindow.open(map, marker);
}
});
});
}
And my html page where I refer to the google maps is like this:
#{
Layout = "~/Areas/Form/Views/Shared/_RenderLayout.cshtml";
}
#section SFSHeadSection {
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/xforms")
#Scripts.Render("~/bundles/xforms_" + ViewBag.Locale)
#if (ViewBag.Includes != null){
#Scripts.Render(ViewBag.Includes);
}
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer type="text/javascript"></script>
<script type="text/javascript">
$(function () {
#Html.Raw(ViewBag.onloadscript)
});
</script>
#Styles.Render("~/Content/jquery-ui.css")
#Styles.Render("~/css/Geo-picker.css")
<style type="text/css">
#Html.Raw(ViewBag.style)
</style>
}
<div>
#Html.Raw(ViewBag.FormHtml)
</div>
Thank you
and yes, I already looked at this thread:
http://stackoverflow.com/questions/11940872/script5009-google-is-undefined
I am trying to generate dynamic html textboxes in my aspx page and on these textboxes i want to add the value using autocomplete facility. I try my best to do so. I try almost every single question's answer of stackoverflow. But nothing is working here my script which generate new textbox dynmacally
<script type="text/javascript">
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 5) {
alert("Limit Exceeds");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
// newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
// '<input type="text" name="textbox' + counter +
// '" id="textbox' + counter + '" value="" class="auto">');
newTextBoxDiv.after().html('<div class="fields-left"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/> </div><div class="fields-right"> <label> Going to</label> <input type="text" name="textbox' + counter + '" id="textbox' + counter+1 + '" class="auto"/> </div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
Html code
<div id="TextBoxDiv1" class="fields" >
<div id="TextBoxesGroup">
</div>
</div>
<input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
</div>
and I am trying this json code for fetching data for very first textbox that generate automatically. First I think for write this script for everytextbox which generate dynamically but this process will be so lengthy and wrong way to do this thing. But this is not working for me
<script type="text/javascript">
$(document).ready(function () {
SearchText2();
});
function SearchText2() {
$("#textbox2").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Home.aspx/GetAutoCompleteData",
data: "{'code':'" + document.getElementById('textbox2').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
Please experts tell me why this json is working for me
Thanks
Please use following code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Web.Home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var counter = 2;
$(document).ready(function () {
$("#addButton").click(function () {
if (counter > 5) {
alert("Limit Exceeds");
return false;
}
var $wrap = $('#TextBoxesGroup');
var dynamichtml = '<div class="fields-left" id="divleft_' + counter + '"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/> </div><div class="fields-right" id="divright_' + counter + '"> <label> Going to</label> <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div>';
$wrap.append(dynamichtml);
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxesGroup").find("#divleft_" + counter).remove();
$("#TextBoxesGroup").find("#divright_" + counter).remove();
});
$(".auto").live("focus", function () {
$(this).autocomplete({
minLength: 2,
source: function (request, response) {
var textval = request.term; // $(this).val();
$.ajax({
url: "Home.aspx/GetAutoCompleteData", type: "POST", dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ code: textval }),
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}, select: function (event, ui) {
return false;
}
});
});
});
</script>
<style type="text/css">
.ui-menu { width: 150px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="TextBoxDiv1" class="fields" >
<div id="TextBoxesGroup">
</div>
</div>
<input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
</div>
</form>
</body>
</html>
In .cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace Web
{
public partial class Home : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
[WebMethod]
public static List<string> GetAutoCompleteData(string code)
{
List<string> list = new List<string>();
list.Add("delhi");
list.Add("noida");
list.Add("gurgaon");
return list.Where(i => i.StartsWith(code)).ToList();
}
}
}
Please add js file as below
I would suggest you to use global variable say data to store the json response retirned for autocomplete.
and then use the same data to bind autocomplete after appending the contents.
$('#newTextBoxDiv input').autocomplete(data);
I have a form on which I am adding rows dynamically using Jquery.
Please take a look: DEMO
Now I want to save the data of all rows that has been added in my database using Jquery Ajax call on click event of SAVE button. The point where I am stuck is .. I am not sure how should I extract data of all rows and send it to the webmethod. I mean had it been c# I could have used a DataTable to store data of all rows before sending it to DataBase. I think I should create a string seperated by commas and pipe with data of each row and send it to webmethod. I am not sure if its the right approach and also how this is to be done (ie. creating such a string).
HTML
<table id="field">
<tbody>
<tr id="row1" class="row">
<td> <span class='num'>1</span></td>
<td><input type="text" /></td>
<td><select class="myDropDownLisTId"> <input type="text" class="datepicker" /></select></td><td>
<input type="submit"></input>
</td>
</tr>
</tbody>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>
<button type="button" id="btnsave">SAVE</button>
2 suggestions:
To keep it as close as what you already have, you could just enclose your table in a form tag, and then you could just submit the form (use something like the jQuery Form plugin to submit it via Ajax). The trickiest part will be to bind that data to action parameters. You may be able to receive it in the form of an array, or you could default to looping through properties of the Request.Form variable. Make sure you generate proper names for those fields.
I think the cleanest way to do it would be to have a JavaScript object holding your values, and having the table generated from that object, with 2-way bindings. Something like KnockoutJS would suit your needs. That way the user enters the data in the table and you'll have it ready to be Json-serialized and sent to the server. Here's a quick example I made.
I wouldn't recommend that approach, but if you wanted to create your own string, you could do something along those lines:
$("#btnsave").click(function () {
var result = "";
$("#field tr").each(function (iRow, row) {
$("td input", row).each(function (iField, field) {
result += $(field).val() + ",";
});
result = result + "|";
});
alert(result);
});
You will have problems if the users types in a comma. That why we use well known serialization formats.
use ajax call on save button event...
like this
$(document).ready(function () {
$('#reqinfo').click(function () {
// debugger;
var emailto = document.getElementById("emailid").value;
if (emailto != "") {
$.ajax({
type: "GET",
url: "/EmailService1.svc/EmailService1/emaildata?Email=" + emailto,
// data: dat,
Accept: 'application/json',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
// debugger;
},
error: function (result) {
// debugger;
}
});
}
else {
//your validation message goes here
return false;
}
});
});
and add you all data in quesry string and transfer it to webservice..
url: "/EmailService1.svc/EmailService1/emaildata?Email=" + emailto + "data1=" + data1,
<script type="text/javascript">
var _autoComplCounter = 0;
function initialize3(_id) {
var input_TO = document.getElementById(_id);
var options2 = { componentRestrictions: { country: 'ID' } };
new google.maps.places.Autocomplete(input_TO, options2);
}
google.maps.event.addDomListener(window, 'load', initialize3);
function incrementValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
function GetDynamicTextBox(value) {
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
return '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "' + value + '" onkeypress = "calcRoute();" />' +
'<input type="button" class="superbutton orange" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
if (document.getElementById('number').value < 3) {
document.getElementById('number').value = value;
var div = document.createElement('DIV');
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
var ht = '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "" onkeypress = "calcRoute();" class="clsgetids" for-action="' + _id + '" />' +
'<input type="button" class="superbutton orange" value="#Resources.SearchOfferRides.btnRemove" onclick = "RemoveTextBox(this); calcRoute();" />';
div.innerHTML = ht;
document.getElementById("TextBoxContainer").appendChild(div);
setTimeout(function () {
var input_TO = document.getElementById(_id);
var options2 = { componentRestrictions: { country: 'ID' } };
new google.maps.places.Autocomplete(input_TO, options2);
}, 100);
document.getElementById("TextBoxContainer").appendChild(div);
}
else {
alert('Enter only 3 stop point. !!');
}
}
function RemoveTextBox(div) {
//calcStopPointRoute();
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
function RecreateDynamicTextboxes() {
var values = eval('<%=Values%>');
if (values != null) {
var html = "";
for (var i = 0; i < values.length; i++) {
html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
}
document.getElementById("TextBoxContainer").innerHTML = html;
}
}
// window.onload = RecreateDynamicTextboxes;
</script>
And get the value from textbox:
#region stop point
string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
if (textboxValues != null)
{
for (Int32 i = 0; i < textboxValues.Length; i++)
{
if (textboxValues.Length == 1)
{
model.OptionalRoot = textboxValues[0].ToString();
}
else if (textboxValues.Length == 2)
{
model.OptionalRoot = textboxValues[0].ToString();
model.OptionalRoot2 = textboxValues[1].ToString();
}
else if (textboxValues.Length == 3)
{
model.OptionalRoot = textboxValues[0].ToString();
model.OptionalRoot2 = textboxValues[1].ToString();
model.OptionalRoot3 = textboxValues[2].ToString();
}
else
{
model.OptionalRoot = "";
model.OptionalRoot2 = "";
model.OptionalRoot3 = "";
}
}
}
#endregion
Short answer:
DataTable equivalent in javascript is Array of custom object (not exact equivalent but we can say that)
or
you roll your own DataTable js class which will have all the functions and properties supported by DataTable class in .NET
Long answer:
on client side(aspx)
you define a class MyClass and store all your values in array of objects of that class
and then pass that array after stingyfying it to web method
JSON.stringify(myArray);
on the server side(codebehind)
you just define the web method to accept a list of objects List<MyClass>
PS: When calling web method, Asp.net automatically converts json array into List<Object> or Object[]
Loooong answer (WHOLE Solution)
Page aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="App_Themes/SeaBlue/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script type="text/javascript">
function MyClass(title,option,date) {
this.Title = title;
this.Option = option;
this.Date = date;
}
function GetJsonData() {
var myCollection = new Array();
$(".row").each(function () {
var curRow = $(this);
var title = curRow.find(".title").val();
var option = curRow.find(".myDropDownLisTId").val();
var date = curRow.find(".datepicker").val();
var myObj = new MyClass(title, option, date);
myCollection.push(myObj);
});
return JSON.stringify(myCollection);
}
function SubmitData() {
var data = GetJsonData();
$.ajax({
url: "testForm.aspx/PostData",
data: "{ 'myCollection': " + data + " }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function () {
alert("Success");
}
});
}
$(document).ready(function () {
filldd();
CreateDP();
var rowstring = "<tr class='row'><td class='number'></td><td><input type='text' class='title'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td><td><input type='submit'></input></td></tr>";
$("#addField").click(function (event) {
$("#field tbody").append(rowstring);
filldd();
CreateDP();
if ($("td").hasClass("number")) {
var i = parseInt($(".num:last").text()) + 1;
$('.row').last().attr("id", "row" + i);
$($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
}
event.preventDefault();
});
$("#deleteField").click(function (event) {
var lengthRow = $("#field tbody tr").length;
if (lengthRow > 1)
$("#field tbody tr:last").remove();
event.preventDefault();
});
$("#btnsave").click(function () {
SubmitData();
});
});
function filldd() {
var data = [
{ id: '0', name: 'test 0' },
{ id: '1', name: 'test 1' },
{ id: '2', name: 'test 2' },
{ id: '3', name: 'test 3' },
{ id: '4', name: 'test 4' },
];
for (i = 0; i < data.length; i++) {
$(".myDropDownLisTId").last().append(
$('<option />', {
'value': data[i].id,
'name': data[i].name,
'text': data[i].name
})
);
}
}
function CreateDP() {
$(".datepicker").last().datepicker();
}
$(document).on('click', 'input[type="submit"]', function () {
alert($(this).closest('tr')[0].sectionRowIndex);
alert($(this).closest('tr').find('.myDropDownLisTId').val());
});
</script>
</head>
<body>
<form id="frmMain" runat="server">
<table id="field">
<tbody>
<tr id="row1" class="row">
<td>
<span class='num'>1</span>
</td>
<td>
<input type="text" class="title"/>
</td>
<td>
<select class="myDropDownLisTId">
</select>
<input type="text" class="datepicker" />
</td>
<td>
<input type="submit"></input>
</td>
</tr>
</tbody>
</table>
<button type="button" id="addField">
Add Field</button>
<button type="button" id="deleteField">
Delete Field</button>
<button type="button" id="btnsave">
SAVE</button>
</form>
</body>
</html>
CodeBehind:
public partial class testForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void PostData(List<MyClass> myCollection)
{
Console.WriteLine(myCollection.Count);
}
}
public class MyClass
{
string title;
public string Title
{
get { return title; }
set { title = value; }
}
string option;
public string Option
{
get { return option; }
set { option = value; }
}
string date;
public string Date
{
get { return date; }
set { date = value; }
}
}
Hope this helps
References:
Json2.js file
stringify method
define a class in js