Hi *,
Again just floating over jquery. Last day we had a GD across me , TL and PM to populate redefine some grids which take a more than 3 sec to load, Unfortunately that task is assigned to me :( ,My pockets are already full.
I remember moo (Manoj sharma, Who interviewed me first in .net, ha ha Can't forgot that moments)when i was 1 yr experience he told me too achieve a functionality searchable grid without postback.I was fully new to JavaScript and not even heard about jquery. My answer was i can't, i got support from another senior that it can achieve only in jsp pages.Now it AGAIN BACK TO ME !!! At this time i can.Thank God.
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Import Namespace="System.Web.Services" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<style type="text/css">
.hide
{
display:none;
}
</style>
<script type="text/javascript">
var condition;
function dbind(condition) {
$('#Dname').empty(); // Making div empty
$('#Clicked').html(""); // Making div empty
$('#DivDetails').empty(); // Making div empty
$('#DivChkID').empty(); // Making div empty
//$('#DivChecked').addClass('hide');
if (condition == "") {
WebService.AllValues(result); // Connecting server for, pageload binding
}
else {
WebService.AllValues(Filterresult); //Connecting server for, Filter data binding
}
}
function Filterresult(ResultValue) { // Getting data from server
condition = $('#txtName').val(); // Current textbox value
var values = ResultValue.split(','); // Split occuring here
var count = values.length; // Total array lenght
var html = ''; // Declare a variable with NO data
var Countfound = 0; // Declare a variable with value 0
for (var i = 0; i < count; i++) { // loop to pick each name in the array
var bool = values[i].search(condition); // searching letter in the current name, if not found, -1 is the output
if (bool != "-1") { // -1 means no match or else word is found :). Its verifing here
Countfound++; // getting count here
html = html + '<p><input type="checkbox" name="name" onclick=CheckedEvent(' + values[i] + ') /><input type="radio" id=' + values[i] + ' onclick=Radioclickevent(' + values[i] + ') name="Name" /><label id=' + values[i] + ' onclick=clickevent(' + values[i] + ') >' + values[i] + ' </label></p>';
}
}
var Display = (Countfound == 0) ? "No Result Found" : Countfound + " result found"; // Checking condition how much found
$('#Dname').append(html); // adding names to html
$('#count').html(Display); //displaying count here
$('#count').animate({ backgroundColor: "#FFFF99" }, 10);
$('#count').animate({ backgroundColor: "white" }, 1000);
$('#Dname').animate({ backgroundColor: "#FFFF99" }, 10);
$('#Dname').animate({ backgroundColor: "white" }, 1000);
}
function result(ResultValue) {
var values = ResultValue.split(',');
var count = values.length;
var html = '';
var Countfound = 0;
for (var i = 0; i < count; i++) {
Countfound++;
html = html + '<p><input type="checkbox" name="name" onclick=CheckedEvent(' + values[i] + ') /><input type="radio" id=' + values[i] + ' onclick=Radioclickevent(' + values[i] + ') name="Name" /><label id=' + values[i] + ' onclick=clickevent(' + values[i] + ') >' + values[i] + ' </label></p>';
}
var Display = (Countfound == 0) ? "No Result Found" : Countfound + " result found";
$('#count').html(Display);
$('#Dname').append(html);
$('#count').animate({ backgroundColor: "#FFFF99" }, 10);
$('#count').animate({ backgroundColor: "white" }, 1000);
$('#Dname').animate({ backgroundColor: "#FFFF99" }, 10);
$('#Dname').animate({ backgroundColor: "white" }, 1000);
}
function clickevent(name) { // text click event
// $('#Clicked').html("Text u had Clicked : " + name.innerHTML); // Incase of no radio button
$('#Clicked').html("Text u had Clicked : " + name.id);
$('#Clicked').animate({ backgroundColor: "#FFFF99" }, 10);
$('#Clicked').animate({ backgroundColor: "white" }, 1000);
WebService.filterdata(name.innerHTML, details);
}
function details(ResultValue) { //fetching details here
var values = ResultValue.split(',');
var content = "<b>Address :</b>" + values[0] + "</br><b> Post ofice :</b>" + values[1] + "</br><b> City :</b>" + values[2] + "</br><b> State :</b>" + values[3] + "</br><b> Country :</b>" + values[4];
$('#DivDetails').html(content);
$('#DivDetails').animate({ backgroundColor: "#FFFF99" }, 10);
$('#DivDetails').animate({ backgroundColor: "white" }, 1000);
}
function Radioclickevent(name) { // radiobutton click event
$('#Clicked').html("Radio button u had clicked : " + name.id);
$('#Clicked').animate({ backgroundColor: "#FFFF99" }, 10);
$('#Clicked').animate({ backgroundColor: "white" }, 1000);
WebService.filterdata(name.innerHTML, details);
}
function CheckedEvent(name) {
var s = $('#DivChkID').text();
$('#DivChecked').removeClass('hide');
if (s == '') {
$('#DivChkID').empty();
$('#DivChkID').html(name.id);
$('#DivChkID').animate({ backgroundColor: "#FFFF99" }, 10);
$('#DivChkID').animate({ backgroundColor: "white" }, 1000);
}
else {
var bool = s.search(name.id);
if (bool == -1) {
$('#DivChkID').html(s + ',' + name.id);
$('#DivChkID').animate({ backgroundColor: "#FFFF99" }, 10);
$('#DivChkID').animate({ backgroundColor: "white" }, 1000);
}
else {
var strng = $('#DivChkID').text();
var rep = name.id + ',';
$('#DivChkID').html(strng.replace(rep, ''));
$('#DivChkID').html(strng.replace(name.id, ''));
strng = '';
strng = $('#DivChkID').text();
var d = strng.split(',');
//debugger;
for (var i = 1; i < d.length; i++) {
if (d[i] == '') {
d.splice($.inArray(d[i], d), i);
}
}
strng = d.join();
var data = (strng.substring(strng.length - 1, strng.length) == ',') ? strng.substring(0, strng.length - 1) : strng;
var data = (data.substring(0, 1) == ',') ? data.substring(1, data.length) : data;
$('#DivChkID').html(data);
$('#DivChkID').animate({ backgroundColor: "#FFFF99" }, 10);
$('#DivChkID').animate({ backgroundColor: "white" }, 1000);
if ($('#DivChkID').text() == '') {
$('#DivChecked').addClass('hide');
}
else {
$('#DivChecked').removeClass('hide');
}
}
}
}
</script>
</head>
<body onload="dbind('');">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxFolder/WebService.asmx" />
</Services>
</asp:ScriptManager>
Search : <asp:TextBox ID="txtName" onkeyup="dbind(this.value)" runat="server"></asp:TextBox> (Case
sensitive) <br />
<label id="count">
</label>
<br />
<label id="Clicked">
</label>
<br />
<div id="DivDetails" style="width: 200px;">
</div>
<div id="DivChecked" class="hide">
Radio button clicked :
<div id="DivChkID">
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="Dname" style="width: 100px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
I had given explanation on the code itself by commenting after it. I had a Demo too
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment