<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Page</title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<style type="text/css">
.mandatory
{
border: solid 1px red;
}
</style>
<script type="text/javascript">
function CallThis()
{
var mandatorys = $('#tableid').find('.mandatory');
var allFieldsComplete = true;
mandatorys.each(function(index) {
if (this.value.length == 0) {
$(this).addClass('mandatory');
allFieldsComplete = false;
} else {
//alert(this.value);
$(this).removeClass('mandatory');
}
});
if(!allFieldsComplete){
$('#dispMsg').html('Mandatory fields to be entered');
}
return allFieldsComplete;
}
</script>
</head>
<body>
<table id="tableid" border="1" class="tableid">
<tr> <td>
<input type="text" class="mandatory" />
</td> <td>
<input type="text" class="mandatory" />
</td> </tr>
<tr> <td>
<input type="text" class="mandatory" />
</td>
<td><input type="text" class="mandatory" />
</td> </tr> </table>
<div id="dispMsg" style="color:Red;"></div>
<input type="button" class="txtbox" value="Validate" onclick="javascript:CallThis();" />
</body>
</html>
Friday, December 31, 2010
JQuery: Validate all the controls in the rows of a table
Validating all the controls of each row of a TABLE element can be done at clientside using jQuery.
Wednesday, December 29, 2010
How to make ASP.Net Server side Calls from JQuery
Here Comes the WebService.
Dont forget to add the Namespace: System.Web.Script.Services. (Comes with AJAX Extensions).
(You may face problem while making the server call if the Website you built is not an Ajax Enabled Website.)
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ThisService : System.Web.Services.WebService
{
public ThisService()
{
//InitializeComponent();
}
[WebMethod]
public string HelloWorld(string dlaID)
{
return "Hello World";
}
}
Now the .aspx page with Markup.
Download the latest JQuery file and add to your project and refer.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQServiceCall.aspx.cs" Inherits="JQServiceCall" %>
<!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>JQuery ASP.Net Page</title>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(
function() {
var ID = '49214';
$.ajax({
type:"POST",
url:"ThisService.asmx/HelloWorld",
dataType:"json",
// data: "{}",
data:'{"dlaID":' + ID + '}',
contentType:"application/json; charset=utf-8",
success:function(msg) {
if (msg != null) {alert(msg);}
else {alert('My Message!');
}},
error:
function(xhr) {if (xhr != null) {alert("Error occured \n" + xhr.responseText);}}
});});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<font color="#000000">User Name :
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<span id="status"></span></font>
<div>
</div>
</form>
</body>
</html>
Subscribe to:
Posts (Atom)