Ayo Softech

Tuesday 6 January 2015

check all checkboxes and delete row in a table using JQuery

<html >
<head runat="server">
<title>check all checkboxes and delete row in a table</title>
<script src="jquery-1.7.min.js" type="text/javascript">
<script src="tables.js" type="text/javascript">
jQuery(document).ready(function(){
jQuery('.stdtablecb .checkall').click(function(){
var parentTable = jQuery(this).parents('table');
var ch = parentTable.find('tbody input[type=checkbox]');
if(jQuery(this).is(':checked')) {
//check all rows in table
ch.each(function(){
jQuery(this).attr('checked',true);
jQuery(this).parent().addClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').addClass('selected');
});
//check both table header and footer
parentTable.find('.checkall').each(function(){ jQuery(this).attr('checked',true); });
} else {
//uncheck all rows in table
ch.each(function(){
jQuery(this).attr('checked',false);
jQuery(this).parent().removeClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').removeClass('selected');
});
//uncheck both table header and footer
parentTable.find('.checkall').each(function(){ jQuery(this).attr('checked',false); });
}
});
// delete row in a table
if(jQuery('.deleterow').length > 0) {
jQuery('.deleterow').click(function(){
var conf = confirm('Continue delete?');
if(conf)
jQuery(this).parents('tr').fadeOut(function(){
jQuery(this).remove();
// do some other stuff here
});
return false;
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="stdtable stdtablecb" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col class="con0" style="width: 4%">
<col class="con1">
<col class="con0">
<col class="con1">
<col class="con0">
<col class="con1">
<col class="con0">
</colgroup>
<thead>
<tr>
<th class="head0">
<input class="checkall" type="checkbox">
</th>
<th class="head1">Rendering engine</th>
<th class="head0">Browser</th>
<th class="head1">Platform(s)</th>
<th class="head0">Engine version</th>
<th class="head1">CSS grade</th>
<td class="head0">Delete</td>
</tr>
</thead>
<tfoot>
<tr>
<th class="head0">
<input class="checkall" type="checkbox">
</th>
<th class="head1">Rendering engine</th>
<th class="head0">Browser</th>
<th class="head1">Platform(s)</th>
<th class="head0">Engine version</th>
<th class="head1">CSS grade</th>
<td class="head0">Delete</td>
</tr>
</tfoot>
<tbody>
<tr>
<td align="center">
<input type="checkbox">
</td>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="centeralign">
<a class="deleterow" href="#">X</a>
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox">
</td>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="centeralign">
<a class="deleterow" href="#">X</a>
</td>
</tr>

</tbody>
</table>
</div>
</form>
</body>
</html>

Bottom to Top scroll in html

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#back-to-top {
     position: fixed;
     bottom: 30px;
     top: 350px;
}
#back-to-top img{
    cursor:pointer;
}
</style>
<script language="javascript" src="jquery-1.10.2.js" type="text/javascript"></
script>
</head>
<body>
<h1>Back To Top</h1>

<p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p>
<div style="height:1000px"></div>
<span id="back-to-top"><img id="bus" src='bus.gif'/></span>
</body>
<script type="text/javascript">
        $(document).ready(function () {
            $("#back-to-top").hide();
            $(window).scroll(function () {
                if ($(window).scrollTop() > 200) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
              $('#back-to-top img').click(function () {  
               var body = $("body, html");
               body.animate({scrollTop :0}, '1500',function(){ });
            });
        });
    </script>
</html>

How to empty and fill SELECT box in jQuery

<script src="jquery-1.6.3.min.js" language="javascript" type="text/javascript"></
script>
<select name="myNum" Id="myNum" >
    <option value="0"><-- Select --></option>
</select>
<br/>
<input type="button" id="myadd" name="myadd" value="Add"/>
<script>
$(function(){
$("#myadd").click(function() {
        $('#myNum').empty();
        var i;
        for(i=0;i<=10;i++) {
               $('#myNum').append('<option value="' + i + '">' +i + '</option>');  
        }
    });
});
</script>

Google transliteration english to hindi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
            packages: "transliteration"
          });
function onLoad() {
    var options = {
        sourceLanguage:
                google.elements.
transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
    };
    // Create an instance on TransliterationControl with the required options.
    var control =new google.elements.transliteration.TransliterationControl(options);
    // Enable transliteration in the textbox with id 'transliterateTextarea'.
        control.makeTransliteratable(['firstName']);
        control.makeTransliteratable(['lastName']);
      }
      google.setOnLoadCallback(onLoad);
      </script>
</head>
<body>
<input type="text" autocomplete="OFF" class="tb4" id="firstName" name="firstName">
<input type="text" autocomplete="OFF" class="tb4" id="lastName" name="lastName">
</body>
</html>

Latitude Longitude in JavaScript by city

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></
script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function getLatLong() {
    var geocoder = new google.maps.Geocoder();
    var address = "New Delhi";//document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       latitude = results[0].geometry.location.lat();
       longitude = results[0].geometry.location.lng();
       //alert(results[0].geometry.location.lat());
       //alert(results[0].geometry.location.lng());
       $("#locInfo").html("latitude="+latitude+" longitude="+longitude);
      }  else {
      }
    });
}
getLatLong();
</script>
<div id="locInfo" ></div>

