Bhasker: JQuery -Part 1

jQuery- Show multiple months in datepicker

$(function() {

$("#txtDate").datepicker({

numberOfMonths: 3,

showButtonPanel: true

});

</script>

Set month/year date range in JQuery datepicker control using asp.net

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

$(function() {

$("#txtMonthRange").datepicker({

minDate: 0,

maxDate: '+1M',

showButtonPanel: true

});

In above script

minDate: I set it as 0 means it won’t allow us to select before today date

maxDate: Here I set as '+1M' means it will allow us to select upto one month dates.

If we want to set to 10 days range then we will change '+1M' to '+10'

other function will be

$("#txtYearRange").datepicker({

changeMonth: true,

changeYear:true,

yearRange:'1970:2010'

})

In above function I set yearRange: '1970:2010' in year dropdown that will display years from 1970 to 2010

});

</script>

.ui-datepicker { font-size:8pt !important}

</style>

</head>

<body>

<b>Month Range:</b> <asp:TextBox ID="txtMonthRange" runat="server"/>

<b>Year Range:</b><asp:TextBox ID="txtYearRange" runat="server"/>

</div>

Show Jquery datepicker when click on image in asp.net

$(function() {

$("#txtDate").datepicker({

showOn: "button",

buttonImage: "calendar.png",

buttonImageOnly: true

});

</script>

.ui-datepicker { font-size:8pt !important}

</style>

</head>

<body>

<div>

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

</div>

Change/Set date format in jquery ui datepicker using asp.net

$("#txtDate").datepicker({ dateFormat: 'dd/mm/yy' });

$("#txtDate").datepicker({ dateFormat: 'mm/dd/yy' });

$("#txtDate").datepicker({ dateFormat: 'yy-mm-dd' });

$("#txtDate").datepicker({ dateFormat: 'd M, y' });

$("#txtDate").datepicker({ dateFormat: 'DD, d MM, yy' });

JQuery Show Session Timeout message before session expires in asp.net

$(function() {

var timeout = 60000;

$(document).bind("idle.idleTimer", function() {

// function you want to fire when the user goes idle

$.timeoutDialog({ timeout: 1, countdown: 60, logout_redirect_url: 'http://www.aspdotnet-suresh.com', restart_on_yes: true });

});

$(document).bind("active.idleTimer", function() {

// function you want to fire when the user becomes active again

});

$.idleTimer(timeout);

});

</script>

timeout: The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears.

Countdown: The countdown total value (in seconds).

Title: 'Your session is about to expire!' The title message in the dialog box.

Message: 'You will be logged out in {0} seconds.' The countdown message where {0} will be used to enter the countdown value.

Question: 'Do you want to stay signed in?' The question message if they want to continue using the site or not.

keep_alive_button_text: 'Yes, Keep me signed in' The text of the YES button to keep the session alive.

sign_out_button_text: 'No, Sign me out' The text of the NO button to kill the session.

keep_alive_url: '/keep-alive' The url that will perform a GET request to keep the session alive. This GET expects a 'OK' plain HTTP response.

logout_url: 'null' The url that will perform a POST request to kill the session. If no logout_url is defined it will just redirect to the url defined in logout_redirect_url.

logout_redirect_url: '/' The redirect url after the logout happens, usually back to the login url. It will also contain a next query param with the url that they were when timedout and a timeout=t query param indicating if it was from a timeout, this value will not be set if the user clicked the 'No, Sign me out' button.

restart_on_yes: 'true' A boolean value that indicates if the countdown will restart when the user clicks the 'keep session alive' button.

dialog_width: '350' The width of the dialog box.

JQuery AutoComplete in asp.net

http://www.aspdotnet-suresh.com/2012/07/jquery-autocomplete-textbox-with.html

$(document).ready(function() {

SearchText();

});

function SearchText() {

$("#txtSearch").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'username':'" + extractLast(request.term) + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error");

}

});

focus: function() {

// prevent value inserted on focus

return false;

select: function(event, ui) {

var terms = split(this.value);

// remove the current input

terms.pop();

// add the selected item

terms.push(ui.item.value);

// add placeholder to get the comma-and-space at the end

terms.push("");

this.value = terms.join(", ");

return false;

}

});

$("#txtSearch").bind("keydown", function(event) {

if (event.keyCode === $.ui.keyCode.TAB &&

$(this).data("autocomplete").menu.active) {

event.preventDefault();

}

})

function split(val) {

return val.split(/,\s*/);

}

function extractLast(term) {

return split(term).pop();

}

</script>

<asp:TextBox ID="txtSearch" runat="server" Width="300px"></asp:TextBox>

If you observe above code in header section I added some of script and css files by using those files we have a chance to implement autocomplete textbox with multiple values selection in asp.net. To get those files download attached folder and add the urls mentioned in header section to your application

Another thing here we need to know is script functions in header section

$("#txtSearch").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'username':'" + extractLast(request.term) + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error");

}

});

This is the function declaration of JSON format we are using this JSON function to call web methods using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. If you want to know more about it check these posts call pagemethods with JSON and autocomplete textbox with Jquery.

Now open code behind file and add following namespaces

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Web.Services;

After that write the following code

C#.NET Code

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static List<string> GetAutoCompleteData(string username)

{

List<string> result = new List<string>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))

{

using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'+@SearchText+'%'", con))

{

con.Open();

cmd.Parameters.AddWithValue("@SearchText", username);

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

result.Add(dr["UserName"].ToString());

}

return result;

}

How to send or pass multiple parameters in jquery ajax in asp.net

$.ajax({

type: "POST",

contentType: "application/json;charset=utf-8",

url: "SaveAudiVideo.aspx/SaveData",

data: JSON.stringify({title: 'value1' ,songPath: 'value2' }),

dataType: "json",

success: function(data) {

$('lbltxt').text(data.d);

error: function(result) {

alert("error");

}

});

[WebMethod]

public static string SaveData(string title,string songPath)

{

string str = string.Empty;

return str;

}

how to bind dropdownlist in asp.net using jquery or JSON

$(document).ready(function() {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/BindDatatoDropdown",

data: "{}",

dataType: "json",

success: function(data) {

$.each(data.d, function(key, value) {

$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));

});

error: function(result) {

alert("Error");

}

});

</script>

<asp:DropDownList ID="ddlCountry" runat="server" />

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static CountryDetails[] BindDatatoDropdown()

{

DataTable dt = new DataTable();

List<CountryDetails> details = new List<CountryDetails>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))

{

using (SqlCommand cmd = new SqlCommand("SELECT CountryID,CountryName FROM Country", con))

{

con.Open();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

foreach (DataRow dtrow in dt.Rows)

{

CountryDetails country = new CountryDetails();

country.CountryId = Convert.ToInt32(dtrow["CountryId"].ToString());

country.CountryName = dtrow["CountryName"].ToString();

details.Add(country);

}

return details.ToArray();

}

public class CountryDetails

{

public int CountryId { get; set; }

public string CountryName { get; set; }

}

Bhasker

Sunday, 20 April 2014

JQuery -Part 1

jQuery- Show multiple months in datepicker

Set month/year date range in JQuery datepicker control using asp.net

Show Jquery datepicker when click on image in asp.net

Change/Set date format in jquery ui datepicker using asp.net

JQuery Show Session Timeout message before session expires in asp.net

JQuery AutoComplete in asp.net

How to send or pass multiple parameters in jquery ajax in asp.net

how to bind dropdownlist in asp.net using jquery or JSON

No comments:

Post a Comment