Archive

Archive for the ‘Jquery’ Category

JQuery calendar to display event data from Database

Hello,

Try this example to use JQuery calendar to display event data from Database


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 runat="server">
<title></title>
	<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
* {
margin: 0 auto;
padding: 0;
}

body {
background-color: #F2F2F2;
}

.container {
margin: 0 auto;
width: 920px;
padding: 50px 20px;
background-color: #fff;
}

h3 {
text-align: center;
}

#calendar {
margin-top: 40px;
}

.event a {
background-color: #42B373 !important;
background-image: none !important;
color: #ffffff !important;
}
</style>

<script type="text/javascript">
 var eventDates = {};
 $(function () {
 $.ajax({
 type: "POST",
 url: "Default2.aspx/GetEvents",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: OnSuccess,
 failure: function (response) {
 alert(response.d);
 },
 error: function (response) {
 alert(response.d);
 }
 });
 });

function OnSuccess(response) {
 $(response.d).each(function (i, e) {
 eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
 });

$('#calendar').datepicker({
 beforeShowDay: function (date) {
 var highlight = eventDates[convertDate(date)];
 // alert(highlight);
 if (highlight) {
 return [true, "event", highlight];
 } else {
 return [true, '', ''];
 }
 }
 });
 }

function convertDate(inputFormat) {
 function pad(s) { return (s < 10) ? '0' + s : s; }
 var d = new Date(inputFormat);
 return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
 }

</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h3>Highlight Particular Dates in JQuery UI Datepicker</h3>
<div id="calendar"></div>
</div>
</form>
</body>
</html>

In Code behind :


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;

