Problem with getting page with JQuery?
I have a two aspx file, one of them Default.aspx and other is Insert.aspx 开发者_C百科.
Insert.aspx expects two parameter named firstname and lastname, and saved these values to the database,and writes a welcome message like 'Welcome John Stinger'.
Default.aspx contains a simple form , two textbox and one button (txtFname, txtLname,btnInsert) and a div to show message.
I write a JQuery code in Default.aspx :
<script type="text/javascript">
$(document).ready(function() {
$('#btnInsert').click(function() {
$.ajax({
contentType: "text/html; charset=utf-8",
data: "firstname=" + $('#txtFname').val() + "&lastname=" +$("#txtLname").val(),
url: "Insert.aspx",
dataType: "html",
success: function(data) {
$("#message").html(data);
}
});
});
});
</script>
I want to get Insert.aspx page and load it into #message div but i cant get the page. What can i do?
Thanks..
Your code seems to be okay, as Cesar said you have debug it properly...
Make sure all key areas works, like
button click tiggered ?
ajax call completed successfully ?
getting values of textboxes correctly ?
Whether your insert is success? etc...
I would like to explain it to more, as you are new here (me too :-) )
<script type="text/javascript">
$(document).ready(function() {
$('#btnInsert').click(function() {
alert("Clicked"); // button clicked
$.ajax({
contentType: "text/html; charset=utf-8",
data: "firstname=" + $('#txtFname').val() + "&lastname=" + $("#txtLname").val(),
url: "Insert.aspx",
dataType: "html",
success: function(data) {
alert("Success..."); // Ajax call completed successfully
alert(data);
$("#message").html(data);
}
});
return false; // you don't want to current page postback!!!
});
});
I have added some alerts in your code, your code is fine if all pops up...
Please change your Insert.aspx.cs code as mentioned below
protected void Page_Load(object sender, EventArgs e)
{
//code to validate inputs and to insert
Response.Write("success"); // your message
Response.End(); // to flush the buffer
}
Let me know whether it helped you or not...
Cheers
<script type="text/javascript">
$(document).ready(function() {
$('#btnInsert').click(function() {
$("#message").load("Insert.aspx", { firstname : $('#txtFname').val(), lastname : $("#txtLname").val() } );
});
});
</script>
See more: http://docs.jquery.com/Ajax/load#urldatacallback
精彩评论