http://sharepoint.stackexchange.com/questions/56963/how-can-i-send-data-to-a-modal-popup-without-using-a-jquery-string
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:
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.
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;
}
How can I send data to a modal popup without using a jquery string?
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:
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.
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.
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.
| |||||
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.
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) { });
|
Your variable
Also the modal window will be using an iframe, so reaching the variable like you try should
not work.
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.
How to pass values from SP UI Modal Dialog
back to the server side code upon button click event
I have a click event on a button that opens a sp ui modal dialog page. and returns a specific
value from a text area on that page. I was able to open the page in the modal dialog and
able to return the values from the text area back to the parent page, but my issue is I was
not able to pass these values back to the code behind. I tried to use the hidden field. It seems
to be working but the problem is upon first click event of the button, the values are not
returned and when I tried to debug it, the whole event is being executed first so the
values are always empty on first click.
Is there another way that I can pass the values back to the code behind?
Here is the code behind of the button:
function CloseCallback(strReturnValue, comment) {
if (strReturnValue == 1) // Perform action on Ok.
{
var hiddenResult = $("[id$='ctl00_PlaceHolderMain_HiddenField1']").val(strReturnValue);
var hiddenComment = $("[id$='ctl00_PlaceHolderMain_HiddenField2']").val(comment);
}
}
Thank you very much for the help in advance.
development sharepoint-foundation asp.net modal-dialog
protected void btn_Click(object sender, EventArgs e)
{
//popup modal window for comment is loaded.
ClientScriptManager cs = Page.ClientScript;
StringBuilder scriptToExecute = new StringBuilder();
scriptToExecute.Append("ExecuteOrDelayUntilScriptLoaded(OpenCommentForm,'sp.js');");
cs.RegisterStartupScript(this.GetType(), "PopUpCommentScript", scriptToExecute.ToString(), true);
string hiddenField1Val = HiddenField1.Value.ToString();
string hiddenField2Val = HiddenField2.Value.ToString();
}
Here is the js:
function OpenCommentForm() {
var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.url = "/_layouts/commentform.aspx"; // URL of the Page
dialogOptions.width = 600; // Width of the Dialog
dialogOptions.height = 400; // Height of the Dialog
dialogOptions.title = "Comment Form";
dialogOptions.args = null;
dialogOptions.allowMaximize = false;
dialogOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback); // Function to capture dialog closed event
SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
}