JQuery Modal Dialog with Aspx Page Postback example

hi all!
this is kinda the next part of this where i explain how to get a modal with ans aspx page in it
http://bresleveloper.blogspot.co.il/2012/05/jquery-modal-dialog-with-aspx-page.html

now i got into the part where i want to post the the secondary page but guess what? the response it the secondary page so i lose my main page, which is logical cuz the server doesnt keeps track for which page exactly i'm in but rather he gets a request and send the according resposne.

so we cant use postback. nope, Response.End() isnt good either and always the page will be refreshed, u just cant not response the request.

so the Dear God gave MS the wisdom of ajax! sais who that my form must be submitted? i can send an ajax request! here is how to ajax:
http://bresleveloper.blogspot.co.il/2012/04/ajax-3-simle-ways.html

so lets say i have at my main page a big story and if u want to subscribe i open a modal with an apsx page with all kinda stuff, (p.s. the $(func({...}); will work cuz u return a DOM document so there will be all the usual events), lets say for the example i have a string name and int age.

i think that server-side easiest thing would be a webmethod like this:
       
[WebMethod]
public static bool btnSave_Click(string name, int age){...}

now client side i u can choose either JQ or PageMethods, i choose by if i already use JQ on the page, otherwise the 10K of the PageMethods is less than JQ lib's 90K

so now u know what u need to do to post ur data. but the modal doesnt closes!
after experimenting a bit i found that the bets thing in order to post, close the dialog, get the callback and update the main page is a JS object in the main page like that:

function divOpenConversation(){};

divOpenConversation.destroyDialog = function () {
    var conv = $("#divModalForSecondaryPage");
    var name = conv.find("#txtName").val();
    var age = conv.find("#txtAge").val();

    var options = {
       type: "POST",
       url: "Subscribe.aspx/btnSave_Click",
       data: "{ 'name' : '" + nane+ "' , 'age' : " + age+ "' }",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {
              if (msg.d == true) {
                 $("#divModalForSecondaryPage").dialog('destroy');
                 $("#divModalForSecondaryPage").html("");

                 PageMethods.GetLastInsertedRow(OnGetLastInsertedRow);
              }
              else {
                 alert(msg.d);
              }
       }
    };
    $.ajax(options);
};

notice i user dialog('destroy') and html('') cuz when i get the html again every time.
you could switch to dialog('close') and get the apsx page once and do dialog('open') and close many times, and i should've done this but i took it from another page where input was needed

anyway the secondary page know the JS obj so i have there this:
$(function () {
    $("#divIbtSave").click(function () {
        divOpenConversation.destroyDialog();
    });
});

what happens is that on the save click the main page JS start working, making the ajax post, and on success destroying the dialog, and making his own ajax to get updated

extra - in GetLastInsertedRow i just save the LAST_INSERT_ID() from our prevois post in session and query by id the new row i need and add it so OnGetLastInsertedRow looks like:

function OnGetLastInsertedRow(result) {
    var r = document.createElement("tr");
    for (var p in result) {
       if (p=="__type") { continue;}
       var td = document.createElement("td");
       td.innerText = result[p];
       r.appendChild(td);
    }
    //dgvConversations
    var tbl = document.getElementById("dgvConversations");
    var tbody = tbl.getElementsByTagName("tbody")[0];
    tbody.appendChild(r);
}