Load javascript file dynamic

How to Load javascript file dynamic by button click.

1) First create a javascript file "my_script.js" with below contents:

"my_script.js"
function ss(){
      alert("aa"); 
}

2) Create a test.html file with below contents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function my_dynamic_js(js_file_name) {
var head = document.getElementsByTagName("head")[0];
var sscript = document.createElement("script");
sscript.type = "text/javascript";
sscript.src = js_file_name;
head.appendChild(sscript);
}
</script>
</head>
<body>
<input type="button" value="load" onClick="my_dynamic_js('my_script.js')">
<input type="button" value="show" onClick="ss()">
</body>
</html>

3) now open test.html file and click on "load" button then after click on "show" button

Insert Data Into SQL Server Using jQuery in ASP.Net

Creating SQL Database Table
This database contains one table named test.
CREATE TABLE [dbo].[TestTable](
      [Name] [varchar](50) NULL,
      [Email] [varchar](100) NULL
)
Now press F5 to execute the script above that looks like this:
TestTable-in-SQLServer.jpg
.ASPX Page
Right-click your ASP.NET project then select "Add New Item" -> "New Page" and give it the name "Default.aspx" and add the following control into it:
Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET.jpg
Now click on the source tab and add the following code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>AutoComplete Box with jQuery</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
       <script type="text/javascript">
        $(document).ready(function () {
            $('#Button1').click(function () {
                $.ajax({
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    url: 'Default.aspx/InsertMethod',
                    data: "{'Name':'" + document.getElementById('txtUserName').value + "', 'Email':'" + document.getElementById('txtEmail').value + "'}",
                    async: false,
                    success: function (response) {                       
           $('#txtUserName').val('');
           $('#txtEmail').val('');
                        alert("Record Has been Saved in Database");
                    },
                    error: function ()
                    { console.log('there is some error'); }
                });
            });
        });      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="demo">
        <div class="ui-widget">
            <label for="tbAuto">
                Enter UserName:
            </label>
&nbsp;<asp:TextBox ID="txtUserName" runat="server" ClientIDMode="Static" Width="202px"></asp:TextBox>
            <br />
            <br />
            Email: <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static" Width="210px"></asp:TextBox>
            <br />
            <br />           
            <asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" />
        </div>
    </div>
    </form>
</body>
</html>

 Now double-click on the default form and add the following .cs file code:
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {     
    }
      
    [WebMethod]
    public static string InsertMethod(string Name, string Email) 
    {       
        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=TestDB;User ID=sa;Password=Micr0s0ft");
        {
            SqlCommand cmd = new SqlCommand("Insert into TestTable values('" + Name + "', '" + Email + "')", con);
            {
                con.Open();
                cmd.ExecuteNonQuery();
                return "True";
            }
        }
    }
}

Now run the application.
Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-1.jpg
Now enter the name and email into the corresponding TextBox.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-2.jpg
Now click on the Button control.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-3.jpg

Now open the SQL Server database and check it.

Insert-Data-into-SQL-Server-using-JQuery-in-ASP.NET-4.jpg