How can I send data to a modal popup without using a jquery string?

Question

as a bit of background I am new to Sharepoint development, as well as web programming in general. I've done asp.net programming in the past, but not much javascrip/ajax/jquery. From the (tons...) of research I've done on this so far, it looks like I'll need to do something like an AJAX post with my data encoded into JSON. I just can't figure out how to link up the POST to my modal popup so I can receive the data, deserialize it, and use the data.

My requirement is relatively simple: I need to grab data from a gridview and populate the listview in my popup with those values. The reason I don't want to use the ? parameters in the url is because our users can select hundreds of values if they want to, and I don't want there to be an exception because the url is too long (correct me if I'm wrong).

Here's my attempt, right now I'm just throwing dummy strings at the ajax post so I can keep it as simple as possible.

Here's my javascript associated with my custom web part:

<script language="javascript" type="text/javascript">
function OpenDialog(URL) {
    var NewPopUp = SP.UI.$create_DialogOptions();
    NewPopUp.url = URL;
    NewPopUp.width = 700;
    NewPopUp.height = 350;
    SP.UI.ModalDialog.showModalDialog(NewPopUp);

    var myjson = { root: { id: ['000001']} }
    var string = "this is a string";

}

Here's a function to basically send and ajax post to itself, just to test functionality. I can't grab this data though, or see the alert, so something is messed up here.

<script language="javascript" type="text/javascript">
function PostIt() {
    $.ajax({
        type: "POST",
        url: "/_layouts/folder/myPage.aspx",
        data: string,
        timeout: 1000000,
        success: function (data) {
            alert("success");
        }

    });
}

Here's the code I was trying to use to grab the posted data (on button click) but it doesn't seem to do anything. I originally had this in my page_load, but then the modal wouldn't even show up. I'm not exactly sure on the control flow of ajax POSTing, so I could see why a button click would not be able to grab the data, I'm just not sure what else to do.

protected void Button2_Click(object sender, EventArgs e)
    {

        StreamReader reader = new StreamReader(Page.Request.InputStream);

        string test;
        test = reader.ReadToEnd();
        JavaScriptSerializer jss = new JavaScriptSerializer();
        Label1.Text = jss.Deserialize<String>(test);
    }

So I can open my dialogue, press buttons on the dialog, etc, but the button doesn't grab the data I'm trying to send. And Ideally, it would be sent when the window first pops up instead of on button click.

Thanks in advance for the help, I know this is a lot of code for a simple question, I just don't know where I'm going wrong.

Answer 1

I am not sure how you are trying to link up the above code, but will try best to answer. You can just pass a javascript object to the modal dialog instead of query string.

Launching modal dialog with args option:
var options = SP.UI.$create_DialogOptions();
options.width = 700; options.height = 600; 
options.args = { 'SomeVarName': 'somevalue' }
options.url = "http://yoursite/_layouts/yourpage.aspx"
SP.UI.ModalDialog.showModalDialog(options);

And in dialog page access your data like below.
SP.UI.ModalDialog.get_childDialog().get_args()['SomeVarName'];

The second part of your question, if you would like to post some data to a page. You can do something like this SomePage.aspx: $.ajax({ type: "POST", url : "http://yoursite/../somepage.aspx/MethodThatAcceptsData" data : jsonString, contentType : "application/json; charset=utf-8", dataType: "json" success: function(msg) { });

In c# (codebehind)
[WebMethod]
[ScriptMethod(UseHttpGet=false, ResponseFormat = ResponseFormat.Json)]
public static bool MethodThatAcceptsData(Class objectToDesearlizeTo)
{
 //Your code here
 return true;
}

Answer 2

Your variable string is scoped to a function, and so you can not reach it outside the function. Also the modal window will be using an iframe, so reaching the variable like you try should not work.

Instead you could either pass your data as a query string, like this:

OpenPopUpPage('/?string=this%20is%20a%20string');

You can then reach this data through window.location.search.

Another option is to use the global object (window) and add that to the parent of the modal.

window.hack = 'this is a string';
// This will work with any object
window.hackObj = { my: { string: 'this is a string' } };

Inside the modal you can then reach this with window.parent.hack.

var data = window.parent.hack;
$.post('/_layouts/StudentCohorts/CohortCreation.aspx', {data: data}, function() {
    console.log('Success');
});

Note that this will not work if you break Same Origin Policy.