Hello, The below code will assist you to debug "Column Sorting with checkbox" using Datatable feature. for example: if you like to make click on the feature and in return the whole column with checkbox will get sorted

       "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sSortDataType": "dom-checkbox" },
            null
        ],

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
            var aData = [];
            $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
                aData.push(this.checked == true ? "1" : "0");
            });
            return aData;
        }

hope this help While i have jquery issue in

"Uncaught TypeError: Cannot call method 'fnSetData' of undefined".

and I fixed using the reference link http://datatables.net/forums/discussion/7897/need-help-uncaught-typeerror-cannot-call-method-fnsetdata-of-undefined/p1 the Problem is I missed the red color column highlighted definition like

       "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sSortDataType": "dom-checkbox" },
            null            
        ],

Senthilnathan

Read more ...

Its very useful while click the checkbox the onclick funcation called jquery that hidden value used div will be open while checkbox checked. Uncheck the checkbox the div will be hid.

<input type="checkbox" id="ChangePassword" onclick = "DisplayChangePasswordField();"/>
 <input type="hidden" id="hidChangePassword" name="hidChangePassword" value="0" />
<div id="divchangepassword">
you can hid this div while clicking the checkbox.
</div>

$(document).ready(function () {
            $("#divchangepassword").hide();
        });
        function DisplayChangePasswordField() {
            var hideValue = $("#hidChangePassword").val();
            var newHideValue = 0;

            if (hideValue == 0) {
                newHideValue = 1;
            }
            else {
                newHideValue = 0;
            }
            if (newHideValue == 0) {
                $("#divchangepassword").hide();
            }
            else {
                $("#divchangepassword").show();
            }
            $("#hidChangePassword").val(newHideValue);
            return false;

        }    

Read more ...

There are only follow the three steps. it will getting a easy to set the popup background transparent. I tried to do this its good. Just copy and paste save the html file. put the code the warm server then only jquery file will work then it will open the popup. besides to use what you need.

<style> .blockbkg { background-color: black; opacity: 90%; filter:alpha(opacity=90); background-color: rgba(0,0,0,0.90); width: 100%; min-height: 100%; overflow: hidden; float: absolute; position: fixed; top: 0; left: 0; color: white; } .cont { background-color: white; color: black; font-size: 16px; border: 1px solid gray; padding: 20px; display:block; position: absolute; top: 10%; left: 35%; width: 400px; height: 400px; overflow-y: scroll; } .closebtn { width: 20px; height: 20px; padding: 5px; margin: 2px; float: right; top: 0; background-image: url(x.png); background-repeat: no-repeat; background-position:center; background-color: lightgray; display: block; } .closebtn:hover { cursor: pointer; } .normal { background-color: lightblue; width: 900px; min-height: 200px; padding: 20px; } </style>

Step:2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
</script>

<script>
$(document).ready(function () {
$("#closebtn").click(function () {
$("#dlg").hide('800', "swing", function () { $("#bkg").fadeOut("500"); });
});
$("#opn").click(function () {
if (document.getElementById('bkg').style.visibility == 'hidden') {
document.getElementById('bkg').style.visibility = '';
$("#bkg").hide();
}
if (document.getElementById('dlg').style.visibility == 'hidden') {
document.getElementById('dlg').style.visibility = '';
$("#dlg").hide();
}
$("#bkg").fadeIn(500, "linear", function () { $("#dlg").show(800, "swing"); });
});

});
</script>

Step:3

<body> <div class="normal"> <h1>Modal Dialogs</h1> <p> This is an example of how to create <strong>modal dialog popup windows</strong> for your pages using javascript and CSS. Modal dialog popups are better than window-based popups, because a new browser window is not required and the user does not have to leave the page. This is great for when you need an easy way for the user to carry out a specific action on the same page and control the modality of the window. </p> <p><a href="#" id="opn">Click here</a> to display the javascript modal popup dialog!</p> </div> <div class="blockbkg" id="bkg" style="visibility: hidden;"> <div class="cont" id="dlg" style="visibility: hidden;"> <div class="closebtn" title="Close" id="closebtn"></div> <h1>Hello World!</h1> <p> This is a neat little trick to get a modal popup dialog box in your web pages without disturbing the user experience or dsitracting them with popup windows or new tabs... </p> <p> The <strong>popup dialog</strong> uses javascript (jQuery) and CSS to create a modal dialog that will retain focus over the parent window until it is closed. The trick is simple. We use block-elements (divs) to create the dialog window. The CSS rules for <em>position</em>, <em>float</em>, <em>top</em>, <em>left</em>/<em>right</em>, and <em>opacity</em> (or CSS3 transparency) allows us to create a semi-transparent div over the entire page, thereby creating the illusion of modalness. The other div then takes focus over the center of the window. </p> <img src="https://sheriframadan.com/examples/uploadit/uploads/50f00e1434e8b.jpg" width="200" height="252"> <p> We can also retain content view control over the modal dialog with the <em>overflow</em> CSS property. This means no matter what we place inside of our dialog window the content will remain inside of the defined bounds even if scrolling becomes necessary within the div. </p> </div> </div> </body> <html>

