Editable dropdownlist using Jquery?

Editable dropdownlist using Jquery? - c#

Editable Dropdownlist working fine in .aspx page referred from this link:
http://jqueryui.com/autocomplete/#combobox
But if i use same code in master page.. i am not getting the Output(Editable dropdownlist)..
what can i do?
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
.custom-combobox
{
position: relative;
display: inline-block;
}
.custom-combobox-toggle
{
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input
{
margin: 0;
padding: 5px 10px;
}
</style>
<script>
(function($) {
$.widget("custom.combobox", {
_create: function() {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function(event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function() {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function() {
input.focus();
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function(event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function() {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function() {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.autocomplete("instance").term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
});
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<div class="ui-widget">
<%-- <select id="combobox" runat="server" >--%>
<asp:DropDownList ID="combobox" runat="server">
<asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
<asp:ListItem Text="ABC" Value="1"></asp:ListItem>
<asp:ListItem Text="CBI" Value="2"></asp:ListItem>
<asp:ListItem Text="IBM" Value="3"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
</asp:Content>

Anyone try this? Seems to do the job
http://xdsoft.net/jquery-plugins/editableselect/

Related

How to fix code have select all asp:CheckBoxList within current table only in .NET C# same as "JQuery - Select All CheckBoxes within..." question?

How to fix code have select all asp:CheckBoxList within current table only in .NET C# same as "JQuery - Select All CheckBoxes within current table only" question ?
Because I try coding with sample but can't select all asp:CheckBoxList within current table only.
Link to "JQuery - Select All CheckBoxes within current table only" question.
My snipplet to describe problem.
<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.6.4.js"></script>
<style>
form , p , td, th{
font-size: 24px;
}
input.largerCheckbox
{
width: 22px;
height: 22px;
}
</style>
</head>
<body>
<h1>Show checkboxes:</h1>
<p><label><input type="checkbox" class="largerCheckbox" id="checkAll"/> Check all</label></p>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><br><br>
<table id="myTable">
<tr class="header">
<th>Checkbox</th>
<th>Number</th>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle1" value="1"></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle2" value="11"></td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle3" value="111"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle4" value="1111"></td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle5" value="11111"></td>
<td>11111</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</body>
</html>
My full source code.
https://github.com/doanga2007/CheckLoopQR3
Sample code at the bottom.
Default.aspx (HTML Code)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CheckLoopQR3.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#myInput {
font-size: 16px;
padding: 6px 20px 6px 10px;
border: 1px solid #ddd;
margin-bottom: 3px;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("CheckBox1");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>QR Code Generator</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Please Input Data</label>
<div class="input-group">
<asp:TextBox ID="txtQRCode" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-prepend">
<asp:Button ID="btnGenerate" runat="server" CssClass="btn btn-secondary" Text="Generate" OnClick="btnGenerate_Click" />
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnSelect" runat="server" CssClass="btn btn-secondary" Text="Display Text" OnClick="btnSelect_Click" /><br /><br />
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:CheckBox ID="checkAll" runat="server" Font-Size="Large"/><asp:Label id="checkTextAll" runat="server" Font-Size="Large"></asp:Label><br /><br />
<label>Input Number to Search </label>
<input type="text" id="myInput" onkeyup="myFunction()"><br /><br />
<asp:CheckBoxList ID="CheckBox1" runat="server" Border="1"
BorderColor="LightGray" Font-Size="Large"></asp:CheckBoxList>
</div>
</form>
</body>
</html>
Default.aspx.cs (C# Code)
using System;
using System.Drawing;
using System.IO;
using ZXing;
using ZXing.QrCode;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace CheckLoopQR3
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.checkTextAll.Text = " Check All";
}
protected void btnSelect_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
long num = Convert.ToInt64(code);
int i;
for (i = 1; i < 6; i++)
{
num *= i;
CheckBox1.Items.Add(new ListItem(" " + num));
}
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
if (CheckBox1.SelectedItem == null)
{
Response.Redirect("Default.aspx");
}
string[] texture = { "Selected Text 1 -> ", "Selected Text 2 -> ", "Selected Text 3 -> ",
"Selected Text 4 -> ", "Selected Text 5 -> "};
string[] texture2 = { " is Checkbox 1.", " is Checkbox 2.", " is Checkbox 3.",
" is Checkbox 4.", " is Checkbox 5."};
foreach (ListItem listItem in CheckBox1.Items)
{
if (listItem.Selected)
{
int a = CheckBox1.Items.IndexOf(listItem);
a = a + 1;
string code = listItem.Text;
CheckBox1.Visible = false;
checkAll.Visible = false;
checkTextAll.Visible = false;
QrCodeEncodingOptions options = new QrCodeEncodingOptions();
options = new QrCodeEncodingOptions
{
DisableECI = true,
CharacterSet = "UTF-8",
Width = 150,
Height = 150,
Margin = 0,
};
var barcodeWriter = new BarcodeWriter();
barcodeWriter.Format = BarcodeFormat.QR_CODE;
barcodeWriter.Options = options;
System.Web.UI.WebControls.Image imgBarCode = new System.Web.UI.WebControls.Image();
imgBarCode.Height = 150;
imgBarCode.Width = 150;
Label lblvalues = new Label();
lblvalues.Text += texture[a - 1] + listItem.Text + texture2[a - 1];
lblvalues.Font.Size = FontUnit.Large;
using (Bitmap bitMap = barcodeWriter.Write(code))
{
using (MemoryStream ms = new MemoryStream())
{
bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
byte[] byteImage = ms.ToArray();
imgBarCode.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(byteImage);
}
PlaceHolder1.Controls.Add(imgBarCode);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
PlaceHolder1.Controls.Add(lblvalues);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
}
}
else
{
//do something else
}
}
}
}
}

Good news : I have answer to fix code have select all asp:CheckBoxList within current table only in .NET C# same as "JQuery - Select All CheckBoxes within current table only" question.
Key of answer to "jQuery :visible Selector".
jQuery :
$(window).load(function(){
$("#checkAll").change(function () {
$("input:checkbox:visible").prop('checked', $(this).prop("checked"));
});
});
My snipplet to another solve problem in HTML.
<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.6.4.js"></script>
<style>
form , p , td, th{
font-size: 24px;
}
input.largerCheckbox
{
width: 22px;
height: 22px;
}
</style>
</head>
<body>
<h1>Show checkboxes:</h1>
<p><label><input type="checkbox" class="largerCheckbox" id="checkAll"/> Check all</label></p>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><br><br>
<table id="myTable">
<tr class="header">
<th>Checkbox</th>
<th>Number</th>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle1" value="1"></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle2" value="11"></td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle3" value="111"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle4" value="1111"></td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox" class="largerCheckbox" name="vehicle5" value="11111"></td>
<td>11111</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
$("#checkAll").change(function () {
$("input:checkbox:visible").prop('checked', $(this).prop("checked"));
});
</script>
</body>
</html>
My full source code.
https://github.com/doanga2007/CheckLoopQR3
Default.aspx (HTML Code)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CheckLoopQR3.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#myInput {
font-size: 16px;
padding: 6px 20px 6px 10px;
border: 1px solid #ddd;
margin-bottom: 3px;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$("#checkAll").change(function () {
$("input:checkbox:visible").prop('checked', $(this).prop("checked"));
});
});
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("CheckBox1");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>QR Code Generator</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Please Input Data</label>
<div class="input-group">
<asp:TextBox ID="txtQRCode" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-prepend">
<asp:Button ID="btnGenerate" runat="server" CssClass="btn btn-secondary" Text="Generate" OnClick="btnGenerate_Click" />
</div>
</div>
</div>
</div>
</div>
<label>Input Number to Search </label>
<input type="text" id="myInput" onkeyup="myFunction()"><br />
<asp:Button ID="btnSelect" runat="server" CssClass="btn btn-secondary" Text="Display Text" OnClick="btnSelect_Click" /><br /><br />
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:CheckBox ID="checkAll" runat="server" Font-Size="Large"/><asp:Label id="checkTextAll" runat="server" Font-Size="Large"></asp:Label><br /><br />
<asp:CheckBoxList ID="CheckBox1" runat="server" Border="1"
BorderColor="LightGray" Font-Size="Large"></asp:CheckBoxList>
</div>
</form>
</body>
</html>
Default.aspx.cs (C# Code)
using System;
using System.Drawing;
using System.IO;
using ZXing;
using ZXing.QrCode;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace CheckLoopQR3
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.checkTextAll.Text = " Check All";
}
protected void btnSelect_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
long num = Convert.ToInt64(code);
int i;
for (i = 1; i < 6; i++)
{
num *= i;
CheckBox1.Items.Add(new ListItem(" " + num));
}
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
if (CheckBox1.SelectedItem == null)
{
Response.Redirect("Default.aspx");
}
string[] texture = { "Selected Text 1 -> ", "Selected Text 2 -> ", "Selected Text 3 -> ",
"Selected Text 4 -> ", "Selected Text 5 -> "};
string[] texture2 = { " is Checkbox 1.", " is Checkbox 2.", " is Checkbox 3.",
" is Checkbox 4.", " is Checkbox 5."};
foreach (ListItem listItem in CheckBox1.Items)
{
if (listItem.Selected)
{
int a = CheckBox1.Items.IndexOf(listItem);
a = a + 1;
string code = listItem.Text;
CheckBox1.Visible = false;
checkAll.Visible = false;
checkTextAll.Visible = false;
QrCodeEncodingOptions options = new QrCodeEncodingOptions();
options = new QrCodeEncodingOptions
{
DisableECI = true,
CharacterSet = "UTF-8",
Width = 150,
Height = 150,
Margin = 0,
};
var barcodeWriter = new BarcodeWriter();
barcodeWriter.Format = BarcodeFormat.QR_CODE;
barcodeWriter.Options = options;
System.Web.UI.WebControls.Image imgBarCode = new System.Web.UI.WebControls.Image();
imgBarCode.Height = 150;
imgBarCode.Width = 150;
Label lblvalues = new Label();
lblvalues.Text += texture[a - 1] + listItem.Text + texture2[a - 1];
lblvalues.Font.Size = FontUnit.Large;
using (Bitmap bitMap = barcodeWriter.Write(code))
{
using (MemoryStream ms = new MemoryStream())
{
bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
byte[] byteImage = ms.ToArray();
imgBarCode.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(byteImage);
}
PlaceHolder1.Controls.Add(imgBarCode);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
PlaceHolder1.Controls.Add(lblvalues);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
}
}
else
{
//do something else
}
}
}
}
}

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>

Refresh the session in Updatepanel on Partial Postback in ASp.net

I have one Update panel & in that update panel I have a session.
On Partial post back I have to change the value of session depending on the Dates.
But When I do the partial Postback session is not refreshed Or lost, Dont know .
On the button click I am changing the session values.
How can I achieve that
Here Is the HTML
<asp:UpdatePanel ID="UpdatePasanel1"
UpdateMode="Always"
ClientIDMode="AutoID"ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<div class="vendor_shift_top">
<div class="col-md-12">
<div class="cntrol_heading">
<div class="inner_cntrol_heading_right">
<div class="cls">
<div class="popup_inner">
Start Date:
</div>
<div class="popup_inner">
<asp:TextBox ID="txtStartDate" ReadOnly="false" AutoPostBack="false" CssClass="txt_80" runat="server"></asp:TextBox>
</div>
<div class="popup_inner">
End Date:
</div>
<div class="popup_inner">
<asp:TextBox ID="txtEndDate" ReadOnly="false" CssClass="txt_80" runat="server"></asp:TextBox>
</div>
<div class="popup_inner">
<asp:LinkButton ID="LinkButton1" ForeColor="White" OnClick="Button1_Click" runat="server"><img src="../images/search.png" /> Search</asp:LinkButton>
</div>
</div>
<script type="text/javascript">
//On Page Load
$(".cls1").click(function () {
$(".cls").toggle("blind", 100);
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$(".cls1").click(function () {
$(".cls").toggle("blind", 100);
});
}
});
};
</script>
</div>
</div>
</div>
<div class="vendor_shift_top">
<div class="col-md-12 map_box">
<script type="text/javascript" class="s">
//On Page Load
$(function () {
var dataSource = [
<%=Session["TotalSalesPurchase"]%>
];
$("#chartContainer3").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "year"
},
series: [
{ valueField: "Inward", name: "Purchase" },
{ valueField: "Outward", name: "Sales" },
],
argumentAxis: {
grid: {
visible: true
}
},
tooltip: {
enabled: true
},
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
commonPaneSettings: {
border: {
visible: true,
right: false
}
}
});
});
//On UpdatePanel Refresh
//var prm = Sys.WebForms.PageRequestManager.getInstance();
//if (prm != null) {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, e) {
//if (sender._postBackSettings.panelsToUpdate != null) {
var dataSource = [
<%=Session["TotalSalesPurchase22"]%>
];
$("#chartContainer3").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "year"
},
series: [
{ valueField: "Inward", name: "Purchase" },
{ valueField: "Outward", name: "Sales" },
],
argumentAxis: {
grid: {
visible: true
}
},
tooltip: {
enabled: true
},
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
commonPaneSettings: {
border: {
visible: true,
right: false
}
}
});
//}
});
//};
</script>
<div id="chartContainer3"
class="overlap_cls" runat="server" style="width: 100%; height: 340px;"></div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />
</Triggers>
< /asp:UpdatePanel>
C#
protected void Button1_Click(object sender, EventArgs e)
{
//Session.Remove("TotalSalesPurchase22");
cm.ds.Clear();
ArrayList arr = new ArrayList();
arr.Add("#StartDate|" + txtStartDate.Text + "");
arr.Add("#EndDate|" + txtEndDate.Text + "");
cm.sp_reader_execute("spSalesPurchase_LineChart_Order", arr);
string DisplayChartFormat = "";
while (cm.rs.Read())
{
string MonthYear = cm.rs["month"].ToString() + "-" + cm.rs["year"].ToString();
DisplayChartFormat += "{ year: '" + MonthYear + "', Inward: " + cm.rs["InWardQty"].ToString() + ", Outward: " + cm.rs["OutWardQty"].ToString() + " },";
}
string FinalDisplayFormat = DisplayChartFormat.Remove(DisplayChartFormat.Length - 1);
Session["TotalSalesPurchase22"] = FinalDisplayFormat;
ScriptManager.RegisterStartupScript(this.UpdatePanel1, typeof(string), "alertScript", string.Format("alert('{0}');", Session["TotalSalesPurchase22"]), true);
}
Any Help will be appreciated
Thank You
Hardik Parmar.

