Asp Net, C#.Net and VB.Net Code Examples, Sql Server Examples and Tutorials for All Technologies: JQuery

Showing posts with label JQuery. Show all posts

Thursday, 4 December 2014

Call web method from page using jquery and ajax without postback

Introduction: In this article I will show you how to call webmethod from aspx page using jquery
and ajax without postback.

Description: Call webmethod from aspx page using jquery and ajax without postback.

In Aspx Page:

<head runat="server">
    <title></title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowTime() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/GetTime",
        data: '{name: "' + $("#<%=txtName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>
</head>
<body style = "font-family:Arial; font-size:10pt">
<form id="form1" runat="server">
<div>
Your Name :
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>
</form>
</body>

In Code Behind:

[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}

Sunday, 19 October 2014

Dialog Boxes in JavaScript(Alert, Prompt, Confirm)

Alert Dialog Box:
Alert dialog box is used to give alert on validation or other condition.

<head>
<script type="text/javascript">
<!--
   alert("Please enter value");
//-->
</script>
</head>

Confirm Dialog box:

This box is used to confirm for any condition

<head>
<script type="text/javascript">
<!--
   var result= confirm("Are you sure to delete?");
   if( result== true ){
      alert("User wants to delete!");
   return true;
   }else{
      alert("User does not want to delete!");
   return false;
   }
//-->
</script>
</head>

Prompt Dialog Box:

This prompt dialog box is used to get user input on text box.

<head>
<script type="text/javascript">
<!--
   var result= prompt("please enter your name : ", "enter your name here");
   alert("You have entered : " +  result);
//-->
</script>
</head>

Page Redirection in JavaScript

How Page Redirection Works?

<head>
<script type="text/javascript">
<!--
   window.location="http://www.yourlocation.com";
//-->
</script>
</head>

In this examples you can set the time after that you can redirect to your location

<head>
<script type="text/javascript">
<!--
function RedirectToPage()
{
    window.location="http://www.yourlocation.com";
}

document.write("You will be redirected to yourlocation in 10 sec.");
setTimeout('RedirectToPage()', 10000);
//-->
</script>
</head>

In this example you can get the browser and redirect to perticular url based on

browser type

<head>
<script type="text/javascript">
<!--
var browser=navigator.appName; 
if( browser== "Netscape" )
{ 
   window.location="http://www.yourlocation.com/ns.htm";
}
else if ( browser=="Microsoft Internet Explorer")
{
   window.location="http://www.yourlocation.com/ie.htm";
}
else
{
  window.location="http://www.yourlocation.com/other.htm";
}
//-->
</script>
</head>

Saturday, 18 October 2014

Call JavaScript Function on Button Click Event

Create a function Named HelloWorld and call that function on button click event

 <html>
<head>
<script type="text/javascript">
<!--
function HelloWorld() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="HelloWorld()" value="Click Here" />
</body>
</html>

JavaScript Functions

Function Example

<script type="text/javascript">
<!--
function Hello()
{
   alert("Hello");
}
//-->
</script>

Parameterized Function Examples

<script type="text/javascript">
<!--
function FullName(FirstName,LastName)
{
   alert(FirstName + " " + LastName);
}
//-->
</script>

Function Return

<script type="text/javascript">
<!--
function FullName(FirstName,LastName)
{
   return (FirstName + " " + LastName);
}
//-->
</script>

Friday, 17 October 2014

For loop in JavaScript

For Loop:

<script type="text/javascript">
<!--
var counter;
document.write("Loop Starts" + "<br />");
for(counter= 0; counter< 10; counter++){
  document.write("Current counter: " + counter);
  document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>

This script will produce the below result 
Loop Starts
Current counter: 0
Current counter: 1
Current counter: 2
Current counter: 3
Current counter: 4
Current counter: 5
Current counter: 6
Current counter: 7
Current counter: 8
Current counter: 9
Loop stopped!

While loop in JavaScript

While loop works until the condition is true

<script type="text/javascript">
<!--
var counter = 0;
document.write("Loop Starts" + "<br />");
while (count < 5){
  document.write("Counter : " + counter + "<br />");
  count++;
}
document.write("Loop Ends!");
//-->
</script>

Thursday, 16 October 2014

Switch Case in JavaScript

<script type="text/javascript">
<!--
var result='A';
document.write("I am entering in switch block<br />");
switch (grade)
{
  case 'A': document.write("Good<br />");
            break;
  case 'B': document.write("Pretty<br />");
            break;
  case 'C': document.write("Passed<br />");
            break;
  case 'D': document.write("Not so<br />");
            break;
  case 'F': document.write("Failed<br />");
            break;
  default:  document.write("NA<br />")
}
document.write("I am Exiting from switch block");
//-->
</script>

This will produce the following result:

I am entering in switch block
Good
I am Exiting from switch block

if you do not use Break

<script type="text/javascript">
<!--
var result='A';
document.write("I am entering in switch block<br />");
switch (grade)
{
  case 'A': document.write("Good<br />");            
  case 'B': document.write("Pretty<br />");            
  case 'C': document.write("Passed<br />");            
  case 'D': document.write("Not so<br />");            
  case 'F': document.write("Failed<br />");            
  default:  document.write("NA<br />")
}
document.write("I am Exiting from switch block");
//-->
</script>

This will produce the following Result:

 
I am entering in switch block

Good 
Pretty

Passed 
Not so

Failed 
NA

I am Exiting from switch block

JavaScript If ...... else Statements

Syntax for IF Statement

<script type="text/javascript">
<!--
var result= 20;
if( result> 18 ){
   document.write("<b>Result is greater than 18</b>");
}
//-->
</script>

Syntax for IF Else Statement

<script type="text/javascript">
var result= 20;
if( result> 18 ){
   document.write("<b>Result is greater than 18</b>");
}

else

   document.write("<b>Result is less than 18</b>");
} 
</script>

Syntax for IF...Else..IF Statement

<script type="text/javascript">
var result= 20;
if( result> 18 ){
   document.write("<b>Result is greater than 18</b>");
}

else if(result==18)

  document.write("<b>Result is equal to 18</b>");

else

  document.write("<b>Result is less than 18</b>");

} 
</script>

Friday, 10 October 2014

Comments in Java Script

There are single line comment and multiline comment in JavaScript

<script type="text/javascript">
    // This is a single line comment in Javascript.

    /*
     This is a multiline comment in JavaScript
     */
        var result = 10;
        document.write(result)
    </script>

Declare Variables in Javascript

Here you can see that we have declare a variable result and assign value to that.

<script type="text/javascript">
        var result = 10;
        document.write(result)
    </script>

Friday, 26 September 2014

Javascript function to select all checkboxes from gridview header checkbox

Javascript to validate Textbox and Dropdownlist on submit in ASP .Net