jquery Client Side validation - javascript

I am trying to validater my .aspx form using jQuery Validate plugin. I have written the function for the validation with the rules for checking and messages for showing the error messages.
But even after adding all the necessary plugins and function calls, my form is not getting validated.
Can anyone please guide me if am wrong somewhere.
I am attaching the .aspx code below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script>
//$(function () {
$(document).ready(function () {
debugger;
$("#form1").validate({
rules: {
lblName: "required",
lblCity: "required",
lblDepName: "required",
lblSalary: {
required: true,
number: true
},
},
// Specify the validation error messages
messages: {
lblName: "Please enter your Name",
lblCity: "Please enter your City",
lblDepName: "Please select a department Name from the dropdown list",
lblSalary: {
required: "Please enter the Salary",
number: "Only Numbers are allowed"
}
},
submitHandler: function (form) {
form.submit();
}
});
$('#btnInsertEmployee').click(function () {
debugger;
if ($("#form1").validate()) {
}
});
//});
});
</script>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
}
.auto-style3 {
width: 146px;
height: 26px;
}
.auto-style4 {
height: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowEditing="GridView1_RowEditing">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td class="auto-style4">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" OnSelectedIndexChanged="ddlDepName_SelectedIndexChanged" Width="122px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" />
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>
</html>


Instead of lblName or lblCity, it should be txtName or txtCity.
rules: {
txtName: "required",
txtCity: "required",
},
// Specify the validation error messages
messages: {
txtName: "Please enter your Name",
txtCity: "Please enter your City",
},

Related

jquery IE uploadify object doesn't support property or method

I'm using tinymce and uploadify to create a email screen that allow the users to upload attachments.
It all worked well on chrome and on the IE 10 version I use.
However other versions of IE 10 and 11 it doesn't work as expected. Screen shrinks and it truncates the text.
Reading other similar errors suggested changing the jquery version 1.7.2
So I tried other versions but this caused the tinymce menu to vanish.
This appeared to be caused by the property live and I replaced this with on.
The menu returned.
However now I get fileupload object doesn't support property or method.
one suggestion is to replace </script> with /> but this only makes the tinymce menu vanish again.
Any ideas on how to get this code to run on IE without errors?
`<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm19.aspx.vb" Inherits="CaseManagementTest.WebForm19" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
TD { FONT: 12pt verdana }
.style9
{
width: 146px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js" ></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" ></script>
<script type="text/javascript" src="Scripts/jquery.uploadify.js" ></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("#btnLookup").on("click", function () {
$("#popup").dialog({
title: "Email Address",
Width: 600
})
return false;
});
tinymce.init({
selector: ".tinymce",
theme: "modern",
menubar: false,
resize: false,
statusbar: false,
plugins: ["advlist autolink lists charmap preview hr anchor",
"pagebreak code nonbreaking table contextmenu directionality paste"],
toolbar1: "styleselect | bold italic underline | pagebreak code preview | undo redo",
toolbar2: "fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent"
});
</script>
<script type="text/javascript">
$(function () {
$("[id*=FileUpload1x]").FileUpload ( {
'uploader': 'scripts/uploader.swf',
'cancelImg': 'Content/themes/base/images/cancel.png',
'buttonText': 'Attach Files',
'script': 'UploadVB.ashx',
'folder': 'uploads',
'multi': true,
'auto': true,
'scriptData': { key: '<%=Key %>' },
'onSelect': function (event, ID, file) {
$('#btnSendx0').prop('disabled', true)
$("#attachedfiles tr").each(function () {
if ($("td", this).eq(0).html() == file.name) {
alert(file.name + " already uploaded.");
$('#btnSendx0').prop('disabled', false);
$("[id*=FileUpload1x]").fileUploadCancel(ID);
return;
}
});
},
'onComplete': function (event, ID, file, response, data) {
$('#btnSendx0').prop('disabled', false);
$("#attachedfiles").append("<tr><td>" + file.name + "</td><td><a href = 'javascript:;'>[x]</a></td></tr>");
}
});
});
$("#attachedfiles a").on("click", function () {
var row = $(this).closest("tr");
var fileName = $("td", row).eq(0).html();
$.ajax({
type: "POST",
url: "VB.aspx/RemoveFile",
data: '{fileName: "' + fileName + '", key: "<%=Key %>" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { },
failure: function (response) {
alert(response.d);
}
});
row.remove();
});
$(function () {
$("[id*=button1]").click(function () {
ShowPopup();
return false;
});
});
function ShowPopup() {
$("#dialog").dialog({
title: "Email Addresses",
width: 650,
buttons: {
Exit: function () {
$(this).dialog('close');
}
},
modal: true
});
}
</script>
<script type="text/javascript">
function CloseWindow() {
window.close();
window.opener.location = window.opener.window.location;
}
</script>
<body >
<form id="form1" runat="server">
<div id="dialog" style="display: none">
<asp:Label ID="lbl1" Text="Selected" runat="server" ></asp:Label>
<asp:TextBox id="selectedEmail" runat="server" Width="600px" ></asp:TextBox>
<asp:GridView ID="GridView1" runat="server" Width="600px" AutoGenerateColumns="false" OnSelectedIndexChanged = "OnSelectedIndexChanged" OnPageIndexChanging="OnPageIndexChanging"
PageSize="10" AllowPaging="true">
<Columns>
<asp:BoundField DataField="cn" HeaderText="Name" />
<asp:BoundField DataField="telephoneNumber" HeaderText="Tele" />
<asp:BoundField DataField="mail" HeaderText="Email" />
<asp:ButtonField Text="Select" CommandName="Select" />
</Columns>
</asp:GridView>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" style = "display:none" />
<center>
<div style="FONT:700 20pt arial; COLOR:navy">Email</div>
<hr/>
<div>
<table border = "0" style="width: 409px">
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Email*"></asp:Label><br />
</td>
<td align="left" colspan="4">
<asp:TextBox ID="txtEmail" runat="server" TextMode="MultiLine" Width="600px" ></asp:TextBox><br />
<asp:RegularExpressionValidator id="valRegEx" runat="server" ValidationGroup="contactX"
ControlToValidate="txtEmail"
ValidationExpression=".*#.*\..*"
ErrorMessage="*Invalid Email address."
display="dynamic">
</asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ValidationGroup="contactX" ErrorMessage="* Required"
ControlToValidate = "txtEmail"></asp:RequiredFieldValidator>
</td>
</tr>
<tr><td></td>
<td align="left"><asp:TextBox ID="lookup" runat="server" />
<asp:Button ID="Button2" runat="server" Text="lookUp" ValidationGroup="look" OnClick="btnlookup_Click"/>
<asp:RegularExpressionValidator id="RegularExpressionValidator3" runat="server" ValidationGroup="look"
ControlToValidate="lookup"
ValidationExpression="^[a-zA-z]{2,100}$"
ErrorMessage="* ."
display="dynamic">
</asp:RegularExpressionValidator>
</td>
<td><asp:TextBox ID="email_or_cc" runat="server" Visible="false" /></td>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="CC*"></asp:Label><br />
</td>
<td align="left" colspan="4">
<asp:TextBox ID="txtcc" runat="server" TextMode="MultiLine" Width="600px" ></asp:TextBox><br />
<asp:RegularExpressionValidator id="RegularExpressionValidator2" runat="server" ValidationGroup="contactX"
ControlToValidate="txtcc"
ValidationExpression=".*#.*\..*"
ErrorMessage="*Invalid Email address."
display="dynamic">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr><td></td>
<td align="left"><asp:TextBox ID="ccemail" runat="server" />
<asp:Button ID="Button3" runat="server" Text="CC lookUp" ValidationGroup="look" OnClick="btnlookup_ClickX"/>
<asp:RegularExpressionValidator id="RegularExpressionValidator1" runat="server" ValidationGroup="look"
ControlToValidate="lookup"
ValidationExpression="^[a-zA-z]{2,100}$"
ErrorMessage="* ."
display="dynamic">
</asp:RegularExpressionValidator>
</td>
<tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Subject*"></asp:Label><br />
</td>
<td align="left" colspan="4">
<asp:TextBox ID="txtSubject" runat="server" Width="600px" ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ValidationGroup="contactX" ErrorMessage="* Required"
ControlToValidate = "txtSubject"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td valign = "top" class="style9" >
<asp:Label ID="Label4" runat="server" Text="Body*"></asp:Label>
</td>
<td class="style9" colspan="4">
<asp:TextBox ID="txtBody" runat="server" CssClass="tinymce" TextMode = "MultiLine" Height="355px" Width="600px" ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ValidationGroup="contactX" ErrorMessage="* Required"
ControlToValidate = "txtBody"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td></td>
<td colspan="4">
<asp:FileUpload ID="FileUpload1x" AllowMultiple="true" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<table id = "attachedfiles">
</table>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="btnSendx0" runat="server" Text="Send" ValidationGroup="contactX" onClientClick="tinyMCE.triggerSave(false,true)" OnClick="btnSend_Click" />
<asp:Button ID="btnBack" Text="Back" runat="server" OnClientClick="CloseWindow()" ValidationGroup="contactX" CausesValidation="false" />
</td>
<td>
</td>
</tr>
<tr>
<td></td>
<td colspan="4">
<asp:Label ID="lblMessage" runat="server" Text="" ForeColor = "Green"></asp:Label>
</td>
</tr>
</table>
</div>
<asp:TextBox ID="txtName" Visible="false" ReadOnly="true" runat="server" ValidationGroup="contactX" ></asp:TextBox>
</center>
<center>
</center>
</form>
</body>
</html>
`

Javascript could show hidden div

What needed to achieve is by clicking the preview button (ASP button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed.
In the .aspx
<style>
#PreviewSection {display:none;}
</style>
in the script, (edited to point to btPreview, but still not working... )
<script type="text/javascript">
var previewbt = document.getElementById('btPreview');
previewbt.addEventListener('click',function(){
PreviewSection.style.display = "block";
})
</script>
the html:
<div class ="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>
</asp:Content>

Probably this is what you want:
Edited to add your modification after my first post.
var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
PreviewSection.style.display = "block";
})
var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
PreviewSection.style.display = "none";
InputSection.style.display = "none";
})
var btPreview_Click = function() {
console.log('Do something else for Preview.');
};
var btSubmit_Click = function() {
console.log('Do something else for Submit.');
};
#PreviewSection {
display: none;
}
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>
This will be the solution for ASP:
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>