use this code.
string FinalDisplayFormat = DisplayChartFormat.Remove(DisplayChartFormat.Length - 1);
Session["TotalSalesPurchase22"] = FinalDisplayFormat;
Response.Write(#"<script language='javascript'>alert('The following errors have occurred: \n" + Session["TotalSalesPurchase22"] + " .');</script>");

since your button is located inside the update panel, you should not use Async trigger for it. use a regular trigger and it will work fine:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BT_Test" runat="server" Text="Button" OnClick="BT_Test_Click"></asp:Button>
<script>
alert(<%=Session["test"]%>);
</script>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="BT_Test"/>
</Triggers>
</asp:UpdatePanel>
c#:
protected void BT_Test_Click(object sender, EventArgs e)
{
Session["test"] = "2";
}

Jquery Drag and Drop - Not able to drag back

I want to be able to put back an item to his original location list, by drag or by a remove button im the destiny list. Until now I have been able to drag to the final list and to remove it from the final list, but I can't find a way to put it back to the original list.
Here is the code I have by now (testable version here: http://jsfiddle.net/PmVhd/):
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; cursor: move }
#cart { width: 300px; float: left; margin-top: 1em; cursor: move }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
helper: "clone"
});
$("#catalog ul").droppable({
drop: function (event, ui) {
$(ui.draggable).remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
});
$("#cart ol").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
drop: function (event, ui) {
$(ui.draggable).remove();
$(this).find(".placeholder").remove();
var el = $("<li>" + ui.draggable.text() + "</li> <a href='#'>[x]</a>").filter('a')
.click(function () {
el.remove();
}).end().appendTo(this);
}
});
});
<div id="products">
<h1 class="ui-widget-header">Car Extras</h1>
<div id="catalog">
<h2>Security</h2>
<div>
<ul>
<li id="1">ABS</li>
<li id="2">ESP</li>
<li id="3">Airbag</li>
</ul>
</div>
<h2>Confort</h2>
<div>
<ul>
<li>Air Conditioning</li>
<li>Hands-free Phone</li>
<li>Alligator Leather</li>
</ul>
</div>
<div id="cart">
<h1 class="ui-widget-header">My Car Extras</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
Thanks for any help.

