I have a form that displays an asp.net grid with different people listed in the grid. A user can add new user's to the grid, by clicking an asp.net button on the page:
<div id="content_button"> <asp:Button ID="btnAddperson" runat="server" CssClass="content_button" PostBackUrl="addperson.aspx" Text="Add Person" ToolTip="addPerson.aspx" /> </div>
When this button is clicked, a JQuery dialog is opens:
$(document).ready(function() {
$('#content_button #ctl00_MainContent_btnAddPerson').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('title') + ' #content_dialogBox')
.dialog({
autoOpen: false,
title: $link.attr('value'),
width: 500,
beforeclose: function() { window.location = "ManagePeople.aspx" }
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
This all works fine. However, there are some fields on the dialog form that have to be validated. At first, I used asp.net required field validation. For some reason, that didn't work. So, I am validating in the code-behind. The validation works (as it did with the required field controls), but the form displays in it's own window, instead of within the JQuery dialog. Can someone please tell me what I'm doing wrong.
Note: ManagePeople.aspx is the page that contains the grid. Once the addperson button is clicked the contents of the #content_dialogBox in the AddPerson.aspx is displayed.