Step towards Dot Net: jquery

Showing posts with label jquery. Show all posts

Monday, February 3, 2014

How to disable or enable all the validation of the page?

To disable or enable the validation of the page we can simply use this JQuery code-

Check this below code-

        //Function to Enable/ Disable all validation
        function EnableValidation(boolFlag) {
            //Turn on/off all validation
            $.each(Page_Validators, function (index, validator) {
                ValidatorEnable(validator, boolFlag);
            });
        }
Now you can call this function. Just pass boolean value to enable or disable the validations.

To disable the validations-

EnableValidation(false);

To enable the validations-

EnableValidation(true);

Tuesday, December 18, 2012

How to get HTML Table cell value on click event?

In some of the cases we want to access the value of HTML table cell value when we click on particular cell, this can be simply done using client side code only.

Here I am giving simple code to access HTML table cell value.

<script type="text/javascript">
        $(document).ready(function () {
            $('table[id$=TableName] tr>td').click(function () {
                alert($(this).parent()[0].cells[0].innerText);
            });
        });
</script>

This is JavaScript code; here I have used JQuery to get value. Here first I have integrated one function with table cell. This function will be executed when

we will click on cell. To get cell value I have written this line of code-

alert($(this).parent()[0].cells[0].innerText);

This alert() will display value of cell.

Thanks

Sunday, October 14, 2012

How to maintain selected JQuery tab during post-back?

JQuery -

JQuery is java-script file which provides built-in client side functionality. By including JQuery plug-in to page we can use these built-in functionality. It is just like a Header files in C, means to use JQuery functionality it is must that first we need to include JQuery plug-in to the page.

In this article, I am explaining - How to maintain selected JQuery tab during post-back?

While using JQuery tab if we are making any post-back then JQuery tab doesn't maintain selected tab. Her I am giving code to maintain JQuery selected tab in post-back.

For this, I have used HiddenField variable to maintain the value of selected tab index. To explain this, I have designed .aspx page like this-

<head runat="server">
<link href="Css/JQuery -ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<title>hi</title>
<script src="Scripts/JQuery -1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/JQuery -ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {
$('#tabProfile').tabs({ selected: $("#<%= hdnTabIndex.ClientID %>").val() });
});

function funHoldValue(index) {
$("#<%= hdnTabIndex.ClientID %>").val(index);
}
</script>
</head>

<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hdnTabIndex" runat="server" Value="0" />
<div id="tabProfile" style="width: 50%;">
<ul>
<li><a href="#tabsGeneralProfile">General profile</a></li>
<li><a href="#tabsEduProfile">Educational profile</a></li>
<li><a href="#tabsProfProfile">Professional profile</a></li>
</ul>
<div id="tabsGeneralProfile" style="text-align: center;">
General Profile
<br />
<asp:Button ID="btnGeneral" runat="server" Text="OK" OnClientClick="funHoldValue(0);" OnClick="btnGeneral_Click" />
</div>
<div id="tabsEduProfile" style="text-align: center;">
Educational Profile
<br />
<asp:Button ID="btnEducation" runat="server" Text="OK" OnClientClick="funHoldValue(1);" OnClick="btnEducation_Click" />
</div>
<div id="tabsProfProfile" style="text-align: center;">
Professional Profile
<br />
<asp:Button ID="btnProfession" runat="server" Text="OK" OnClientClick="funHoldValue(2);" OnClick="btnProfession_Click" />
</div>
</div>
</form>
</body>

Here we can see that, I have taken one HiddenField variable by named- hdnTabIndex.
In this code I my holding value of selected tab using this variable. I have declared one client side function by named- funHoldValue().

Using funHoldValue () function, I am setting selected tab value to HiddenField variable. In this example I have designed 3 tabs, and for holding selected tab value I am using code like this-

<asp:Button ID="btnGeneral" runat="server" Text="OK" OnClientClick="funHoldValue(0);" OnClick="btnGeneral_Click" />

Here I am passing the index for setting to HiddenField, like this-

OnClientClick="funHoldValue(0);"
OnClientClick="funHoldValue(1);"
OnClientClick="funHoldValue(2);"

After setting value to HiddenField we have to set selected tab while post-back for that I have used this code-

$(document).ready(function () {
$('#tabProfile').tabs({ selected: $("#<%= hdnTabIndex.ClientID %>").val() });
});