After long hours of search and tests, I came to a solution that seems to cover all:
Drag from List to Favorite List
Button to send to Favorite List
Drag back to the original Section
Remove button to move back to the original Section
Fade In and Fade Out of the movement
All this based on the JQuery Photo Manager example: http://jqueryui.com/droppable/#photo-manager
Model:
public class FeatureDto
{
public int Id { get; set; }
public string Name { get; set; }
}
public class FeatureGroupDto
{
public int Id { get; set; }
public string Name { get; set; }
}
public class FeatureGroupFeaturesDto
{
public FeatureGroupDto FeatureGroup { get; set; }
public IList<FeatureDto> Features { get; set; }
}
Data for tests:
IList<FeatureGroupFeaturesDto> fcf = new List<FeatureGroupFeaturesDto>();
fcf.Add(new FeatureGroupFeaturesDto
{
FeatureGroup = new FeatureGroupDto { Id = 1, Name = "Interior" },
Features = new List<FeatureDto> {
new FeatureDto { Id = 7, Name = "Bancos Traseiros Rebatíveis" },
new FeatureDto { Id = 35, Name = "Computador de Bordo" },
new FeatureDto { Id = 38, Name = "Suporte para Telemóvel" }
},
});
fcf.Add(new FeatureGroupFeaturesDto
{
FeatureGroup = new FeatureGroupDto { Id = 2, Name = "Exterior" },
Features = new List<FeatureDto> {
new FeatureDto { Id = 13, Name = "Barras de Tejadilho" },
new FeatureDto { Id = 15, Name = "Retrovisores Aquecidos" },
new FeatureDto { Id = 16, Name = "Retrovisores Elétricos" }
},
});
Code including Accordion creation based on Test Data and all Script:
#model IEnumerable<Heelp.ViewModels.FeatureGroupFeaturesViewModel>
<div id="featuresList">
#foreach (var item in Model) {
<h1>#item.FeatureGroup.Name</h1>
<div>
<ul id="fg#(item.FeatureGroup.Id)">
#foreach (var feature in item.Features)
{
<li id="#feature.Id" class="feature">#feature.Name [»]</li>
}
</ul>
</div>
}
</div>
<h1>My Features</h1>
<div id="myFeatures">
<ol></ol>
</div>
<div id="test"></div>
<style>
.feature { cursor: move; }
h1 { cursor: pointer; }
#myFeatures ol { margin: 0; padding: 1em 0 1em 3em; background-color: lightgray; width: 200px; height: 100px; cursor: move; }
</style>
<script>
$(function () {
var $featuresList = $("#featuresList"), $myFeatures = $("#myFeatures");
// Accordion
$featuresList.accordion();
// Features List | Drag
$("ul > li", $featuresList).draggable({
revert: "invalid",
containment: "document",
helper: "clone"
});
// My Features List | Drop
$myFeatures.droppable({
accept: "#featuresList li",
drop: function (event, ui) {
addToMyFeatures(ui.draggable);
}
})
// Features List | Drop Back Again
$featuresList.droppable({
accept: "#myFeatures li",
drop: function (event, ui) {
removeFromMyFeatures(ui.draggable);
}
})
// Add to MyFeatures List function
var removeButton = "<a href='#' class='feature-remove-from-my-list'>[x]</a>";
function addToMyFeatures($feature) {
$feature.fadeOut(function () {
$feature.find("a.feature-send-to-my-list").remove();
$feature.find("span").remove();
$feature
.append("<span style='display:none'>" + $feature.parent('ul').attr('id') + "</span>")
.append(removeButton)
.appendTo("ol", $myFeatures)
.fadeIn();
});
}
// Remove from MyFeatures List function
var addButton = "<a href='#' class='feature-send-to-my-list'>[»]</a>";
function removeFromMyFeatures($feature) {
$feature.fadeOut(function () {
var featureGroup = "#" + $feature.find("span").text();
$feature.find("a.feature-remove-from-my-list").remove();
$feature
.append(addButton)
.appendTo(featureGroup)
.fadeIn();
});
}
// Click event to add or remove Feature from My List
$("#featuresList li").click(function (event) {
var $item = $(this), $target = $(event.target);
if ($target.is("a.feature-send-to-my-list")) {
addToMyFeatures($item);
}
else if ($target.is("a.feature-remove-from-my-list")) {
removeFromMyFeatures($item);
}
return false;
})
});
</script>