public partial class Default2 : System.Web.UI.Page
{
[WebMethod]
public static List<Event> GetEvents()
{
List<Event> events = new List<Event>();
events.Add(new Event()
{
EventID = 1,
EventName = "EventName 1",
EventDate = DateTime.Now.ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
events.Add(new Event()
{
EventID = 2,
EventName = "EventName 2",
EventDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
events.Add(new Event()
{
EventID = 3,
EventName = "EventName 3",
EventDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
events.Add(new Event()
{
EventID = 4,
EventName = "EventName 4",
EventDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
return events;
}

protected void Page_Load(object sender, EventArgs e)
{

}
}

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Jquery

Display Sum (Total) of Checked GridView Rows on CheckBox check using jQuery in ASP.Net

March 27, 2017 Leave a comment

Dears,

Try this example to Display Sum (Total) of Checked GridView Rows on CheckBox check using jQuery in ASP.Net

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
 $('[id*=chk]').on('change', function () {
 var value = 0;
 $('[id*=chk]:checked').each(function () {
 var row = $(this).closest('tr');
 value = value + parseInt(row.find('[id*=lblValue]').html());
 });
 $('[id*=lblTotal]').html(value);
 });
 });
 </script>
<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Values">
<ItemTemplate>
<asp:Label ID="lblValue" runat="server" Text='<%# Eval("Value") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblTotal" runat="server" />

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Value", typeof(int)) });
dt.Rows.Add(10);
dt.Rows.Add(20);
dt.Rows.Add(30);
dt.Rows.Add(40);
gvData.DataSource = dt;
gvData.DataBind();
}
}

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

Set Maximum characters to 1000 for Multiline TextBox Using JQuery

July 22, 2016 Leave a comment

Hi all,

Try this example to Set Maximum characters to 1000 for Multiline TextBox Using JQuery


<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 //Assign the text to span in pageload
 $('#spntxtMult').text("Number of characters 0/1000");
 //attach change event to div
 $('#txtMult').keyup(function (event) {
 //call function to calcualate count on change event of div
 textCounter();
 });
 });
 function textCounter() {
 //Get the max length countnt
 var divlength = $('#txtMult').val().length;
 //check if count greater than 1000
 if (divlength > 1000) {
 //Trim the text
 var trimmedtext = $('#txtMult').val().substring(0, 1000);
 //assign it to textbox
 $('#txtMult').val(trimmedtext);
 }
 else {
 var remaningchar = 0;
 //Calculate the remining char
 if (divlength > 0) {
 remaningchar = 1000 - divlength;
 }

//reduce the allowed no of characters in span
 $('#spntxtMult').text("Number of characters " + remaningchar + "/1000");
 }
 }
</script>
<asp:TextBox ID="txtMult" runat="Server" TextMode="MultiLine" />
<span id="spntxtMult"></span>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript, Jquery

JQuery Redirect to Another Page After Some Time Delay in Asp.net

November 13, 2015 Leave a comment

Hi all,

Try this example to Use jQuery Redirect to Another Page after Some Time Delay in Asp.net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JavaScript redirect to another page after 5 seconds or Sometime</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
var i = 0;
$(document).ready(function() {
ShowCurrentTime();
})
function ShowCurrentTime() {
var dt = new Date();
document.getElementById("lblTime").innerHTML = 5 - i + " Seconds";
i++;
if (i == 5) {
setTimeout("location.href='https://yasserzaid.wordpress.com'", 0);
}
window.setTimeout("ShowCurrentTime()", 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
This Page will Redirec to Another Page within:
<label id="lblTime" style=" font-weight:bold; font-size:12pt"></label>
</div>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

Get the selected item value from RadiobuttonList using JQuery

August 11, 2015 Leave a comment

Hi all,

Try this example to get the selected item value from RadiobuttonList using JQuery


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Attach click event to button
$('#Button1').click(function (e) {
//Get the selected item value from RadioButtonList
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked").val();
$("#<%= lblSelectedValue.ClientID %>").text(rblSelectedValue);
//Get the selected item text value from RadioButtonList
var rblSelectedText = $("#<%= RadioButtonList1.ClientID %> input:checked").next().html();
$("#<%= lblSelectedItem.ClientID %>").text(rblSelectedText);
//Cancel the postback
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="1" Text="First"></asp:ListItem>
<asp:ListItem Value="2" Text="Second"></asp:ListItem>
<asp:ListItem Value="3" Text="Third"></asp:ListItem>
<asp:ListItem Value="4" Text="Fourth"></asp:ListItem>
<asp:ListItem Value="5" Text="Fifth"></asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button1" runat="server" Text="Get Selected Value" />

Selected Value
<asp:Label ID="lblSelectedValue" runat="server" Text=""></asp:Label>

Selected Item
<asp:Label ID="lblSelectedItem" runat="server" Text=""></asp:Label>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

Display image Thumbnail from Database in GridView and Display Enlarged Popup in ASP.Net

June 12, 2015 Leave a comment

Hi all,

Try this example to Display image Thumbnail from Database in GridView and Display Enlarged Popup in ASP.Net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('[id*=imgThumbnail]').bind('click', function () {
// $("#divImage").show();
$("[id*=imgBigImage]").attr('src', $(this).attr('alt'));
$("#divImage").dialog({
title: "Image",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_OnRowDataBound">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="File Path">
<ItemTemplate>
<asp:Image ID="imgThumbnail" AlternateText='<%# Eval("FilePath") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divImage" style="display: none;">
<asp:Image ID="imgBigImage" runat="server" Width="300" Height="300" />
</div>
</form>
</body>
</html>

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("FilePath");
dt.Rows.Add("Jellyfish", "Images/Jellyfish.jpg");
dt.Rows.Add("Koala", "Images/Koala.jpg");
dt.Rows.Add("Penguins", "Images/Penguins.jpg");
dt.Rows.Add("Tulips", "Images/Tulips.jpg");
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}

protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
System.Web.UI.WebControls.Image img = e.Row.FindControl("imgThumbnail") as System.Web.UI.WebControls.Image;
string path = Server.MapPath(img.AlternateText);
img.ImageUrl = GenerateThumbnail(path);
}
}

private string GenerateThumbnail(string path)
{
System.Drawing.Image image = System.Drawing.Image.FromFile(path);
using (System.Drawing.Image thumbnail = image.GetThumbnailImage(100, 100, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero))
{
using (MemoryStream memoryStream = new MemoryStream())
{
thumbnail.Save(memoryStream, ImageFormat.Png);
Byte[] bytes = new Byte[memoryStream.Length];
memoryStream.Position = 0;
memoryStream.Read(bytes, 0, (int)bytes.Length);
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
return "data:image/png;base64," + base64String;
}
}
}

public bool ThumbnailCallback()
{
return false;
}

Hope this helps

Good Luck

Categories: ASP.Net, Javascript, Jquery

Disable Current and Past Dates in JQuery Calender

Hi all,

Try this example to disable current and past dates selection from JQuery Calender in ASP.Net

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Disable Current and Past Date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate()+1;
var currentYear = date.getFullYear();
$('#datepicker').datepicker({
minDate: new Date(currentYear, currentMonth, currentDate)
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date: <input type="text" id="datepicker" /></p>
</div>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript, Jquery