Click event in jQuery

jQuery mouse click event
In web application we need capture mouse click event in jQuery. To perform some clientside operations in asp.net we can easly capture mouse click event in jQuery.

jQuery mouse click event happens when we click mouse button on some spicific element on page. We can use click event to show some information box, or we can show hide div on click event of mouse...etc
Here we will look at very simple exaple of how to show hide div when we click on link

Sample code for click event in jQuery [ASP.NET]


<html>
<head><title></title>
  <script src="jquery-1.4.1.js" ></script>
  <script src="jquery-1.4.1.min.js" ></script>
    
 <style type="text/css"> 
  .info {
   position: absolute;
   z-index: 200;
   display: none;
   text-align: center;
   background: gray;
   border: 2px solid silver;
 }
</style>
 <script type="text/javascript"> 
//<![CDATA[
  $(document).ready(function(){
   $("a").click(function(){
   $(".info").show();
  });
//]]>
</script>
</head>
<body>
 <form>
 <p>
   Click on this link <a id="aspnet" href="#" >jQuery mouse clickr</a>.
 </p>
 <div class="info">
   You will see some infomation when you <b>mouse click</b> on link. 
 </div>
</form>
</body>
</html>

Mouseover event in jQuery

mouseover jquery
In web application often we need mouseover in jquery. jQuery mouseover event triggers when we take mouse over perticular DOM element on page.

We can use mouseover to show custom tooltip on link or to show mouseover context menu...etc.jQuery provides lot's of mouse event's in order to deal with clientside operation in asp.net.
Here we will look at very simple exaple of how to show hide div when we mouseover on link.

Sample to show how mouseover in jQuery works [ASP.NET]


<html>
<head><title></title>
    <script src="jquery-1.4.1.js" ></script>
    <script src="jquery-1.4.1.min.js" ></script>
    
    <style type="text/css"> 
 .info {
  position: absolute;
  z-index: 200;
  display: none;
         text-align: center;
  background: #fff;
     border: 1px solid silver;
 }
</style>
 <script type="text/javascript"> 
//<![CDATA[
        $(document).ready(function(){
            $("a").mouseover(function(){
                $(".info").show();
           });

           $("a").mouseout(function () {
               $(".info").hide();
           });
        });
//]]>
</script>
</head>
<body>
    <form>
<p>
Mouseover on this link <a id="aspnet" href="#" >jQuery mouseover</a>.
    </p>
<div class="info">
You will see some infomation when you <b>mouseover</b> on link.
And infomation will hide when you <b>mouseout</b> from link.
     </div>
</form>
</body>
</html>

String splitting C#

split string c#

C#.Net provides Split() function to split the string by the specified char and stores it in array. Split string using C# is bit easy task. In C# we can split string into substrings—such as splitting a sentence into individual words. In this case we set split char as a "," character and then it will returns an array of substrings

using System;
public class sortlist
{
  public static void Main()
  {
    string myString = "C#,VB,ASP.NET,C++";
    string[] splitedString = myString.Split(‘,’); 
    foreach(string item in splitedString)
    {
     Console.WriteLine(item);
    }
  }
}

//Output
//C#
//VB
//ASP.NET
//C++

C# sort list [Generic List<T>]

c# sort list
Generic List in C# provides easy way to sort list. In C# some times we need to add data to generic list and sort list by ascending based on our need. C# .net provides .sort method for List that can be used for sorting the contents of list. We will see example to sort list in c#.

Sample code to sort list [C#]:


using System;
using System.Collections.Generic;

public class sortlist
{
public static void Main()
{
List<string> names =  new List<string>();
names.Add("John");
names.Add("Antony");
names.Add("Mickel");
names.Add("Daniel");
names.Sort();
Console.WriteLine();
foreach(string name in names)
{
Console.WriteLine(name);
}
}
}


//Output
//Antony
//Daniel
//John
//Mickel

Get checked checkboxes in jQuery

get checked checkboxes in jquery


In this post we are going to see how to get all the checked checkboxes using jQuery. Some time in asp.net applications we need to do operations at client side on controls like checkboxes, dropdown list, buttons…etc. Here we will see how to access checkboxes at client side using jQuery and how to get checked checkboxes. To get the checked checkboxes, jQuery provides selector :checked.

Sample code to get all checked checkboxes[jQuery – ASP.Net]

<input value="1" checked type="checkbox" name="numbers" />
<input value="2" type="checkbox" name="numbers" />
<input value="3" checked type="checkbox" name="numbers" />

Now to get only the checked checkboxes we will use below line of code that will store all the checked checkboxes as an array.


$checkedCheckboxes = $("input:checkbox[name=numbers]:checked");;

We can iterate though the checked checkbox array using .each and perform some operations or can get or set values to checkboxes.


var selectedValues="";
$checkedCheckboxes.each(function () {
selectedValues +=  $(this).val() +",";
});
);

Let's put all above code togather

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var selectedValues="";
$checkedCheckboxes = $("input:checkbox[name=numbers]:checked");
$checkedCheckboxes.each(function () {
selectedValues +=  $(this).val() +",";
});
alert(selectedValues);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input value="1" checked type="checkbox" name="numbers" />
<input value="2" type="checkbox" name="numbers" />
<input value="3" checked type="checkbox" name="numbers" />
</div>
</form>
</body>
</html>

//Output
//1,3

using jquery

Get IndexOf string in Javascript

string indexof in javascript
In JavaScript strings IndexOf() function is used to find position of specified character in the string. When IndexOf() method is used in javascript it returns position of first occurrence of the given character. If specified character is not found in string then it returns –1 value.

Syntax for IndexOf()


string.indexOf(searchstring, start)

Here search string is the character that is to be find and start is the position from which search to begin.

Example of IndexOf() Method [JavaScript]:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function GetStringIndex() { 
var str="Javascript IndexOf Method.";
document.write( "a is at position"+ str.indexOf("a") + "<br />");
document.write("IndexOf is at position"+ str.indexOf("IndexOf") + "<br />");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Submit" onclick="return GetStringIndex();" />
</div>
</form>
</body>
</html>

//Output<
//a is at position 1
//IndexOf is at position 11

Split string JavaScript

split string in javascript
In JavaScript we need to split the string to perform some operations on string. JavaScript uses Split() method to split the given string in JavaScript. Split() method basically split string into array of substrings and generates new array.

String split Syntax:


string.split(separator, limit)

Here separator is a character by which we want to separate string. and limit is to give up to how many number split the string.

Sample to split string [JavaScript]


<script type="text/javascript">
 function splitString()
 {
  var str="Split Javascript String";
  document.write(str.split(" "));
 }
</script> 


//Output
//Split, Javascript, String

In above example of string split, we give space(“ ”) character to split the string with. so it splits the string with “ “ and returns array with substrings.

Get GridView SelectedIndexChanged event asp.net

gridview selectedindexchanged event
In this post we will see how to use SelectedIndexChanged Event of GridView in ASP.Net. SelectedIndexChanged event get fired when we click select button of the gridview row. We can use this event to perform some operation on form when row is selected like call custom routines, change labels, change titles..etc.

Sample code to see how SelectedIndexChanged event in gridview works [ASP.Net, C#]:


<asp:GridView ID ="GridView1" runat="server" 
onselectedindexchanged="GridView1_SelectedIndexChanged" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" AutoGenerateSelectButton="true">

<Columns>

<asp:BoundFieldDataField="ID"HeaderText="ID"SortExpression="ID" />

<asp:BoundFieldDataField="Name"HeaderText="Name"SortExpression="Name" />

<asp:BoundFieldDataField="Address"HeaderText="Address" SortExpression="Address" />

</Columns>

</asp:GridView>

<asp:SqlDataSourceID="SqlDataSource1"runat="server" ConnectionString="<
;%$ ConnectionStrings:PersonConnectionString %>" 
SelectCommand="SELECT * FROM [PersonInfo]"></asp:SqlDataSource>
</p>

<p>
<asp:labelid="lblMessage"forecolor="Red"runat="server"/>
</p>



Code behind for selectedIndexChanged Event:






protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{
 
  GridViewRow row = GridView1.SelectedRow;
  
  lblMessage.Text = "Selected" + row.Cells[2].Text + ".";
}