Google map blank when used with master page

I wrote a google map lookup page. Everthing worked fine until I referenced the page to use a master page. I removed the form tag from the master page as the search button on the map page is a submit button. Everything else on my page appears but the google map div appears with map navigation controls and logo but no map visuals appear.
I retested with the previous, non master page version and the map appears correctly. Any thoughts on what I'm missing?

Please view below Code and let me know its useful ...
MasterPage Code ( GMap.master page)
< body onload="initialize()" onunload="GUnload()" >
< form id="form1" runat="server" >
< div >
< asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
< /asp:contentplaceholder >
< /div >
< /form >
< /body >
GMatTest.aspx Page which is used GMap.Master page
< %# Page Language="C#" MasterPageFile="~/MasterPages/GMap.master" AutoEventWireup="true"
CodeFile="GMapTest.aspx.cs" Inherits="GMapTest" Title="Google Map Page" % >
< asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server" >
< script src="http://maps.google.com/maps?file=api&v=2&key=< % = AppConfig.GoogleMapApiKey % >"
type="text/javascript" >< /script >
< script type="text/javascript" >
var map = null;
var geocoder = null;
var latsgn = 1;
var lgsgn = 1;
var zm = 0;
var marker = null;
function initialize()
{
if (GBrowserIsCompatible())
{
var latitude= "";
var longitude= "";
map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(0,0);
map.setCenter(center, 17);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.enableDoubleClickZoom();
marker = new GMarker(center,{draggable: true});
geocoder = new GClientGeocoder();
GEvent.addListener(marker, "dragend", function() {
var point = marker.getLatLng();
marker.openInfoWindowHtml("Latitude: " + point.y + "< /br > Longitude: " + point.x );
});
GEvent.addListener(marker, "click", function() {
var point = marker.getLatLng();
});
map.addOverlay(marker);
GEvent.trigger(marker, "click");
if (latitude > 0 && longitude > 0)
{
}
else
{
showAddress();
}
}
}
Below porsion is continue so please copy it also
function showAddress()
{
var isAddressFound=false;
var companyAddress = '';
var address='satyam mall, vastrapur, ahmedabad, gujrat, india';
if (geocoder)
{
geocoder.getLatLng(address,function(point) {
if (!point) {
alert(address + " not found");
} else {
isAddressFound =true;
map.setCenter(point,17);
zm = 1;
marker.setPoint(point);
GEvent.trigger(marker, "click");
}
}
);
//If address not found then redirect to company address
if(!isAddressFound)
{
geocoder.getLatLng(companyAddress,
function(point) {
if (!point) {
} else {
isAddressFound =true;
map.setCenter(point,17);
zm = 1;
marker.setPoint(point);
GEvent.trigger(marker, "click");
}
}
);
}
}
}
< /script >
< div id="map_canvas" style="width: 100%; height: 425px" >
< /div >
< /asp:Content >

