I have the following aspx/html page, it uses jquery to display a modal form. Every time I click on a jquery modal generated button it does a post back on the form. I would like to stop this. Below is my script
< script type = "text/javascript" > $(function () {
$(".addNew").dialog({
autoOpen: false,
width: 300,
height: 300,
resizeable: false,
title: 'New Item',
modal: true,
close: function (event, ui) {
event.preventDefault();
location.reload(false);
return false;
},
buttons: {
"Add": function (evt) {
evt.preventDefault();
var name = $("#<%= txtName.ClientID %>").val();
var surname = $("#<%= txtSurname.ClientID %>").val();
var age = $("#<%= txtAge.ClientID %>").val();
if (Page_ClientValidate("Person")) {
$.ajax({
type: 'POST',
url: 'Dialog.aspx/AddNewItem',
data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d) {
$("#user").append("<li>" + name + "</li>");
}
},
error: function () {
alert("Error! Try again...");
}
});
}
},
"Cancel": function (evt) {
evt.preventDefault();
$(this).dialog("close");
return false;
}
}
});
$("#add").click(function (event) {
event.preventDefault();
$(".addNew").dialog("open");
return false;
});
});
<a href="#" id="add">Add New</a>
<form id="form1" runat="server">
<div>
UserName
<asp:TextBox ID="UserName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please enter a username" Display="None" ControlToValidate="UserName" ></asp:RequiredFieldValidator>
</div>
<ul id="user">
</ul>
<div class="addNew" title="Add new Person">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="Person" />
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName" runat="server" /></td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter a name" Display="None" ControlToValidate="txtName" ValidationGroup="Person"></asp:RequiredFieldValidator>
</tr>
<tr>
<td>Surname</td>
<td><asp:TextBox ID="txtSurname" runat="server" /></td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox ID="txtAge" runat="server" /></td>
</tr>
</table>
</div>
</form>
</body>
Reposing comment as answer:
The issue is that your code is explicitly calling location.reload()
inside dialog's close
handler. It is not doing anything useful beyond that, so you can probably remove close
handler entirely.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.