Close button to Facebox Jquery box closes master page, not popup

Question

I am using the Facebox jquery box to load a little form with a Submit Button and a Cancel Button.

When I click Submit it closes the Main page that loaded the Facebox window instead of the Facebox window! It leaves the AddNote.aspx site open (which is loaded by Facebox) and closes my Main.aspx.

Here is my code behind in AddNote.aspx (Which is rendered by the Facebox popup on Main.aspx):

    protected void SubmitButtom_Click(object sender, EventArgs e)
    {

        string note = NotesTextBox.Text;

        //will need to add current user

        using (cmd = new SqlCommand("INSERT INTO notes (FID, note_date, note_text) VALUES (@FID, @note_date, @note_text)", con))
        {
            con.Open();
            cmd.Parameters.Add(new SqlParameter("FID", FID));
            cmd.Parameters.Add(new SqlParameter("note_date", DateTime.Now.ToString()));
            cmd.Parameters.Add(new SqlParameter("note_text", note));
            cmd.ExecuteNonQuery();
            con.Close();
            Page.ClientScript.RegisterOnSubmitStatement(typeof(Page), "closeModal", "$.facebox.close();");              //WHY DOES THIS CLOSE MAIN.ASPX INSTEAD OF FACEBOX WINDOW?                  
        }           

    }

Answer 1

Welcome to ASP.NET

You're using server-side code to process this form. That means you have to do what ASP.NET terms a "PostBack". What this means is that the form on the page is submitting data back to itself for processing. Since the "submit" button was the button that triggered it, your handler gets called.

The important thing here is that this requires a trip to the server. The form is being submitted, which in normal HTTP (and thus in ASP.NET, as it is a framework built for HTTP processing), means a page refresh. The browser says "Oh! The form is being submitted! Time to make a request to the server, and wait for a response. I can probably unload the page I have right now." So it does.

In order to do what you want, look into "AJAX", or Asynchronous XMLHttpRequest. They're the same thing, except that one is more buzz-wordy.