[sourcecode language="html"]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var ib = null;
var theMap = null;
function initialize() {
var latlng = new google.maps.LatLng(55.672962361614566, 12.56587028503418);
var myMapOptions = {
zoom: 15
,center: latlng
,mapTypeId: google.maps.MapTypeId.ROADMAP
,streetViewControl: false
};
theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');
// positioner
var position=[];
position.push(new google.maps.LatLng(55.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(55.66453963191134, 12.584795951843262));
// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");
ib = new InfoBox({});
for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}
function createMarkers(position,content,name) {
// alert("createMarkers("+position+","+content+","+name+")");
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: position,
visible: true,
title: name
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: yellow; width: 300px; height: 70px; padding: 5px;";
boxText.innerHTML = content;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-37, -120)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 1
,width: "300px"
}
,closeBoxMargin: "5px 5px 5px 5px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
alert("click");
ib.setOptions(myOptions);
ib.open(theMap, this);
});
ib.open(theMap, marker);
ib.hide();
}
}
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 400px"></div></body>
</html>
[/sourcecode]
Sunday, September 13, 2015
Thursday, August 27, 2015
Prepend Items to Bootstrap Typeahead
This is a little code snippet for manually adding static items along with typeahead suggestions list. This can be used to prepend or append items. I'm using biggora/bootstrap-ajax-typeahead
You only need to look for render event of the plugin and inject your code.
[sourcecode language="javascript"]
$("#customer").typeahead({
onSelect: function(item) {
...
},
updater: function(item) {
return item;
},
highlighter: function(name) {
...
},
ajax: {
...
},
render: function(items) {
var uber = {render: $.fn.typeahead.Constructor.prototype.render};
uber.render.call(this, items);
this.$menu.prepend('<li class="nostyle"><a href="#" autocomplete="off" data-toggle="modal" data-target="#itemModal"><i class="fa fa-plus"></i> New Customer</a></li>');
return this;
}
});
[/sourcecode]
You only need to look for render event of the plugin and inject your code.
[sourcecode language="javascript"]
$("#customer").typeahead({
onSelect: function(item) {
...
},
updater: function(item) {
return item;
},
highlighter: function(name) {
...
},
ajax: {
...
},
render: function(items) {
var uber = {render: $.fn.typeahead.Constructor.prototype.render};
uber.render.call(this, items);
this.$menu.prepend('<li class="nostyle"><a href="#" autocomplete="off" data-toggle="modal" data-target="#itemModal"><i class="fa fa-plus"></i> New Customer</a></li>');
return this;
}
});
[/sourcecode]
Thursday, July 16, 2015
Disable right click and F12 in jQuery
[sourcecode language="javascript"]
$(document).ready(function(){
$("body").bind("contextmenu", function(e) {
e.preventDefault();
});
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
});
[/sourcecode]
$(document).ready(function(){
$("body").bind("contextmenu", function(e) {
e.preventDefault();
});
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
});
[/sourcecode]
Friday, May 29, 2015
Bootstrap3 Ajax Typeahead Templating
Plugin URL : https://github.com/biggora/bootstrap-ajax-typeahead
[sourcecode language="javascript"]
<script type="text/javascript">
var items;
$("#search_item").typeahead({
onSelect: function(item) {
add_order_item(item.value);
},
updater: function (item) {
return item;
},
highlighter: function(name){
var item = _.find(items, function (c) {
return c.name == name;
});
var itm = ''
+ "<div class='typeahead_wrapper'>"
+ "<div class='typeahead_labels'>"
+ "<div class='typeahead_primary'><span class='pname'>" + item.name + "</span></div>"
+ "<div class='typeahead_secondary'><span class='pprice'>Rs. "+ item.purchase_price +"</span><div>"
+ "<div class='typeahead_secondary'>Code: "+ item.code +" / SKU: " + item.sku + "</div>"
+ "</div>"
+ "</div>";
return itm;
},
ajax: {
url: "<?php echo base_url('items/suggest_json');?>",
timeout: 500,
item: '<li><a href="#"></a><p>fgfg</p></li>' ,
scrollBar: true,
valueField: "id",
displayField: "name",
triggerLength: 1,
method: "get",
loadingClass: "loading-circle",
preDispatch: function (query) {
//showLoadingMask(true);
return {
search: query
}
},
preProcess: function (data) {
//showLoadingMask(false);
if (data.success === false) {
// Hide the list, there was some error
return false;
}
// We good!
items = data.results;
return data.results;
}
}
});
function add_order_item(item_id){
alert(item_id);
</script>
[/sourcecode]
[sourcecode language="javascript"]
<script type="text/javascript">
var items;
$("#search_item").typeahead({
onSelect: function(item) {
add_order_item(item.value);
},
updater: function (item) {
return item;
},
highlighter: function(name){
var item = _.find(items, function (c) {
return c.name == name;
});
var itm = ''
+ "<div class='typeahead_wrapper'>"
+ "<div class='typeahead_labels'>"
+ "<div class='typeahead_primary'><span class='pname'>" + item.name + "</span></div>"
+ "<div class='typeahead_secondary'><span class='pprice'>Rs. "+ item.purchase_price +"</span><div>"
+ "<div class='typeahead_secondary'>Code: "+ item.code +" / SKU: " + item.sku + "</div>"
+ "</div>"
+ "</div>";
return itm;
},
ajax: {
url: "<?php echo base_url('items/suggest_json');?>",
timeout: 500,
item: '<li><a href="#"></a><p>fgfg</p></li>' ,
scrollBar: true,
valueField: "id",
displayField: "name",
triggerLength: 1,
method: "get",
loadingClass: "loading-circle",
preDispatch: function (query) {
//showLoadingMask(true);
return {
search: query
}
},
preProcess: function (data) {
//showLoadingMask(false);
if (data.success === false) {
// Hide the list, there was some error
return false;
}
// We good!
items = data.results;
return data.results;
}
}
});
function add_order_item(item_id){
alert(item_id);
</script>
[/sourcecode]
Wednesday, May 20, 2015
DataTables Server Side Processing with CodeIgniter
[caption id="attachment_1101" align="aligncenter" width="273"]
DataTables[/caption]
In this tutorial, we will see how to use popular dataTables with CodeIgniter framework. Note that, pagination is done in client side for this tutorial. Hence this example is not ideal for a big data set. Handling pagination in server side will be discussed in a future tutorial.
Table format
[sourcecode language="html"]
<th>Need identified thru</th>
<th>Total Estimate</th>
<th class="no-sort"></th>
<th class="no-sort"></th>
</tr>
</thead>
</table>
[/sourcecode]
Initializing and fetching data with ajax
[sourcecode language="javascript"]
<script>
$(document).ready(function() {
$('#dataTables').dataTable({
"ajax": "<?php echo base_url('test/get_json'); ?>",
"pageLength": <?php echo $this->config->item('results_per_page'); ?>,
"order": [[ 0, "desc" ]],
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [0] },
{
"bSortable": false,
"aTargets": ["no-sort"]
}],
"dom": 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "<?php echo base_url("plugins/data_tables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"); ?>"
}
});
});
</script>
[/sourcecode]
Test Controller
[sourcecode language="php"]
class Test extends CI_Controller {
public function get_json() {
$this->load->model('test_model');
$results = $this->test_model->load_grid();
$data = array();
foreach ($results as $r) {
array_push($data, array(
$r['rname'],
$r['year'],
$r['mname'],
$r['need'],
$r['total_cost'],
anchor('test/view/' . $r['id'], 'View'),
anchor('test/edit/' . $r['id'], 'Edit')
));
}
echo json_encode(array('data' => $data));
}
}
[/sourcecode]
Model
[sourcecode language="php"]
class Test_model extends CI_Model {
public function load_grid() {
$this->db->select("$this->tbl_urgent_needs.unid,$this->tbl_urgent_needs.year,$this->tbl_urgent_needs.needi,$this->tbl_urgent_needs.total_cost,$this->tbl_maintenance_type.name AS mname,$this->tbl_roads.name AS rname");
$this->db->from("$this->tbl_urgent_needs");
$this->db->join("$this->tbl_roads", "$this->tbl_roads.rid = $this->tbl_urgent_needs.rd_id");
$this->db->join("$this->tbl_maintenance_type", "$this->tbl_maintenance_type.id = $this->tbl_urgent_needs.maint_type_id", "left");
$this->db->order_by("$this->tbl_urgent_needs.unid", 'ASC');
$query = $this->db->get();
return $query->result_array();
}
}
[/sourcecode]
DataTables[/caption]In this tutorial, we will see how to use popular dataTables with CodeIgniter framework. Note that, pagination is done in client side for this tutorial. Hence this example is not ideal for a big data set. Handling pagination in server side will be discussed in a future tutorial.
Table format
[sourcecode language="html"]
<th>Need identified thru</th>
<th>Total Estimate</th>
<th class="no-sort"></th>
<th class="no-sort"></th>
</tr>
</thead>
</table>
[/sourcecode]
Initializing and fetching data with ajax
[sourcecode language="javascript"]
<script>
$(document).ready(function() {
$('#dataTables').dataTable({
"ajax": "<?php echo base_url('test/get_json'); ?>",
"pageLength": <?php echo $this->config->item('results_per_page'); ?>,
"order": [[ 0, "desc" ]],
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [0] },
{
"bSortable": false,
"aTargets": ["no-sort"]
}],
"dom": 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "<?php echo base_url("plugins/data_tables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"); ?>"
}
});
});
</script>
[/sourcecode]
Test Controller
[sourcecode language="php"]
class Test extends CI_Controller {
public function get_json() {
$this->load->model('test_model');
$results = $this->test_model->load_grid();
$data = array();
foreach ($results as $r) {
array_push($data, array(
$r['rname'],
$r['year'],
$r['mname'],
$r['need'],
$r['total_cost'],
anchor('test/view/' . $r['id'], 'View'),
anchor('test/edit/' . $r['id'], 'Edit')
));
}
echo json_encode(array('data' => $data));
}
}
[/sourcecode]
Model
[sourcecode language="php"]
class Test_model extends CI_Model {
public function load_grid() {
$this->db->select("$this->tbl_urgent_needs.unid,$this->tbl_urgent_needs.year,$this->tbl_urgent_needs.needi,$this->tbl_urgent_needs.total_cost,$this->tbl_maintenance_type.name AS mname,$this->tbl_roads.name AS rname");
$this->db->from("$this->tbl_urgent_needs");
$this->db->join("$this->tbl_roads", "$this->tbl_roads.rid = $this->tbl_urgent_needs.rd_id");
$this->db->join("$this->tbl_maintenance_type", "$this->tbl_maintenance_type.id = $this->tbl_urgent_needs.maint_type_id", "left");
$this->db->order_by("$this->tbl_urgent_needs.unid", 'ASC');
$query = $this->db->get();
return $query->result_array();
}
}
[/sourcecode]
Tuesday, May 5, 2015
Sunday, April 12, 2015
ASP.Net Bulk Insert Excel Data using SqlBulkCopy
This code sample is for a Excel Import programmatically into SQL Server database.
Important points to note.
Excel format:
.aspx page
Code Behind File
[sourcecode language="csharp"]
protected void ImportExcel(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
// SQL Server Connection String
string sqlConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["flexi_stocky"].ConnectionString;
// Bulk Copy to SQL Server
SqlBulkCopy bulkInsert = new SqlBulkCopy(sqlConnectionString);
try
{
string path = string.Concat(Server.MapPath("~/uploads/" + FileUpload1.FileName));
FileUpload1.SaveAs(path);
// Connection String to Excel Workbook
string excelConnectionString = string.Format("Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties=Excel 8.0", path);
OleDbConnection connection = new OleDbConnection();
connection.ConnectionString = excelConnectionString;
OleDbCommand command = new OleDbCommand("select * from [Sheet1$]", connection);
connection.Open();
// Create DbDataReader to Data Worksheet
DbDataReader dr = command.ExecuteReader();
bulkInsert.DestinationTableName = "your_sqlTableName";
bulkInsert.WriteToServer(dr);
bulkInsert.Close();
//Show success
}
catch (Exception ex)
{
bulkInsert.Close();
//Show error
}
}
else
{
//File not set
}
}
[/sourcecode]
Important points to note.
- Use excel data in a single sheet.
- The excel file format should match the table schema.
Excel format:
| Id | Name | Description | CreatedAt | CreatedBy | ModifiedAt | ModifiedBy | Enabled | Deleted |
.aspx page
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Import" CssClass="btn btn-warning" OnClick="ImportExcel" />
Code Behind File
[sourcecode language="csharp"]
protected void ImportExcel(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
// SQL Server Connection String
string sqlConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["flexi_stocky"].ConnectionString;
// Bulk Copy to SQL Server
SqlBulkCopy bulkInsert = new SqlBulkCopy(sqlConnectionString);
try
{
string path = string.Concat(Server.MapPath("~/uploads/" + FileUpload1.FileName));
FileUpload1.SaveAs(path);
// Connection String to Excel Workbook
string excelConnectionString = string.Format("Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties=Excel 8.0", path);
OleDbConnection connection = new OleDbConnection();
connection.ConnectionString = excelConnectionString;
OleDbCommand command = new OleDbCommand("select * from [Sheet1$]", connection);
connection.Open();
// Create DbDataReader to Data Worksheet
DbDataReader dr = command.ExecuteReader();
bulkInsert.DestinationTableName = "your_sqlTableName";
bulkInsert.WriteToServer(dr);
bulkInsert.Close();
//Show success
}
catch (Exception ex)
{
bulkInsert.Close();
//Show error
}
}
else
{
//File not set
}
}
[/sourcecode]
Saturday, April 11, 2015
How to use Sessions in Web Services ASP.Net
Using sessions in web services is little different from its normal usage. Here we can not access sessions with Session as in Page methods. Instead we use HttpContext.Current.Session.
Sessions should be enabled for web methods.
A sample code snippet would be as follows.
[sourcecode language="csharp"]
/// Summary description for ReceivingService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ReceivingService : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Dictionary<string, object> removeItem(int Id)
{
var response = new Dictionary<string, object>();
bool found = false;
if ( HttpContext.Current.Session["rec_cart"] != null)
{
List<CartItem> cartItems = (List<CartItem>)Session["rec_cart"];
if (cartItems.Count > 0)
{
foreach(var item in cartItems){
if(item.Id == Id){
cartItems.Remove(item);
HttpContext.Current.Session["rec_cart"] = cartItems;
found = true;
break;
}
}
}
}
if (found)
{
response["status"] = true;
response["total"] = GetGrandTotal();
}
else
{
response["status"] = false;
}
return response;
}
}
[/sourcecode]
I also configured cookieless sessions in web.config to get web service call properly routed.
Sessions should be enabled for web methods.
A sample code snippet would be as follows.
[sourcecode language="csharp"]
/// Summary description for ReceivingService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ReceivingService : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Dictionary<string, object> removeItem(int Id)
{
var response = new Dictionary<string, object>();
bool found = false;
if ( HttpContext.Current.Session["rec_cart"] != null)
{
List<CartItem> cartItems = (List<CartItem>)Session["rec_cart"];
if (cartItems.Count > 0)
{
foreach(var item in cartItems){
if(item.Id == Id){
cartItems.Remove(item);
HttpContext.Current.Session["rec_cart"] = cartItems;
found = true;
break;
}
}
}
}
if (found)
{
response["status"] = true;
response["total"] = GetGrandTotal();
}
else
{
response["status"] = false;
}
return response;
}
}
[/sourcecode]
I also configured cookieless sessions in web.config to get web service call properly routed.
<sessionState cookieless="true" regenerateExpiredSessionId="true" timeout="100"/>
Saturday, March 21, 2015
Add Default Item to DropDownList Dynamically
How to add a default item as 'N/A' to drop down list and set selected?
[sourcecode language="csharp"]
gnList.DataSourceID = "GNDS";
gnList.DataTextField = "Name";
gnList.DataValueField = "Id";
gnList.DataBind();
gnList.Items.Insert(0, new ListItem("N/A", "0"));
[/sourcecode]
Another way
[sourcecode language="csharp"]
gnList.Items.Add(new ListItem("N/A", "0"));
gnList.DataSourceID = "GNDS";
gnList.DataTextField = "Name";
gnList.DataValueField = "Id";
gnList.DataBind();
gnList.Items.FindByValue("0").Selected = true;
[/sourcecode]
[sourcecode language="csharp"]
gnList.DataSourceID = "GNDS";
gnList.DataTextField = "Name";
gnList.DataValueField = "Id";
gnList.DataBind();
gnList.Items.Insert(0, new ListItem("N/A", "0"));
[/sourcecode]
Another way
[sourcecode language="csharp"]
gnList.Items.Add(new ListItem("N/A", "0"));
gnList.DataSourceID = "GNDS";
gnList.DataTextField = "Name";
gnList.DataValueField = "Id";
gnList.DataBind();
gnList.Items.FindByValue("0").Selected = true;
[/sourcecode]
Friday, March 20, 2015
Static DropDownList in GridView
Displaying a DropDownList column in GridView and setting the selected item.
[sourcecode language="csharp"]
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("Status") %>' autocomplete="off" Width="150">
<asp:ListItem Value="1">Enable</asp:ListItem>
<asp:ListItem Value="2">Disable</asp:ListItem>
<asp:ListItem Value="3">Delete</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
[/sourcecode]
[sourcecode language="csharp"]
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("Status") %>' autocomplete="off" Width="150">
<asp:ListItem Value="1">Enable</asp:ListItem>
<asp:ListItem Value="2">Disable</asp:ListItem>
<asp:ListItem Value="3">Delete</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
[/sourcecode]
Add Dynamic Controls to Content PlaceHolders in ASP.Net
[sourcecode language="csharp"]
ContentPlaceHolder holder = Page.Master.FindControl("message") as ContentPlaceHolder;
HtmlGenericControl alertControl = new HtmlGenericControl();
alertControl.Attributes["class"] = "alert alert-success";
alertControl.TagName = "div";
holder.Controls.Add(alertControl);
Label message = new Label();
message.Text = "User deleted successfully.";
alertControl.Controls.Add(message);
[/sourcecode]
ContentPlaceHolder holder = Page.Master.FindControl("message") as ContentPlaceHolder;
HtmlGenericControl alertControl = new HtmlGenericControl();
alertControl.Attributes["class"] = "alert alert-success";
alertControl.TagName = "div";
holder.Controls.Add(alertControl);
Label message = new Label();
message.Text = "User deleted successfully.";
alertControl.Controls.Add(message);
[/sourcecode]
Subscribe to:
Posts (Atom)
-
Today we are going to build another restful web service in eclipse using gson library. When client makes a request, the application queries ...
-
I have already written several posts regarding Android database applications. This post might be similar to those tuts. However this is more...
