JQuery-Part III

JQuery Textbox with Clear Button | Clearable Textbox With JQuery Plugin

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</script>

<script src="jquery.clearableTextField.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#txtName').clearableTextField();

});

</script>

<style type="text/css">

div.text_clear_button { background:url(clear_cross.png); width:11px; height:11px; margin:0; padding:0;

z-index:2; position:absolute; cursor:pointer; }

div.form {margin:10px; padding:20px; background:#eee;}

</style>

<label for="Name">Enter Text Here</label>:

<asp:TextBox ID="txtName" runat="server" />

jQuery Enable or Disable Textbox Controls on WebPage in Asp.net

<script type="text/javascript">

$(document).ready(function() {

$("#btnEnableDisable").toggle(function() {

$("input:text").attr("disabled", "disabled");

$(this).attr("disabled", "");

}, function() {

$("input:text").attr("disabled", "");

});

});

</script>

jQuery - Add / Remove CSS Class to DIV Element

<script type="text/javascript">

$('#btnAddCSS').click(function() {

$('#samplediv').addClass('sampleCSS')

})

$('#btnRemoveCSS').click(function() {

$('#samplediv').removeClass('sampleCSS')

})

</script>

jQuery Get Selected Row Values from Asp.net Gridview on Checkbox Selection

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

$('#btnGet').click(function() {

var hdntxt = '';

$("input[name$=chkChild]:checked").each(function() {

hdntxt += "," + $(this).next("input[name$=hdnId]").val()

});

$('#lbltxt').text(hdntxt.substring(1,hdntxt.length))

});

});

</script>

<div>

<asp:GridView ID="gvUserInfo" runat="server" >

<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />

<Columns>

<asp:TemplateField>

<ItemTemplate>

<asp:CheckBox ID="chkChild" runat="server" />

<asp:HiddenField ID="hdnId" runat="server" Value='<%#Eval("UserName") %>' />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

<input type="button" id="btnGet" value="Get Selected Values" /><br /><br />

<b>Select UserNames:</b><label id="lbltxt"/>

jQuery Remove First/Last Character From String in Asp.net

Remove first 3 characters from string

<script type="text/javascript">

$(document).ready(function() {

var str = '$$$Welcome To Aspdotnet-Suresh'

var newstr = str.substr(3) // This will Remove first 3 characters from string

alert(newstr);

})

</script>

Remove Last 2 characters from string

<script type="text/javascript">

$(document).ready(function() {

var str = 'Welcome To Aspdotnet-Suresh$$'

var newstr = str.substr(0,str.length-2) // This will Remove Last 2 characters from string

alert(newstr);

})

</script>

jQuery Remove Spaces from String

<script type="text/javascript">

$(document).ready(function() {

var str = ' Welcome To Aspdotnet  -  Suresh '

var newstr = str.replace(/\s/g,'') // Remove spaces from string

alert(newstr);

})

</script>

jQuery Display Current Time on Webpage using Asp.net

<script type="text/javascript">

$(document).ready(function() {

ShowTime();

});

function ShowTime() {

var dt = new Date();

document.getElementById("lblTime").innerHTML = dt.toLocaleTimeString();

window.setTimeout("ShowTime()", 1000); // Here 1000(milliseconds) means one 1 Sec  

}

</script>

jQuery Redirect to Another Page After 5 seconds or Some Time Delay in Asp.net

<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='http://www.aspdotnet-suresh.com'", 0);

}

window.setTimeout("ShowCurrentTime()", 1000);

}

</script>

jQuery- Get Div Id Value or Div Content in Asp.net

<script type="text/javascript">

$(document).ready(function() {

$('#btnClick').click(function() {

var divtxt = $('#contentdiv').html();

alert(divtxt);

})

});

</script>

jQuery Get Focus on Text Box

<script type="text/javascript">

$(document).ready(function() {

$('#txtUserName').focus();

})

</script>

<input type="text" id="txtUserName" /><br />

$('input:text:first').focus();

it will place the cursor in first postion of textbox, when pageload is completed

Create Simple Tooltip with jQuery UI Plugin Example/Tutorial

<script type="text/javascript">

$(function() {

$( document ).tooltip();

});

</script>

<script type="text/javascript">

$(document).ready(function() {

$('#txtUserName'.tooltip();

});

</script>

<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>

<style type="text/css">

.ui-tooltip

{

font-size:10pt;

font-family:Verdana;

}

</style>

<script type="text/javascript">

$(function() {

$(document).tooltip();

});

</script>

<input id="txtfName" name="firstname" title="Please enter your firstname." />

jQuery Show Alert Message using Asp.net

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">

$(function () {

$('#btnClick').click(function () {

alert('Alter with jQuery Button Clicked');

});

});

</script>

Highlight Asp.net Gridview Rows on MouseOver in jQuery

<script type="text/javascript">

$(document).ready(function() {

$('#gvrecords tr:has(td)').mouseover(function() {

$(this).addClass('highlightRow');

});

$('#gvrecords tr').mouseout(function() {

$(this).removeClass('highlightRow');

})

})

</script>

<style type="text/css">

.highlightRow

{

background-color:#ffeb95;

text-decoration:underline;

cursor:pointer;

}

</style>

jQuery Get Set Asp.net Control Values Textbox

Get Values

$('#<%=txtUserName.ClientID%>').val()

or

$("[id$='txtUserName']").val()

Set Values

$('#<%=txtUserName.ClientID%>').val('bhasker')

or

$("[id$='txtUserName']").val('bhasker')

How to Set Readonly Textbox using jQuery

$('#<%=txtUserName.ClientID%>').attr('readonly', true);

Disable Weekend’s in jQuery Datepicker

<script type="text/javascript">

$(function() {

$("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends });

});

</script>

jQuery UI Datepicker Disable Past Dates Days

<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();

var currentYear = date.getFullYear();

$('#datepicker').datepicker({

minDate: new Date(currentYear, currentMonth, currentDate)

});

});

</script>

jQuery Datepicker- Disable Future Dates in Calendar

<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();

var currentYear = date.getFullYear();

$('#datepicker').datepicker({

maxDate: new Date(currentYear, currentMonth, currentDate)

});

});

</script>

jQuery Create Rounded Corners for Textbox in Asp.net

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">

</script>

<script src="jquery.corner.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$(".divStyle").corner("round");

});

</script>