Problem with getting page with JQuery?

Question

Hi I have a two aspx file, one of them Default.aspx and other is Insert.aspx .

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..

Answer 1

<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

Answer 2

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