jQuery Disable Cut Copy Paste Options in Textbox
<script type="text/javascript">
$(function() {
$('#txtName').bind("cut copy paste", function(e) {
e.preventDefault();
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#txtNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
e.preventDefault();
}
}
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#txtNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#btnRefresh').click(function() {
$('#testframe').attr('src', $('#testframe').attr('src'));
});
});
</script>
jQuery Back Button Code | Go Back to Previous Page in jQuery
<script type="text/javascript">
$(function() {
$('#back').click(function() {
parent.history.back();
return false;
});
});
</script>
jQuery Get Access Session Variable Value in Asp.net
<script type="text/javascript">
$(function() {
var name = '<%= Session["UserName"] %>'
$('#lbltxt').text(name)
});
</script>
jQuery Create Read Cookie Get Set Delete Cookies Example
Create Cookie
$.cookie('the_cookie', 'the_value');
|
Create expiring cookie 7 days from then:
$.cookie('the_cookie', 'the_value', { expires: 7 });
|
Create expiring cookie, valid across entire site:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
|
Read Cookie
$.cookie('the_cookie'); // => "the_value"
$.cookie('not_existing'); // => undefined
|
Read all available cookies:
$.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }
|
Delete Cookie:
// Returns true when cookie was found, false when no cookie was found...
$.removeCookie('the_cookie');
// Same path as when the cookie was written...
$.removeCookie('the_cookie', { path: '/' });
|
<script type="text/javascript">
$(function() {
$('#lbltxt').text('Today\'s Data');
})
</script>
jQuery Display testimonials with CSS Example
<style type="text/css">
.testimonial
{
margin: 0;
background: #B7EDFF;
padding: 10px 50px;
position: relative;
font-family: Georgia, serif;
color: #666;
border-radius: 5px;
font-style: italic;
text-shadow: 0 1px 0 #ECFBFF;
background-image: linear-gradient(#CEF3FF, #B7EDFF);
}
.testimonial:before, .testimonial:after
{
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #999;
font-style: normal;
}
.testimonial:before
{
top: 0;
left: 10px;
}
.testimonial:after
{
content: "\201D";
right: 10px;
bottom: -0.5em;
}
.arrow-down
{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #B7EDFF;
margin: 0 0 0 25px;
}
.testimonial-author
{
margin: 0 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-align:left;
}
.testimonial-author span
{
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div style="width:50%">
<blockquote class="testimonial">
<p>This site is very nice and helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Ram Says:</b>
<blockquote class="testimonial">
<p>I really enojyed reading this site and it's very nice and helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Rohit Says:</b>
<blockquote class="testimonial">
<p>This site is very nice and helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Kumar Says:</b>
</div>
$('#lnkhome').click(function(e) {
e.preventDefault();
jQuery Convert AM PM Time to 24 Hour Time
<script type="text/javascript">
$(function() {
$('#btnConvert').click(function() {
var time = $("#txttime").val();
var hrs = Number(time.match(/^(\d+)/)[1]);
var mnts = Number(time.match(/:(\d+)/)[1]);
var format = time.match(/\s(.*)$/)[1];
if (format == "PM" && hrs < 12) hrs = hrs + 12;
if (format == "AM" && hrs == 12) hrs = hrs - 12;
var hours = hrs.toString();
var minutes = mnts.toString();
if (hrs < 10) hours = "0" + hours;
if (mnts < 10) minutes = "0" + minutes;
alert(hours + ":" + minutes);
})
})
</script>
JQuery Check Given Date Greater than Current Date or Today Date JavaScript
<script type="text/javascript">
$(function() {
$('#btnConvert').click(function() {
var param1 = new Date();
var ddate = $('#txtdate').val();
var time = $('#txttime').val();
var hours = Number(time.match(/^(\d+)/)[1]);
var minutes = Number(time.match(/:(\d+)/)[1]);
var format = time.match(/\s(.*)$/)[1];
if (format == "PM" && hours < 12) hours = hours + 12;
if (format == "AM" && hours == 12) hours = hours - 12;
var sHours = hours.toString();
var sMinutes = minutes.toString();
if (hours < 10) sHours = "0" + sHours;
if (minutes < 10) sMinutes = "0" + sMinutes;
ddate = ddate + " " + sHours + ":" + sMinutes + ":00";
var date1 = new Date(ddate);
var date2 = new Date();
if (date1 < date2) {
alert('Please Enter Date time Greater than Current Date time');
$('#txtdate').focus();
return false;
}
})
})
</script>
jQuery Wiki Plugin to Show Wikipedia Description in Tooltips
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="wikiUp.js" type="text/javascript"></script>
<data data-wiki="Apple Inc."><b>Apple</b></data> was founded by <data data-wiki="Steve Jobs"><b>Steve Jobs</b></data>.
<data data-wiki="Madrid" data-lang="es"><b>Madrid</b></data> es la capital de España.
jQuery Display Progress Bar on Button Click in Asp.net
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
.sample
{
background-color:#DC5807;
border:1px solid black;
border-collapse:collapse;
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="DisableDiv"> </div>
<input type="button" id="btnClick" value="Get Data" />
<div id="testdiv"></div>
</form>
<script type="text/javascript">
$(function() {
$('#btnClick').click(function() {
$('#DisableDiv').fadeTo('slow', .6);
$('#DisableDiv').append('<div style="background-color:#E6E6E6;position: absolute;top:0;left:0;width: 100%;height:300%;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);"><img src="loading.gif" style="background-color:Aqua;position:fixed; top:40%; left:46%;"/></div>');
setTimeout(function() { GetData() }, 1000)
})
});
function GetData()
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "ShowLoadingImageonButtonClick.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
var theHtml = data.d;
$('#testdiv').html(theHtml)
$('#DisableDiv').html("");
},
error: function(result) {
alert("Error");
}
});
}
</script>
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
rotected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string BindDatatable()
{
GridView gv = new GridView();
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("select UserId,UserName,Location from UserInformation", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
gv.HeaderStyle.CssClass = "sample";
gv.DataSource = dt;
gv.DataBind();
gv.RenderControl(htmlWriter);
return stringWriter.ToString();
}
jQuery Cascading Dropdown List in Asp.net with Example
http://www.aspdotnet-suresh.com/2013/10/jquery-cascading-dropdown-list-in-aspnet.html
<script type="text/javascript">
$(function() {
var UserName = $.cookie("UserName");
if (UserName != '' && typeof UserName != 'undefined') {
alert(QuestionId);
}
})
</script>
jQuery Ajax JSON Example in Asp.net
http://www.aspdotnet-suresh.com/2013/12/jquery-ajax-json-example-in-aspnet.html
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#showpwd').hide();
$('#btnclick').click(function () {
var txt = $('#btnclick').val()
var pwd = $('#hidepwd').val();
if (pwd.length > 0) {
if (txt == 'Show Password') {
$(this).val('Hide Password');
$('#showpwd').val($('#hidepwd').val());
$('#showpwd').show();
$('#hidepwd').hide();
return false;
}
else if (txt == 'Hide Password') {
$(this).val('Show Password');
$('#showpwd').hide();
$('#hidepwd').show();
return false;
}
}
else {
alert('Plese Enter Password');
return false;
}
});
})
</script>
</head>
<body>
<form id="form1">
<div>
<b>Enter Password: </b>
<input type="password" id="hidepwd" />
<input type="text" id="showpwd" />
<input type="button" id="btnclick" value="Show Password" />
</div>
jQuery Raise Button Click Event on Enter Key Press
<script type="text/javascript">
$(function() {
$('#txtname').keypress(function(event) {
if (event.keyCode == 13) {
$('#btnClick').click();
}
})
})
</script>
How to Reset Dropdown List using jQuery
First Method
Here we will find first element in the dropdown list and we will make that first element selected
$('#ddluser').find('option:first').attr('selected', 'selected');
|
Second Method
Here we will check dropdownlist value with “0” and make it selected. In case our dropdownlist starting value “1” then we need to use “val(1)”
$('#ddluser').val(0);
|
Third Method
Here we will find first element in the dropdown list and we will make that first element selected
$('#ddluser option:eq(0)').attr('selected', 'selected');
|
<script type="text/javascript">
function GetAge() {
var selctedval = $('input[name=rdbage]:checked').val();
alert(selctedval);
}
</script>
for clearing all radio buttons
<script type="text/javascript">
function ClearAge() {
$('input:radio[name=rdbage]').attr('checked', false);
}
</script>
jQuery Multiselect Dropdown list with Checkboxes or Multiple Select Dropdown with Checkboxes
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());
})
});
</script>
</div>
jQuery Crop Image in Asp.net using Jcrop jQuery Plugin and Upload to Folder
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('#imgcrop').Jcrop({
onSelect: getcroparea
});
})
function getcroparea(c) {
$('#hdnx').val(c.x);
$('#hdny').val(c.y);
$('#hdnw').val(c.w);
$('#hdnh').val(c.h);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="images/pool.jpg" id="imgcrop" alt="sample image"/>
<input type="hidden" id="hdnx" runat="server" />
<input type="hidden" id="hdny" runat="server"/>
<input type="hidden" id="hdnw" runat="server"/>
<input type="hidden" id="hdnh" runat="server" />
<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
<img id="imgcropped" runat="server" visible="false" />
</div>
</form>
</body>
using System;
using System.Drawing;
using System.IO;
using Image = System.Drawing.Image;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btncrop_Click(object sender, EventArgs e)
{
try
{
string fname = "pool.jpg";
string fpath = Path.Combine(Server.MapPath("~/images"), fname);
Image oimg = Image.FromFile(fpath);
Rectangle cropcords = new Rectangle(
Convert.ToInt32(hdnx.Value),
Convert.ToInt32(hdny.Value),
Convert.ToInt32(hdnw.Value),
Convert.ToInt32(hdnh.Value));
string cfname, cfpath;
Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat);
Graphics grph = Graphics.FromImage(bitMap);
grph.DrawImage(oimg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);
cfname = "crop_" + fname;
cfpath = Path.Combine(Server.MapPath("~/cropimages"), cfname);
bitMap.Save(cfpath);
imgcropped.Visible = true;
imgcropped.Src = "~/cropimages/" + cfname;
}
catch (Exception ex)
{
throw ex;
}
}
jQuery Preview Image before Upload using Fileupload in Asp.net
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function showimagepreview(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgprvw').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" />
</div>
<img id="imgprvw" alt="uploaded image preview"/>
jQuery Custom Dropdown with Images using jQuery ddSlick Plugin
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.ddslick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var ddlData = [
{
text: "Facebook",
value: 1,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$('#ddimages').ddslick({
data: ddlData,
width: 300,
imagePosition: "left",
onSelected: function(selectedData) {
//callback function: do something with selectedData;
}
});
});
</script>
<div>
<div id="ddimages"></div>
</div>
jQuery Drag and Drop Gridview Rows in Asp.net using jQuery Tablednd Plugin
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.tablednd.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#gvDetails").tableDnD();
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" runat="server">
<HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" />
</asp:GridView>
protected void Page_Load(object sender, EventArgs e)
{
BindGridviewData();
}
/// <summary>
/// Dynamically create & bind data to gridview
/// </summary>
protected void BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Rows.Add(1, "Suresh Dasari", "B.Tech");
dt.Rows.Add(2, "Rohini Dasari", "Msc");
dt.Rows.Add(3, "Madhav Sai", "MS");
dt.Rows.Add(4, "Praveen", "B.Tech");
dt.Rows.Add(6, "Sateesh", "MD");
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech");
dt.Rows.Add(8, "Mahendra", "CA");
gvDetails.DataSource = dt;
gvDetails.DataBind();
}
jQuery Chatting Application in Asp.net using C# with ChatJS Plugin
$.chat({
// your user information
user: {
Id: 3,
Name: 'John Silver',
ProfilePictureUrl: 'http://www.foo.com/avatar/123'
},
// text displayed when the other user is typing
typingText: ' is typing...',
// the title for the user's list window
titleText: 'ChatJS demo chat',
// text displayed when there's no other users in the room
emptyRoomText: "There's no one around here.",
// the adapter you are using. There are 2 implementations out of the box:
// SignalRAdapter and LongPollingAdapter (server independent).
adapter: new SignalRAdapter()
});