Display:none is misleading. Its not just not displayed, its not part of the page. So you cannot click on it. Use opacity:
#previewSection{
opacity:0;
}
Heres the right js:
<script type="text/javascript">
var previewsectionID = document.getElementById('PreviewSection');
previewsectionID.addEventListener('click',function(){
previewsectionID.style.opacity = 1; });
</script>

Check if All check box in Panel1 are checked to show a Panel2

I have 2 panels, of checkbox: In Panel1, if all checkbox are checked I need to show Panel2.
I have a HTML and a script but it's not working, I think that I'm missing somthing.
here is my code :
<body>
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text="Enter the Title"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question1" runat="server" Text="Question1"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox1" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question2" runat="server" Text="Question2"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox2" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question3" runat="server" Text="Question3"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox3" name="cb" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Question4" runat="server" Text="Question4"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox4" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<table>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</td>
</tr>
</table>
And this is my script but it's not working
$(document).ready(function () {
$('#CheckBox1').removeAttr('checked');
$('#CheckBox2').removeAttr('checked');
$('#CheckBox3').removeAttr('checked');
$('#CheckBox4').removeAttr('checked');
$('#Panel2').hide();
$('#Panel1').change(function () {
if (this.checked) {
$('#Panel2').show();
}
else {
$('#Panel2').hide();
}
});
});
Help please