This code will get value from HiddenField and set that value or index as selected tab index in JQuery tab. Here output will be like this-

Thanks

Monday, October 8, 2012

How to pass more than one values from one page to another page using javasctipt?

There is lot of methods for passing data from one page to another page, but here I am explaining,
How to pass more than one values from one page to another page using java-script?

I have created one example for showing this process, here is code-
Source page code (SourcePage.aspx)-

This is client side Function-

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function TransferData() {
            var value= new Object();
            value.item1 = $('input[id$=txtItem1]').val();
            value.item2 = $('input[id$=txtItem2]').val();
            showModalDialog('SecondPage.aspx', value);
            return false;
        }
    </script>

In above JavaScript code, I have created one function called- TransferData(). In this function, first I have created one var type as object using this line-

var value= new Object();

Now, using JQuery I am getting control's values and assigning to "value" variable, here "item1" and "item2" are dynamic properties for value variable.

       value.item1 = $('input[id$=txtItem1]').val();
       value.item2 = $('input[id$=txtItem2]').val();

After that using showDialog() , I am passing value variable to next page.

   showModalDialog('SecondPage.aspx', value);

All these value can be accessed in next page using same properties.

Body Part-

<div>
        <table align="center">
            <tr>
                <td>
                    Value1
                </td>
                <td>
                    <asp:TextBox ID="txtItem1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Value2
                </td>
                <td>
                    <asp:TextBox ID="txtItem2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Button ID="btnSend" runat="server" Text="Pass Data" OnClientClick="return TransferData();" />
                </td>
            </tr>
        </table>
    </div>

Now to pass data of this page to another page, I have called TransferData() function in onClientClick() event of Button.

Now SecondPage code (SecondPage.aspx)-

This is client side Function-

<script type="text/javascript">
        function FetchValues() {
            var value= window.dialogArguments;
            if (value!= null) {
                var item1 = value.item1 ;
                var item2 = value.item2;
                alert('item1 =' + item1 + ', item2 =' + item2 );
            }
            return false;
        }
    </script>

To get passes data from source page, I have written one client side function FetchValues(). In this function, I am getting passed data variable using this code-

var value= window.dialogArguments;

Now to get values, first I am checking for null and then accessing value like this-

   if (value!= null) {
                var item1 = value.item1 ;
                var item2 = value.item2;
                alert('item1 =' + item1 + ', item2 =' + item2 );
            }

Body Part-

<body onload="FetchValues();">
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>

I have called FetchValues() function in onload() event of body, based on our need this function can be called anywhere.

Note-
In this code I have used JQuery, so don't forget to include JQuery plug-in in your page.

Thanks

Monday, July 2, 2012

How to Add and Remove item in DropDownList using JQuery?

DropDownList –

DropDownList is a control which is used for showing collection of items on the web page. We can bind DataSource to DropDownList control also, It has some inbuilt methods like Add () and Remove (), using these method we can perform Insertion and deletion operations on DropDownList's items. But these methods are server side methods.

In some of the cases we want to perform Insertion and deletion operation on DropDownList's items on client side means we don't want to perform server side functionality for this, In this article , I am explaining - How to Add and Remove item in DropDownList using JQuery?

For this, I have designed page like this-

.aspx code-
<table>
                <tr>
                    <td>
                        <asp:Button ID="btnAdd" runat="server" Text="Add Item" OnClientClick="return funInsert();" />
                    </td>
                    <td colspan="2" align="center">
                        <asp:DropDownList ID="drpList" runat="server" Width="100">
                            <asp:ListItem Value="1">a</asp:ListItem>
                            <asp:ListItem Value="2">b</asp:ListItem>
                            <asp:ListItem Value="3">c</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:Button ID="btnDelete" runat="server" Text="Remove Item" OnClientClick=" return funDelete();" />
                    </td>
                </tr>
</table>

Now to perform insertion and deletion operation on DropDownList's Items, I have defined two client side functions-

