Vijay Negi: Jquery

Showing posts with label Jquery. Show all posts

Friday, 10 February 2012

Javascript Value To Asp.net Page

Accessing HTML control/Javascript Function Value In Asp.net Page

Some time situation comes where some Javascript effect/jquery or css make work on html control but not in .net control.
then what to do?Here is the solution to make html control interaction with asp.net control.So that there value can easily access by your asp.net control.

In Normal Cases

Just Make Input Text(html control) runat="server".

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Now If You Want To transffer Text1 Value To Label1 Just Do This In Your C# Code(In Any Event)

Label1.Text = Text1.Value;

But SomeTime We Have Fuctions Where We Have Value In Cloud And We Have To Catch Then On Fly.

------------------------------------------------------------------------------------------------------------------

So Here We Start...

Let say you've a html textbox with name txtbox and it has some value...so first thing is we have to save its value to a variable name it C.So that we are sure that the txtbox value is now in a variable and we can pass it to any one.

Next thing is ASP.NET has a control name hiddenControl ,just drag it in your design Page(Because Its Behave As A Mediator Between Html & .Net Control Easily) And finaly.just put that C value in hiddencontrol1

html Control----->var C----------->HiddenControl----->Now Value Is In Your ASP Page!

In HTML

For An Instance Lets Say You Are Firing An Client Side Event(javascript function) Like Below....

<html>

function yourown()

{

var C=document.getElementById("txtbox").value;

document.getElementById('<%=HiddenField1.ClientID%>').value=C;

return true;

}
</script>

</html>

In C#

Now Understand The Below Code Where We Are Storing final Value Under HiddenField1 To A string In C# Page

String S=HiddenField1.Value;

Response.Write(S);//Show On Screen

//OR

Label1.Text=S; //Show On Label

Friday, 20 January 2012

JQuery Basic Tutorial

Basic tutorial of JQuery

As The Logo Itself Suggest 'Write less do more'

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming

So Proceeding Further One Should Have Clear Basics Of Javascript

A Quick Look To An Example Of JQUERY

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>This Portion Visible Only When You Click Show Button.</p>
<p>Its a basic sample,if you understand it you can explore yourself with jquery in any style.</p>
</div>

<p class="flip">Show Panel</p>

</body>
</html>
-------------------------------------------------------------------------------------------------------
You Often See Such Kind Of Code In JQuery Coding Part.If You Didn't Understand What they Actual Means Then You Browse Right Page To Find Out The Solution.

So Lets Start With Very Basic Things.

JQuery has many basic syntax as we use few in above example you should know what they mean!

1)Basic syntax is: $(selector).action()

A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides current element

$("p").hide() - hides all paragraphs

$("p.test").hide() - hides all paragraphs with class="test"

$("#test").hide() - hides the element with id="test"

2)Now You Are Ready To Understand A Very Basic JQuery Implementation Programming.

Look At The Image Below And Take An Observation.

Saturday, 19 November 2011

Quick tip Jquery validation For ASP.net Controls

JQUERY VALIDATION FOR ASP.NET CONTROLS

Jquery Blank Field Validation

if(document.getElementById("<%=CompanyNameTextBox.ClientID %>").value=="")

{

alert("Please Enter Company Name");

document.getElementById("<%=CompanyNameTextBox.ClientID %>").focus();

return false;

}

Jquery Contact No Validation

<asp:TextBox ID="ContactNoTextBox" runat="server" onkeypress="return chklen(this);"></asp:TextBox></td>

function chknum3()

{

if((event.keyCode >=48 )&&(event.keyCode<=57))

{

alert("Branch Name Should Be In Character..");

return false;

}

else

{

return true ;

}

Jquery Number Length Validation

function chklen(id)

{

if (id.value.length <11)

{

return chknum();

}

else

{

alert("Mobile Number Length should not be greater than 11 Digits::::");

return false;

}

Jquery Email Validation

if(document.getElementById("<%=EmailTextBox.ClientID%>").value=="")

{

alert("Please Enter EMail Id....")

return false;

}

else

{

var at="@"

var dot="."

var str=document.getElementById("<%=EmailTextBox.ClientID%>").value;

var lstr=str.length;

var lat=str.indexOf(at);

var ldot=str.indexOf(dot);

var pat=/^.+@.+\..{2,3}$/;

if(str.indexOf(at)==-1 ||str.indexOf(at)==0 ||str.indexOf(at)==lstr)

{

alert("Invalid Email Id.. Please Try Again..")

return false;

}

if(str.indexOf(dot)==-1||str.indexOf(dot)==0||str.indexOf(dot)==lstr )

{

alert("Invalid Email Id.. Please Try Again..")

return false;

}

Jquery Delete/Confirmation:

function del()

{

if(confirm("Are You Sure?")==true)

{return true;

}

else

{

return false;

}

onclientclick="return del()";

Jquery ToolTip:

// Create the tooltips only on document load

$(document).ready(function()

{

// Notice the use of the each() method to acquire access to each elements attributes

$('.show-tooltip').each(function()

{

$(this).qtip({

content: 'be a good one', // Use the tooltip attribute of the element for the content

style: 'dark' // Give it a crea mstyle to make it stand out

});

</script>

Jquery Hide and Show via flipping:

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

});

</script>

p.flip

{

margin:0px;

padding:5px;

text-align:center;

border:solid 1px #c3c3c3;

}

div.panel

{

height:163px;

width: 1268px;

display:none;

<%--optional to fill color--%>background-color:Lime;

}

</style>

<div class="panel">Anything</div>

Jquery Hide and Show via flipping:

SHORT WINDOW OPEN CLOSE

function closepopup()

{

window.close();

}</script>

on cs.file................................................

string scrname;

scrname = @"<SCRIPT language='javascript'> closepopup();" + "</SCRIPT>";

this.RegisterStartupScript("MyAlert", scrname);

Jquery open window pop up

<!--

function popup(url)

{

var width = 500;

var height = 270;

var left = (screen.width - width)/2;

var top = (screen.height - height)/2;

var params = 'width='+width+', height='+height;

params += ', top='+top+', left='+left;

params += ', directories=no';

params += ', location=no';

params += ', menubar=no';

params += ', resizable=no';

params += ', scrollbars=no';

params += ', status=no';

params += ', toolbar=no';

newwin=window.open(url,'windowname5', params);

if (window.focus) {newwin.focus()}

return false;

}

// -->

</script>

<a href="javascript: void(0)"

onclick="popup('addexam1.aspx')">click here to view</a>

Vijay Negi

Friday, 10 February 2012

Javascript Value To Asp.net Page

Friday, 20 January 2012

JQuery Basic Tutorial

Saturday, 19 November 2011

Quick tip Jquery validation For ASP.net Controls

Print Only Grid View in ASP.net

Pages

Search This Blog