Using jQuery you can compare the checked checkboxes vs all checkboxes inside Panel1 like this:
if($("#Panel1 input[type=checkbox]:checked").length === $("#Panel1 input[type=checkbox]").length){
$('#Panel2').show();
}else{
$('#Panel2').hide();
}

Ajax calls using JQuery

I am new to this ajax calls using jquery. I am trying to bind the values from the Database. I have a Data Access Layer from where the data is returned in a dataset. I am trying to bind this dataset to the gridview in my .aspx page. I have written ajax jquery calls in my .aspx page but I am getting an "undefined" error.
Please guide me where am going wrong.
My code is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script>
$(function () {
$("#form1").validate({
rules: {
txtName: "required",
txtCity: "required",
ddlDepName: "required",
txtSalary: {
required: true,
number: true
},
},
messages: {
txtName: "Please enter your Name",
txtCity: "Please enter your City",
ddlDepName: "Please select a department Name from the dropdown list",
txtSalary: {
required: "Please enter the Salary",
number: "Only Numbers are allowed"
}
},
submitHandler: function (form) {
form.submit();
}
});
$('#btnInsertEmployee').click(function () {
if ($("#form1").valid()) {
}
});
});
$(function () {
GetEmployees();
});
function GetEmployees() {
debugger;
$.ajax({
type: "POST",
url: "DataAccessLayer.cs/GetEmployees",
//data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("EmployeesList");
var row = $("[id*=GridView1] tr:last-child").clone(true);
$("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove();
$.each(EmployeesList, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("EmployeeId").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("City").text());
$("td", row).eq(2).html($(this).find("DepartmentId").text());
$("td", row).eq(2).html($(this).find("Salary").text());
$("[id*=GridView1]").append(row);
row = $("[id*=GridView1] tr:last-child").clone(true);
});
var pager = xml.find("Pager");
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: parseInt(pager.find("PageIndex").text()),
PageSize: parseInt(pager.find("PageSize").text()),
RecordCount: parseInt(pager.find("RecordCount").text())
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal" >
<AlternatingRowStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td class="auto-style4">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" Width="122px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" OnClientClick="return validate()" />
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
<asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Ensure your server is returning data: you have used 'POST' to 'GET' data...
DataAccessLayer.cs/GetEmployees is not a valid url. Either call a web page (.aspx), or call a web method, but you do not call a C# file (.cs) in the DAL from the browser...

Button is not working after I used jQuery Dialog

I want to make a registration form using jquery dialog but after I used jQuery Dialog and clicked the button to open the form the #btnsubmit Button doesn't work, before it's working can someone help me in my problem I have been trying to find the answer for like 2 days now and couldn't find the answer and I am newbie at all :P
js
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 630,
height: 630,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
html
<div id="dialog" title="Add/Edit User">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<div class="formrow">
<table>
<tr>
<td><label for="firstname">First Name</label></td>
<td><asp:TextBox ID="txfirstname" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rfvfirstname" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txfirstname" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="lastname">Last Name</label></td>
<td><asp:TextBox ID="txlastname" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvflastname" runat="server" ForeColor="Red" ErrorMessage="Required" Display="Dynamic" ControlToValidate="txlastname" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="address">Address</label></td>
<td><asp:TextBox ID="txaddress" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rfvaddress" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txaddress" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="age">Age</label></td>
<td><asp:TextBox ID="txage" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvfage" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txage" style="margin-left:20px" />
<asp:RegularExpressionValidator ID="revage" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Not Valid" ControlToValidate="txage" ValidationExpression="^[1-9]\d{0,2}$" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="mobile">Mobile #</label></td>
<td><asp:TextBox ID="txmobile" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvfmobile" runat="server" Display="Dynamic" ForeColor="Red" ErrorMessage="Required" ControlToValidate="txmobile" style="margin-left:20px" />
<asp:RegularExpressionValidator ID="revmobile" runat="server" ForeColor="Red" ErrorMessage="Not Valid" Display="Dynamic" ControlToValidate="txmobile" ValidationExpression="^\d{11}" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div id="btnc2">
<asp:Button ID="btnsubmit" runat="server" class="submitbtn" Text="Submit" onclick="btnsubmit_Click" style="margin-left: 10px" />
<asp:Button ID="btnreset" runat="server" class="submitbtn" Text="Reset"
style="margin-left: 30px" onclick="btnreset_Click" CausesValidation="false" />
</div></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Button Add New
<asp:Button ID="btnaddnew" runat="server" class="submitbtn" Text="Add New"
style="margin-left: 10px; margin-top: 10px" onclick="btnaddnew_Click" CausesValidation="false" />

You should use jQuery .on method to assign a click handler to the button element. Here is how the should look like:
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 630,
height: 630,
draggable: false,
resizable: false,
modal: true
});
$("#dialog").on('click', '#btnaddnew', function () {
$("#dialog").dialog("open");
return false;
});
});

Categories