1. funInsert() - For Insertion operation
2. funDelete() - For deletion operation

   <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Function to insert item to DropDownList
        function funInsert() {
            var item = prompt("Enter Item to add- ");
            if (item == null) {
                alert("First enter item");
            }
            else {
                var count = $("#<%= drpList.ClientID %> option ").length;

                //Adding item to DropDownList
                $("#<%= drpList.ClientID %>").append("<option value=" + (parseInt(count) + parseInt(1)) + ">" + item + " </option>");
            }
            return false;
        }

        //Function to remove item from DropDownList
        function funDelete() {
            var count = $("#<%= drpList.ClientID %> option ").length;
            if (count == 0) {
                alert("No item to remove");
            }
            else {
                //Removing item from DropDownList
                $("#<%= drpList.ClientID %> option[value=" + count + "]").remove();
            }

            return false;
        }
    </script>

In above code, to perform Insertion operation on items, I have defined funInsert() function.
Here for inserting new item, I am prompting the user for entering new item as input using prompt ().

Like this-

After getting input from user, I am inserting this item to the DropDownList using append () method.

Like this-

//Adding item to DropDownList
$("#<%= drpList.ClientID %>").append("<option value=" + (parseInt(count) + parseInt(1)) + ">" + item + " </option>");

Here "item" is variable which is representing entered item by user. After executing this code item will be added to DropDownList.

Like this-

In image you can see newly added item.

Now to delete item from DropDownList, I have defined one client side function- funDelete().
In this function, I have written code to delete last item from the DropDownList. For this first I am getting count of items as "count" variable.

To delete item I have used this code-

//Removing item from DropDownList
$("#<%= drpList.ClientID %> option [value=" + count + "]").remove();

Here I have used remove() method, For this first I have got last item using JQuery and deleted that item using remove() method.

Like this-

You can see image last item- "New Item4" has been deleted from the DropDownList.

Note- I have used JQuery for this functionality, so it is must that JQuery plug-in should be included on the page, like I have included on top of the page.

Thanks

Tuesday, June 19, 2012

How to use JQuery Calendar in ASP.Net?

Asp.Net provides Server side calendar control but because it is server side so it is heavy weight. Instead of using Server side calendar control we can also use client side calendar control. Using client side functionality doesn’t make any overload for server because this functionality is handled by client side browser. And it is better practice to perform this kind of task in client side only so that server performance can be increased.

In this article, I am explaining, How to use JQuery Calendar in ASP.Net?

For this example I have used JQueryUI. Here first we need to embed this JQueryUI plugin in our application. To configure this, follow these my previous articles -

http://steptodotnet.blogspot.in/2012/06/auto-complete-textbox-using-jquery-and.html
http://steptodotnet.blogspot.in/2011/12/jquery-popup-window-in-aspnet.html

Here you will get How to add JQueryUI plugin to the project. After adding JQuery plug-in see this code-

.aspx code-