Read more ...

check Password Strength using Jquery in asp.net:
Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.

The idea is that every time a user enters a character, the contents is evaluated to test the strength of the password they have entered... I'm sure everyone has seen these before.

That’s all. Here’s the full jQuery code:

<link href="FormValidation.css" rel="stylesheet" type="text/css" />
    <link href="jquery.validate.password.css" rel="stylesheet" type="text/css" />
    <script src="JS/jquery.js" type="text/javascript"></script>
    <script src="JS/jquery.validate.js" type="text/javascript"></script>
    <script src="JS/jquery.validate.password.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    
    
     $(document).ready(function() {
         // validate signup form on keyup and submit
         var validator = $("#divCreateNewUser").validate({
             rules: {
                 username: {
                     required: true,
                     minlength: 2
                 },
                 txtPassword: {
                     password: "#username"
                 },
                 password_confirm: {
                     required: true,
                     equalTo: "#password"
                 },
                 location: {
                     required: true
                 }
             },
             messages: {
                 username: {
                     required: "Enter a username",
                     minlength: jQuery.format("Enter at least {0} characters")
                 },
                 password_confirm: {
                     required: "Repeat your password",
                     minlength: jQuery.format("Enter at least {0} characters"),
                     equalTo: "Enter the same password as above"
                 },
                 location: {
                     required: "Enter a Location"
                 }
             },
             // the errorPlacement has to take the table layout into account
             errorPlacement: function(error, element) {
                 error.prependTo(element.parent().next());
             },
             // set this class to error-labels to indicate valid fields
             success: function(label) {
                 // set &nbsp; as text for IE
                 label.html("&nbsp;").addClass("checked");
             }
         });
     });
</script>

<body>
    <form id="signupform1" runat="server">
    <div id="signupwrap" runat="server">
    <table align="center">
    <tr>
    <td></td>
    <td><b>User Registration</b></td>
    <td></td>
    </tr>
    <tr>
    <td align="right" class="label">UserName:</td>
    <td  class="field"><asp:TextBox ID="username" runat="server"/></td>
     <td class="status"></td>
    </tr>
    <tr>
    <td  align="right" class="label">Password:</td>
    <td  class="field"><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/></td>
     <td class="status" align="left">
     <div class="password-meter">
        <div class="password-meter-message">&nbsp;</div>
        <div class="password-meter-bg">
         <div class="password-meter-bar"></div>
        </div>
       </div>
     </td>
    </tr>
    <tr><td align="right" class="label">Confirm Password:</td>
    <td  class="field"><asp:TextBox ID="password_confirm" runat="server" TextMode="Password"/></td>
     <td class="status"></td>
    </tr>
   <tr>
    <td align="right" class="label">Location:</td>
    <td  class="field"><asp:TextBox ID="location" runat="server"/></td>
     <td class="status"></td>
    </tr>
    <tr>
    <td></td>
    <td><asp:Button ID="btnSubmit" Text="Submit" runat="server" 
            onclick="btnSubmit_Click" /></td>
     <td></td>
    </tr>
    <tr>
    <td colspan="3" height="20px">
    </td>
    </tr>
    <tr>
    <td></td>
    <td colspan="2">
    
        <table>
   <tr>
   <td>UserName:</td>
   <td><asp:Label ID="lbluser" runat="server"/></td>
   </tr>
   <tr>
   <td>Password:</td>
   <td><asp:Label ID="lblPwd" runat="server"/></td>
   </tr>
    <tr>
   <td>Location:</td>
   <td><asp:Label ID="lblLocation" runat="server"/></td>
   </tr>
    </table>
    </td>
    
    </tr>
    </table>
    </div>
    </form>
</body>

download: click here to download the source code for jquery password strength indicator.

Out-put of the above code 

Read more ...

A script that used to add two textbox values using jQuery:

This is the sample code for add two textbox values and display in one text box buy using jquery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {

            var textBox1 = $('input:text[id$=TextBox1]').keyup(foo);

            var textBox2 = $('input:text[id$=TextBox2]').keyup(foo);      

            function foo() {

                var value1 = textBox1.val();

                var value2 = textBox2.val();              

                var sum = add(value1, value2);

                $('input:text[id$=TextBox3]').val(sum);

            }

            function add() {

                var sum = 0;

                for (var i = 0, j = arguments.length; i < j; i++) {

                    if (IsNumeric(arguments[i])) {

                        sum += parseFloat(arguments[i]);

                    }

                }
                return sum;
            }
            function IsNumeric(input) {

                return (input - 0) == input && input.length > 0;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td>Butter</td>
        <td> <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Cheese</td>
        <td> 
    <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>Total</td>
        <td>
    <asp:TextBox runat="server" ID="TextBox3"></asp:TextBox>
        </td>
    </tr>
    </table> 
    </div>    </form>
</body>
</html>

Output:

Read more ...