this is the code i used.it works fine here but whenever i add master page it does not perform any use functionality
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Find latitude and longitude with Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAPkZq56tNYNmeuZjNQQ2p3hT0NZP-HbfQNNfWb9Z5SLbjZKYKwBTrGBqtttFmF2d-kWv2B2nqW_NyEQ"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(48.89364, 2.33739);
map.setCenter(center, 15);
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(6);
document.getElementById("lng").innerHTML = center.lng().toFixed(6);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(6);
document.getElementById("lng").innerHTML = point.lng().toFixed(6);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(6);
document.getElementById("lng").innerHTML = center.lng().toFixed(6);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(6);
document.getElementById("lng").innerHTML = point.lng().toFixed(6);
});
});
}
}
function showAddress(address) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
document.getElementById("lat").innerHTML = point.lat().toFixed(6);
document.getElementById("lng").innerHTML = point.lng().toFixed(6);
map.clearOverlays()
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(6);
document.getElementById("lng").innerHTML = pt.lng().toFixed(6);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(6);
document.getElementById("lng").innerHTML = center.lng().toFixed(6);
GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(6);
document.getElementById("lng").innerHTML = pt.lng().toFixed(6);
});
});
}
}
);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()" >
<p>This page uses the Google Maps API to find out accurate geographical coordinates (latitude and longitude) for any place on Earth. <br/>It provides two ways to search, either by moving around the map and zooming in, or by typing an address if the place is unknown.<br/>
<i>
<p> The default location and address are those of Mondeca office in Paris.<br />
<p><b> Find coordinates by moving around the map</b></p> <p>1. Drag and drop the map to broad location. <br/>
2. Zoom in for greater accuracy. <br/>
3. Drag and drop the marker to pinpoint the place. The coordinates are refreshed at the end of each move. </p>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="3 cité Nollez Paris France" />
<input type="submit" value="Search!" />
</p>
</form>
<p align="left">
<table bgcolor="#FFFFCC" width="300">
<tr>
<td width="100"><b>Latitude</b></td>
<td id="lat"></td>
</tr>
<tr>
<td width="100"><b>Longitude</b></td>
<td id="lng"></td>
</tr>
</table>
</p>
<p>
<div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>
</body>
</html>

