Step towards Dot Net: JavaScript

Showing posts with label JavaScript. Show all posts

Thursday, March 21, 2013

How to use JQuery Accordion in ASP.Net?

Asp.net Ajax Control Toolkit contains Accordion control, but it is server side control which is heavy weight. We have another alternative of Ajax Accordion Control. We can use JQuery Accordion. Jquery Accordion control is client side control so it is faster that Ajax Accordion control.

In this article I am explaining - How to use JQuery Accordion in ASP.Net?

To use JQuery Accordion first we need to include Jquery plug-in. You can easily download those .CSS and .JS files from jqueryui.com. After downloading those files create your directory structure like this-

http://steptodotnet.blogspot.in/2011/12/jquery-popup-window-in-aspnet.html

In this link you can see the solution structure.

Now here is the code to use Jquery Accordion control-

<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></title>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <div id="accordion" style="width: 400px">
            <h3>
                <a href="#">Section 1</a></h3>
            <div>
                Section 1 Description
            </div>
            <h3>
                <a href="#">Section 2</a></h3>
            <div>
                Section 2 Description
            </div>
            <h3>
                <a href="#">Section 3</a></h3>
            <div>
                Section 3 Description
            </div>
        </div>
    </div>
    </form>
</body>

In above code I have included Source files(.js files) and CSS files. Now to make Accordion to work I have written this lines of code-

<script>
        $(function () {
            $("#accordion").accordion();
        });
   </script>

Here "accordion" is the name of Div control which contains Child divs, These Child divs will be displayed as Accordion sections.

Output will be like this-

Note-

This example needs JQuery plug-in so after downloading include these files .js and .cs files in your project .

Thanks

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

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

Wednesday, June 13, 2012

How to redirect to another page after alert message?

This is common requirement that- after doing some server side functionality we want to show alert message and then redirect to another page.

Here I am showing - How to redirect to another page after alert message?

Here is code-

Method 1:

Response.Write("<script> alert('Your Message.');window.location='TargetpageURL'; </script>");

Method 2: If you are using Ajax functionality on that case Response.Write() will not work then you can use this code-

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ScriptKey", "alert('Your Message.');window.location='TargetpageURL'; ", true);

Thanks

Tuesday, June 12, 2012

How to get Session value using javascript?

In some of the cases we want to access Session variable value in Client side. but getting session value in client side is bit difficult, because is it server side object which can not be accessed in client side. But even then we can make trick to access Session object value in client side. Here I am explaining easy way to for-

How to get Session value using JavaScript?

To complete this task I have used HiddenField. In this example I have assigned Session object value to HiddenField variable which can be easily accessed from client side.

Here is code-

.aspx code-

<head runat="server">
    <title>How to get session value in javascript</title>
    <script type="text/javascript">
        function GetSessionValue() {
            var hdnSession= document.getElementById("<%= hdnSession.ClientID %>");
            alert(hdnSession.value);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnGetSession" runat="server" OnClientClick ="return GetSessionValue();" Text="Get Session Value" />
        <asp:HiddenField ID="hdnSession" runat="server" />
    </div>
    </form>
</body>

I above code I have taken one HiddenField Varible, using this HiddenField I will get value of Session variable. To get value of HiddenField I have defined one client side function called- GetValue().

.cs code-

Now I have set Session variable value in Page_Load() event-

protected void Page_Load(object sender, EventArgs e)
    {
      //Setting data to Session variable
        Session["Data"]="Jitendra" ;

      //Copying Session data HiddenField variable
        hdnSession.Value = Session["Data"].ToString();
    }
In above code, I have copied some data to Session variable, in next line same data I have copied to HiddenFiled variable, so that I can access this HiddenFiled value from client side.

Now done, when you will click on button you will get output like this-

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.