Add css style dynamically in jquery

By  | In

add css style dynamically injquery

In this post we will see how to add css style to element in jquery. In web applications we need to add css style dynamically to give user friendly ui effects and for that we can use .addClass() function in jquery. Here we will see example of div in which when user clicks on link it will change color of div by applying css style dynamically.

Example to add css style dynamically

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Add css style dynamically</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#clickme").click(function () {
                $("#dynamic-style").addClass("newStyle");
            });
        });
    </script>
    <style type="text/css">
        .newStyle
        {
            width: 500px;
            height: 300px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" id="clickme">Change</a>
    <div id="dynamic-style">
        Click change to change color.
    </div>
    </form>
</body>
</html>

Get html control value in code behind without runat = server

By  | In ,

access html control value in codebehind without runat server
In asp.net application we need to access value of html control in code behind without runat="server". For that purpose we can use name property of control. And Request.Form we can get value to code behind.So if we have html text input and you want to pass value of html input to code behind set it name property like <input name="username" />  and access it using Rquest.Form["usename"] you will get value to code behind of control without runat="server".

Code to get html control value to code behind without runat server

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <script type="text/javascript">
      function SubmitForm() {
         var theform;
          if (window.navigator.appName.toUpperCase().indexOf("NETSCAPE") > -1) {
              theform = document.forms["form1"];
          }
          else {
              theform = document.forms.form1;
          }
          theform.__EVENTTARGET = "btn";   
          theform.__EVENTARGUMENT = "";
          theform.submit();
      }    
</script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="username" name="username" />
        <input type="button" id="btn" onclick="SubmitForm()"  value="GO"/>
    </div>
    </form>
</body>
</html>

Code behind to access html control value 


using System;

namespace aspnetcontrol
{
    public partial class Getvaluewithoutrunatservercontrol : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string value = Request.Form["username"];
            Response.Write(value);
        }
    }
}

Get gridview checkbox value jQuery

By  | In ,
get gridview selected checkboxes in jquery
In asp.net gridview we show checkboxes to select rows. Some times we need to get checked checkboxes in jQuery to perform some client side operations. in jQuery we need to first get object of gridview and then need to find checked checkboxes inside gridview.

Example to get gridview checked checkboxes in jQuery 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/i18n/jquery-ui-i18n.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" type="text/css"/>
    <title>Get checkboxes in gridview using jQuery</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function () {
               var $checkedCheckBoxes = $('#<%=GridView1.ClientID %>').find("input:checkbox:checked");
            });
        });
      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="1px"
            CellPadding="3" BorderStyle="None" Font-Names="Arial">
            <FooterStyle></FooterStyle>
            <PagerStyle HorizontalAlign="Left"></PagerStyle>
            <HeaderStyle Font-Bold="True"></HeaderStyle>
            <Columns>
                <asp:TemplateField HeaderText="Select">
                   <ItemTemplate>
                        <asp:CheckBox ID="CheckBoxPurchase" runat="server" Enabled="true" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Item No." DataField="ItemNo">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Item Name" DataField="ItemName">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <input type="button" id="submit" value="Submit"/>
    </div>
    </form>
</body>
</html>

Jquery- Get hiddenfield value in user control

By  | In
get value of dynamic hiddenfield
In this post we will see how to get value of dynamically loaded hiddenfield value in jQuery. This happens when we use user control in page. In such cases id of hiddenfield get changed and so hiddenfield is not accessible from javascript or jQuery. We can't access hiddenfield using class selector also because hidden field don't have class property. In this case we can use "ClientIDMode" property and set it to ClientIDMode="Static". When we set ClientIDMode="Static" it will not set dynamic id to hidden field. And now we can access it in regular way.

Code to get hiddenfield value in user control [jQuery]

You can set ClientIDMode property of hidden field in user control like:

<asp:HiddenField runat="server" ID="hiddenValue" ClientIDMode="Static" value="Some Value" />

And in jQuery you can access it as like:
   <script type="text/javascript">
        $(document).ready(function () {
            $("#submitbtn").click(function () {
                var hiddenValue = $("#hiddenValue").val();
                alert(hiddenValue);
            });
        });
    </script>

Summary: After setting ClientIDMode="Static" it will not assing dynamic id to hiddenfield and we can access hiddenfield as usual.

Get textarea value in jQuery

By  | In

textarea value using jQuery

In web applications while using textarea control, we need to get the value of textarea at client side. In this post we will see example of how to get value of textarea in jQuery.

Example to get textarea value in jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="development-bundle/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>Get textarea value in jQuery</title>
<script type="text/javascript">
$(document).ready(function () {
$("#submitbtn").click(function () {
var textAreaValue = $("#txtMessage").text();
alert(textAreaValue);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea cols="50" rows="5" id="txtMessage"></textarea>
<input type="button" id="submitbtn" value="Submit" />
</div>
</form>
</body>
</html>