<head id="Head1" runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    <link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
    <title>Auto complete TextBox</title>
    <script type="text/javascript">
    function ShowCalendar() {
            $("#<%=txtDOJ.ClientID%>").datepicker({
                changeMonth: true,
                changeYear: true
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Enter date of joining:
                </td>
                <td>
                    <asp:TextBox ID="txtDOJ" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>

Here I have defined on client side function- ShowCalendar(), In this function I am binding JQuery Calendar to Server side TextBox. For binding JQuery Calendar to server side TextBox, I have used ClientID of TextBox, like this-

$("#<%=txtDOJ.ClientID%>")

In this example, I have added only 2 parameter to Calendar -

changeMonth
changeYear

based on calendar view, we can add more options to it.

.cs code-

protected void Page_Load(object sender, EventArgs e)
    {
        txtDOJ.Attributes.Add("onfocus", "ShowCalendar();");
    }

In this code, I am binding defined client side function to TextBox. For binding client side event to TextBox, I have used Attributes.Add() method, In Add() method I have passed "onfocus" as client side event and "ShowCalendar()" as client side function.

Now done, when you will set focus on TextBox then output will be like this-

JQuery plug-in have different properties or method to display calendar in different format based on our requirement it can be set. For this we need to set these options while configuring calendar to any textbox, here we can pass parameter for this.

Note-

For using client side functionality it is must that browser should support this functionality and client script for browser is also true otherwise this functionality will not work.

Thanks

Wednesday, June 6, 2012

Auto complete TextBox using jquery and Database.

Auto complete TextBox is common for most of the application, but there are different ways to implement this functionality. Here I am explaining this functionality using JQuery and Database. In this example, I am implementing Auto complete functionality for "Name" field in database table. I have used following JavaScript and CSS files to complete this functionality.

JavaScript Files-
jquery-1.4.1.min.js
jquery-ui-1.8.20.custom.min.js

CSS Files-
jquery-ui-1.8.20.custom.css

Now Include these files in your application like this-

Make same directory structure as I have shown you in image.

Now design your .aspx page like this-

AutoComplete.aspx

<head runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    <link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
    <title>Auto complete TextBox</title>
    <script type="text/javascript">
        function AutoComplete() {
            var names = $('#<%= hdnNames.ClientID %>').val();
            if (names != null && names != "") {
                var arrOfNames = names.split("?");
                $("#<%=txtName.ClientID %>").autocomplete({
                    source: arrOfNames
                });
            }
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Enter Name:
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    <asp:HiddenField ID="hdnNames" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

In this page I have taken one HiddenField, why- After reading all the names from table I am concatenating names with separator character "?" and assigning to HiddenField.

Now in script code (AutoComplete() function ), I am implementing functionality for auto complete TextBox after splitting value of HiddenField.

Server side code-

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetNames();
            ClientScript.RegisterStartupScript(typeof(Page), "AutoComplete", "AutoComplete();",true);
        }
    }
    private void GetNames()
    {
        try
        {
            SqlConnection con = new SqlConnection("Connection string");
            con.Open();
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter("select name from employee", con);
            da.Fill(ds);
            if (ds!=null)
            {
                foreach (DataRow row in ds.Tables[0].Rows)
                {
                    //concatenating value with separator character -"?"
                    hdnNames.Value = hdnNames.Value + row[0].ToString() + "?";
                }
            }
        }
        catch (Exception)
        {
            throw;
        }
    }

In server side code, I have defined one function (GetNames()) to get names form employee table and after concatenating assign   to HiddenField value. The main backbone for this functionality is implementing by using this line-

ClientScript.RegisterStartupScript(typeof(Page), "AutoComplete", "AutoComplete();",true);

Using this line, I am binding Auto complete feature to txtName textBox.

Now done, After running the application output will be like this-

Thanks.

Monday, February 13, 2012

Print Using jquery

JQuery allows you to print the selected object, for this you need to use JQuery plug-in.

After adding JQuery plug-in you can use printing functionality of JQuery and you can easily print selected object in web page.

Now use this code-

Method 1:

var printObject= $("#ControlName");
printObject.jqprint();

Method 2:

$("#ControlName").jqprint();

In this example, I have used jqprint() method, which is inbuilt method defined in JQuery print plug-in. here “ControlName” is the name of control to which you want to print.

Thanks

Friday, December 30, 2011

Accessing GridView controls using Client side code/ Jquery

Accessing GridView controls from server side is such a easy task, but when we access GridView controls from client side then generally we face problem, because if we use getElementById() to get GridView controls then it creates complexity.

In this article, I am going to explain – How you can access GridView controls from client side? By using this method not only you can access single control but also you can access more than one control with single line of code.

In this example, I am using Jquery. Here I am accessing GridView control (LinkButton) and hiding/showing that control from client side.

First, I have defined one blank CSS class - clsFind

<style type ="text/css">
    .clsFind
    {
    }
</style>

Note-

Using this CSS class only, we will access GridView Control.

Now I have defined these two functions to get GridView control (LinkButton) and after that I am hiding/ showing that control.

<script type ="text/javascript" >
    //Function to Hide control
    function HideControl() {
        var con = $(".clsFind");
        con.hide();
        return false;
    }

    //Function to Show control
    function ShowControl() {
        var con = $(".clsFind");
        con.show();
        return false;
    }
    </script>

Note-

HideControl function will be called when you will press Hide Control Button.
ShowControl function will be called when you will press Show Control Button.

Now I have designed GridView like this-

Here is .aspx code-

<asp:GridView ID="GrdEmpData" runat="server" AutoGenerateColumns="false"
                onrowdeleting="GrdEmpData_RowDeleting" Width ="50%">
                <Columns>
                    <asp:TemplateField HeaderText="EmpId" ItemStyle-HorizontalAlign ="Left" ItemStyle-Width ="20%">
                        <ItemTemplate>
                            <asp:Label ID="lblEmpId" runat="server" Text='<% # Eval("EmpId") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="EmpName" ItemStyle-HorizontalAlign ="Left" ItemStyle-Width ="30%">
                        <ItemTemplate>
                            <asp:Label ID="lblEmpName" runat="server" Text='<% # Eval("EmpName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="DeptId" ItemStyle-HorizontalAlign ="Left" ItemStyle-Width ="30%">
                        <ItemTemplate>
                            <asp:Label ID="lblDeptName" runat="server" Text='<% # Eval("DeptName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign ="Left" ItemStyle-Width ="20%">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName ="delete" CssClass ="clsFind"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
        <asp:Button ID="btnShowControl" runat="server" Text="Show Delete Button" OnClientClick ="return ShowControl();"/>
        <asp:Button ID="btnHideControl" runat="server" Text="Hide Delete Button" OnClientClick="return HideControl();" />

Now done, when you will press Hide Control Button then delete LinkButton will be disappeared, and your GridView will be like this-

To show LinkButton again, you can press Show Control Button.

Note-

The main advantage of this approach is that, you can access more than one controls using single line of code. For that, you have to code like this-

<asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName ="delete" CssClass ="clsFind"></asp:LinkButton>

<asp:LinkButton ID="lnkShow" runat="server" Text="show" CssClass ="clsFind"></asp:LinkButton>

Means, you have to give same CSS class for controls. Now when you will use this statement –

var con = $(".clsFind");

Then using "con" object only, you can set properties for lnkDelete and lnkEdit LinkButtons. Like this-

con.hide();

This approach is useful when we have multiple controls and we want to set same type of values for their properties.

Update :

To get control value :

Suppose you have LinkButton inside GridView with Text "Delete"

<asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%">
<ItemTemplate>
      <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName="delete" CssClass="clsFind"></asp:LinkButton>
   </ItemTemplate>
</asp:TemplateField>

Now to get control value, We have one button outside of the GridVIew

<asp:Button ID="btnGetValue" runat="server" Text="Get Value" OnClientClick="return GetValue();" />

Use these code to get value-

<script type="text/javascript">

    //Function to get control value

        function GetValue() {
            var con = $(".clsFind");

// Way 1:To get combine text of all link button in GridView
            var combineText = con.text()
            alert(combineText);

//Way 2: To get text of any particular link button in GridView (for first row)
            var firstRowLinkButtonText1 = con[0].innerHTML
            alert(firstRowLinkButtonText );

//Way 3: To get text of any particular link button in GridView (for first row)

            var firstRowLinkButtonText2 = $('#GrdEmpData tr>td>a[id*=lnkDelete]')[0].innerHTML;
            alert(firstRowLinkButtonText2);

            return false;
        }

    </script>

Try these way and let me know.

Thanks

Sunday, December 25, 2011

Jquery popup window in ASP.Net.

For every Application popup window plays very important role, because it makes more user friendly to the Application. Generally popup window is used for following reasons-

-To alert user
-To show information
-To take input

For other cases also you can use popup window.

In this article I am going to explain, How you can display popup in your Application?

Here I am JQuery popup.To use JQuery popup, first you have to include following JS and CSS files in your project.

JS Files-

jquery-1.4.2.js
jquery-ui-1.8.2.custom.min.js

CSS Files-

jquery-ui-1.8.4.custom.css

Just place these files in your project like this-

Now just include these files in your .aspx file like this-

<head runat="server">
    <title>Jquery PopUp Demo</title>

    <link href="JQueryCSS/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <script src="JQuerJS/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="JQuerJS/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        function funDisplayPopUp() {
            $('#dialogDiv').dialog({ resizable: false, height: 200, modal: true });
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <center>
    <div>
        <asp:Button ID="btnDisplayPopup" runat="server" Text ="Display Popup" OnClientClick="return funDisplayPopUp();" />
        <div id="dialogDiv" title="Information" style ="display:none ">
             Hello Dear
        </div>
    </div>
    </center>
    </form>
</body>

Note-

In this example first set display:none for div, which will be displayed as popup.

<div id="dialogDiv" title="Information" style ="display:none ">
             Hello Dear
</div>

Now done, when you will run this project, you will get one button control on form, when you will click on that button one popup window will be displayed like this-

Note- You can put server controls in this popup to control action based on your need.

Thanks