It was same problem as mentioned above. when I used master page no google map was drawn. I found solution later.
You need to call the Javascript function in .aspx page where you want to show google map (like initialize();) may be different in your case.
code in my case:
<script type="text/javascript"">
window.onload = function () {
DrawGoogleMap();
}
function DrawGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("GoogleMap_Div"));
geocoder = new GClientGeocoder();
GService.GetGoogleObject(fGetGoogleObject);
}
}
</script>

Load up FireFox and FireBug, start looking for javascript errors.
One item that I have found, you have to call setCenter on the map for it to display.
Also, if you are adding markers (or layers), you have to add the marker after you call setCenter.

Ended up having to force the div to visible
See this thread on google maps support forums:
http://groups.google.com/group/Google-Maps-Troubleshooting/browse_thread/thread/0d27b66eef5f5d9e/1259a2991412f796?lnk=raot
Thanks!!

One thing that can change when you add a master page is your elements ids.
If the div you are displaying the map in has runat="server" on it, you could have a problem.
You would add that tag so you could manipulate the div from code-behind.
So, if my div looks like this:
<div id="gmap" runat="server"></div>
If so, when you are initializing your map, you need to get the ClientId of the div. That would look like this:
var mapDiv = '<%= gmap.ClientID %>';
var map = new GMap2(mapDiv);

