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>
`
Related
In Function when i use .checked then it stop working & generate below Error.
Currently im using Visual Studio 2015.Please Help
function GenderValidation(sender , e)
{
var male = document.getElementById('RadioButton_male').Checked;
var female = document.getElementById('RadioButton_female').Checked;
if (male == true || female == true)
{
e.IsValid = true;
} else {
e.IsValid = false;
}
}
**
0x800a138f - JavaScript runtime error: Unable to get property
'checked' of undefined or null reference
**
This is my Complete code
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="contactus.aspx.cs" Inherits="DVManagmentProject.contactus" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.auto-style1 {
width: 70%;
}
.auto-style2 {
width: 190px;
}
.auto-style3 {
width: 190px;
height: 34px;
}
.auto-style4 {
height: 34px;
}
.auto-style5 {
width: 190px;
height: 150px;
}
.auto-style6 {
height: 150px;
}
</style>
<script type="text/javascript" >
function GenderValidation(sender , e)
{
var male = document.getElementById('ContentPlaceHolder1_RadioButton_male').Checked;
var female = document.getElementById('ContentPlaceHolder1_RadioButton_female').Checked;
if (male == true || female == true)
{
e.IsValid = true;
} else {
e.IsValid = false;
}
}
function CustomValidatorAgremennt(sender, e)
{
var agreemenT = document.getElementById('ContentPlaceHolder1_CheckBox_agreement').Checked;
if(agreemenT==true)
{
e.IsValid = true;
}else
{
e.IsValid = false;
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2>
This is Contact Us Page</h2>
<asp:ValidationSummary ID="contact_ValidationSummary" runat="server" BackColor="#FFFF99" ForeColor="Black" Font-Bold="true" Width="694px" BorderStyle="Double" />
<h3> Please Fill the Form Below:</h3>
<br />
<table class="auto-style1">
<tr>
<td class="auto-style2">Name:</td>
<td>
<asp:TextBox ID="name_TextBox" runat="server" Width="320px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator_name"
runat="server" Text="*"
ErrorMessage="Please Enter Your Name"
ForeColor="Red"
ControlToValidate="name_TextBox"
Display="Dynamic"
> </asp:RequiredFieldValidator>
<%-- <asp:RangeValidator ID="RangeValidator_name" runat="server"
ErrorMessage="*Text should between 10 to 30" MinimumValue="10" MaximumValue="30"
Type="Integer" ControlToValidate="name_TextBox"
Display="Dynamic"></asp:RangeValidator>--%>
</td>
</tr>
<tr>
<td class="auto-style3">Email:</td>
<td class="auto-style4">
<asp:TextBox ID="email_TextBox" runat="server" Width="320px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator_email"
runat="server"
SetFocusOnError="true"
Text="*"
ErrorMessage="Please Enter Your Email Name"
ControlToValidate="email_TextBox"
ForeColor="Red"
Display="Dynamic"> </asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator_email_TextBox"
runat="server"
ErrorMessage="Please Enter Correct Email Format"
Display="Dynamic"
ControlToValidate="email_TextBox"
ForeColor="Red"
SetFocusOnError="true"
Text="*"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" > </asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style3">Re-Enter Email:</td>
<td class="auto-style4">
<asp:TextBox ID="TextBox_ReEmail" runat="server" Width="320px"></asp:TextBox>
<asp:CompareValidator
ID="CompareValidator_ReEmail_TextBox"
runat="server"
ErrorMessage="Email Must be Match"
Operator="Equal"
ControlToValidate="TextBox_ReEmail"
ControlToCompare="email_TextBox"
Type="String"
Display="Dynamic"
ForeColor="Red"
Font-Bold="true">*</asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator_ReEmail"
runat="server"
SetFocusOnError="true"
Text="*"
ErrorMessage="Please Confirm Your Email Name"
ControlToValidate="TextBox_ReEmail"
ForeColor="Red"
Display="Dynamic"> </asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator_ReEmail"
runat="server"
ErrorMessage="Please Enter Correct Re-Email Format"
Display="Dynamic"
ControlToValidate="TextBox_ReEmail"
ForeColor="Red"
SetFocusOnError="true"
Text="*"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style3">Gender:</td>
<td class="auto-style4">
<asp:RadioButton ID="RadioButton_male" runat="server" Text="Male" GroupName="GenderGroup" />
<asp:RadioButton ID="RadioButton_female" runat="server" Text="Female" GroupName="GenderGroup" />
<asp:CustomValidator
ID="CustomValidator_genders"
runat="server"
ErrorMessage="Please Select Gender.!"
Font-Bold="True"
Display="Dynamic" ForeColor="Red" OnServerValidate="CustomValidator_genders_ServerValidate">*</asp:CustomValidator>
</td>
</tr>
<tr>
<td class="auto-style3">Age:</td>
<td class="auto-style4">
<asp:TextBox ID="Age_TextBox" runat="server" Width="318px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
SetFocusOnError="true"
Text="*"
ErrorMessage="Please Enter Your Age"
ControlToValidate="Age_TextBox"
ForeColor="Red"
Display="Dynamic"> </asp:RequiredFieldValidator>
<asp:RangeValidator
ID="RangeValidator_Age"
runat="server"
ErrorMessage="Age should between 18 to 99"
Type="Integer"
Display="Dynamic"
SetFocusOnError="true"
ControlToValidate="Age_TextBox"
MinimumValue="18"
MaximumValue="99"
></asp:RangeValidator>
</td>
</tr>
<tr>
<td class="auto-style2">Subject:</td>
<td>
<asp:DropDownList ID="subject_DropDownList" runat="server" Width="320px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style5">Message </td>
<td class="auto-style6">
<asp:TextBox ID="message_TextBox" runat="server" Height="140px" TextMode="MultiLine" Width="320px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2">Agreement:</td>
<td>
<asp:CheckBox ID="CheckBox_agreement" runat="server" Text="Please Select Our Terms And Conditions.!" />
<asp:CustomValidator
ID="CustomValidator_Agreement"
runat="server"
Display="Dynamic"
ErrorMessage="Please Check Terms and Conditions"
Font-Bold="True"
ForeColor="Red" OnServerValidate="CustomValidator_Agreement_ServerValidate">*</asp:CustomValidator>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="submit_Button" runat="server" Font-Bold="True" Text="Submit" Width="320px" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
<p>
</p>
</asp:Content>
This is Debbuger Code
[1]: https://i.stack.imgur.com/PG8hC.jpg
[2]: https://i.stack.imgur.com/Jqw0X.jpg
[3]: https://i.stack.imgur.com/DuaNT.jpg
[4]: https://i.stack.imgur.com/DrTPP.jpg
[5]: https://i.stack.imgur.com/1Dhc1.jpg
[6]: https://i.stack.imgur.com/880dI.jpg
[7]: https://i.stack.imgur.com/DWQ7D.jpg
[8]: https://i.stack.imgur.com/LdHXg.jpg
[9]: https://i.stack.imgur.com/xVXI1.jpg
[10]: https://i.stack.imgur.com/qC4LA.jpg
Problem is Solved . I have Changed
ContentPlaceHolder1_RadioButton_male and
ContentPlaceHolder1_RadioButton_female
instead of
RadioButton_male and RadioButton_female
as well as in Javascript Function .i have changed (.Checked) in small (.checked) and it worked for me .
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",
},
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...
I have 2 jQuery script in one page jQuery Dialog and jQuery slideToggle inside the dialog box, jQuery dialog is working but after hitting button to open jQuery Dialog inside the dialog box there will be a button to slideToggle a div but its not working I tried to move slideToggle outside the dialog and it works. I don't know whats going on inside the dialog box if someone can help me to solve my problem
jQuery Dialog
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
appendTo: "form",
autoOpen: false,
width: 630,
height: 700,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
jQuery slideToggle
<script type="text/javascript">
$(document).ready(function () {
$("#Div1").hide();
$("#Button1").click(function () {
$("#Div1").slideToggle();
return false;
});
});
</script>
dialog div + slideToggle div inside the jQuery dialog
<div id="dialog" title="Classification">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<table align="center" style="margin-top:10px" width="600">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Selected="True">Choose Classification</asp:ListItem>
<asp:ListItem Value="Resident">Resident</asp:ListItem>
<asp:ListItem Value="Business">Business</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<table>
<tr>
<td><div id="divresident" runat="server" visible="false">
<table style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbAddress" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtAddress" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
<td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
<asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
</tr>
<tr>
<td>
<div id="divOccupantProfile" style="display: none">
<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Married</asp:ListItem>
<asp:ListItem>Single</asp:ListItem>
<asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />
<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Wife</asp:ListItem>
<asp:ListItem>Daughter</asp:ListItem>
<asp:ListItem>Son</asp:ListItem>
<asp:ListItem>Father</asp:ListItem>
<asp:ListItem>Mother</asp:ListItem>
<asp:ListItem>House helper</asp:ListItem>
<asp:ListItem>Driver</asp:ListItem>
</asp:DropDownList>
</div>
<div id="holder">
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
<table>
<tr>
<td><div id="divbusiness" runat="server" visible="false">
<table width="600" style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus1" runat="server" Text="Registered Business Name" ></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus3" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus4" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus5" runat="server" Text="Structure"></asp:Label></td>
<td width="300"> </td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus6" runat="server" Text="SEC No./DTI number"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus7" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus8" runat="server" Text="Nature of Business"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus9" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
<div>
<asp:Button ID="Button1" runat="server" Text="+" />
<asp:Label ID="Label1" runat="server" Text="Add Phone"></asp:Label>
<div id="Div1" style="display: none">
<asp:Label ID="Label2" runat="server" Text="Landline work"></asp:Label>
<asp:TextBox ID="TextBox1" class="basetxt" runat="server" ></asp:TextBox><br />
<asp:Label ID="Label3" runat="server" Text="Handphone personal" ></asp:Label>
<asp:TextBox ID="TextBox2" class="basetxt" runat="server"></asp:TextBox><br />
<asp:Label ID="Label4" runat="server" Text="Handphone work"></asp:Label>
<asp:TextBox ID="TextBox3" class="basetxt" runat="server"></asp:TextBox>
</div>
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
.click won't work on later loaded elements, try it like this, replace:
$("#Button1").click(function () {
With:
$("body").on('click', '#Button1', function() {
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;
});
});