the code i used is
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<META NAME="AUTHOR" CONTENT="Rakshith Krishnappa">
<META NAME="DESCRIPTION" CONTENT="KML Tool - Get Latitude and Longitude for KML Polyline">
<META NAME="KEYWORDS" CONTENT="Google, maps, mashup, tools, kml, polyline">
<META NAME="ROBOTS" CONTENT="ALL">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Mapmash | Geocoder Tool | Geocode - Reverse Geocode - IP Geocode</title>
<%--<style type="text/css">
<!--
html {
height: 100%; width:100%;overflow:hidden;
}
body {
background-color: white;
font-family: Arial, sans-serif;
font-size:10pt
}
h1 {
font-size: 18pt;
}
#map {
height: 100%;
}
#hand_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
}
#hand_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}
#placemark_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
}
#placemark_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}
#line_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#line_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}
#shape_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
}
#shape_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
}
-->
</style>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>--%>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAPkZq56tNYNmeuZjNQQ2p3hT0NZP-HbfQNNfWb9Z5SLbjZKYKwBTrGBqtttFmF2d-kWv2B2nqW_NyEQ"></script>
<script type="text/javascript">
google.load("maps", "2");
</script>
<script src="dragzoom.js" type="text/javascript"></script>
<script src="http://adserver.lat49.com/lat49/v0.10/lat49.js" type="text/javascript"></script>
<!-- Start of Google Analytics Code -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2417064-1";
urchinTracker();
</script>
<!-- End of Google Analytics Code -->
<script type="text/javascript">
//<![CDATA[
//rakf1 modified code taken from these 2 sources: - http://www.gorissen.info/Pierre/maps/googleMapLocationv4.php and - Distance Measurement Tool - Google Mapplets
// argItems code taken from
// http://www.evolt.org/article/Javascript_to_Parse_URLs_in_the_Browser/17/14435/?format=print
var map;
var coordinates = '';
var geocoder = new GClientGeocoder();
var added = 0;
var marker;
function write_point() {
var position = marker.getPoint();
var lat = position.y.toFixed(6);
var lng = position.x.toFixed(6);
coordinates = lng + "," + lat + "\n";
document.getElementById("attribute").value = 'lat="'+lat+'" lng="'+lng+'"';
document.getElementById("latlng").value = '<lat>'+lat+'</lat>\n<lng>'+lng+'</lng>';
document.getElementById("kml").value = lng+','+lat;
document.getElementById("coord").value = marker.getPoint().toUrlValue();
}
function get_address1() {
GEvent.addListener(marker, "click", function(){
var position = marker.getPoint();
var lat = position.y.toFixed(6);
var lng = position.x.toFixed(6);
var html = 'FreeReverseGeo.com (~address):<br><iframe id="RSIFrame" name="RSIFrame" style="overflow:hidden; width:200px; height:55px; border: 1px" src="http://www.freereversegeo.com/gmap-api.php?lat_1=' + lat + '&lng_1=' + lng + '"></iframe><br>('+lat+','+lng+')';
marker.openInfoWindowHtml(html);
});
}
function get_address() {
GEvent.addListener(marker, "click", function(){
var position = marker.getPoint();
geocoder.getLocations(position, function(addresses) {
if(addresses.Status.code != 200) {
marker.openInfoWindowHtml("<b>Google Reverse Geocode:</b><br>Reverse geocoder failed to find an address for " + position.toUrlValue());
}
else {
address = addresses.Placemark[0];
var html = address.address;
marker.openInfoWindowHtml("<b>Google Reverse Geocode:</b><br>"+html);
}
});
});
}
function my_location() {
if (google.loader.ClientLocation) {
var cl = google.loader.ClientLocation;
var html = 'Google ClientLocation: <br><font size="+1">' + cl.address.city + ', ' + cl.address.region+ '<br> ' + cl.address.country+'</font><br>('+cl.latitude+','+cl.longitude+')';
var point = new GLatLng(cl.latitude, cl.longitude);
if(!marker) {
map.setZoom(12);
marker = new GMarker(point,{title: "Click to get address", draggable: true});
map.addOverlay(marker);
added = 1;
}
map.setCenter(point);
marker.setPoint(point);
marker.openInfoWindowHtml(html);
}
}
function draw_point() {
GEvent.addListener(map, 'click', function(overlay, point) {
if (point && !added) {
marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, title: "Click to get address"});
map.addOverlay(marker);
added = 1;
GEvent.addListener(marker, "dragend", function(){
write_point();
});
}
else if (point && added) {
marker.setPoint(point);
}
write_point();
get_address();
});
}
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 11);
if(!marker) {
marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, title: "Click to get address"});
map.addOverlay(marker);
get_address();
added = 1;
}
marker.setPoint(point);
write_point();
}
}
);
}
function showLat49Ads(){
Lat49.initAds(19);
var center = map.getCenter();
var lat = center.lat();
var lng = center.lng();
var zoomlevel = Lat49.Tile.convertGMap2Zoom(map.getZoom());
Lat49.updateAdByLatLon("lat49ads", lat, lng, zoomlevel);
}
function load(){
map = new GMap2(document.getElementById("map"),{draggableCursor: 'crosshair', draggingCursor: 'crosshair'});
map.addControl(new GSmallZoomControl());
map.addControl(new GMenuMapTypeControl(),new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(61,7)));
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GOverviewMapControl());
var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };
var otherOpts = {
buttonHTML: "<img src='zoom-control-inactive1.png' title='Drag Zoom' />",
buttonZoomingHTML: "<img src='zoom-control-active1.png' title='Drag Zoom: Cancel' />",
buttonStartingStyle: {width: '15px', height: '15px'},
overlayRemoveTime: 0 };
map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(25,7)));
map.setCenter(new GLatLng(37.35, -121.93), 12);
draw_point();
showLat49Ads();
GEvent.addListener(map, "moveend", showLat49Ads);
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table width="100%" height="100%" style="width:100%; height:100%">
<tr style="vertical-align:top">
<td style="width:320px">
<table><tr>
</tr></table>
</td>
<td>
</td>
<td align="right">
<nobr>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" size="30" name="address" value="Chicago, IL" />
<input type="submit" value="Go!" />
</form>
</nobr>
</td>
</tr>
<tr>
<td valign="top">
<div style="width:300px;font-size:8pt"><h1>GeoCoder</h1>Click on the map or search a place to add a marker and drag marker around to get marker position coordinates. Click on marker to get approximate address.</div>
<br><span style="font-size:8pt"><b>Coordinates (lat, lng):</b> [for GLatLng]</span><br>
<input type="text" size="30" id="coord" onclick="this.select()"/>
<br><br><span style="font-size:8pt"><b>Coordinates (lng, lat):</b> [for KML]</span><br>
<input type="text" size="30" id="kml" onclick="this.select()"/>
<br><br><span style="font-size:8pt"><b>Coordinates (lat="x.xx" lng="x.xx"):</b></span><br>
<input type="text" size="30" id="attribute" onclick="this.select()"/>
<br><br><span style="font-size:8pt"><b>Coordinates (<lat> <lng>):</b></span><br>
<textarea rows="2" cols="24" id="latlng" onclick="this.select()" ></textarea>
<br>
<br>
<script type="text/javascript"><!--
google_ad_client = "pub-2773616400896769";
/* maptools_300x250_01 */
google_ad_slot = "1034665593";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td colspan="2" width="100%" height="100%">
<div style="position:relative;width:100%;height:100%">
<div id="lat49ads" lat49adposition="top-right"
style="position:absolute;top:7px; right:4px; width:125px; height:133;z-index:99999;"></div>
<div id="map" style="width:100%;height:400px;min-height:400px;border:1px solid #999;"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
if anyone have any idea regarding to code i posted earlier please post a comment.
thanks

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Editable dropdownlist using Jquery? - c#

Anyone try this? Seems to do the job http://xdsoft.net/jquery-plugins/editableselect/

Related

How to fix code have select all asp:CheckBoxList within current table only in .NET C# same as "JQuery - Select All CheckBoxes within..." question?

How to draw line for real time flot?

Refresh the session in Updatepanel on Partial Postback in ASp.net

Jquery Drag and Drop - Not able to drag back

Google map blank when used with master page

Categories

Resources