First of all, thanks for all the help here! You have been tremendous.
I have a JQuery dialog where the user fills out the data, then clicks "Done" to close it. I want to capture the data that the user entered, pass it to the code behind, and have the code behind reload the page using this data. I'm struggling because by
the time I can't seem to get the parent to reload with this data. I've tried several scenarios, but here's one of the latest:
JavaScript and html is
var dlg = $("#dialog").dialog({
//Init the dialog from server side properties
autoOpen: <%=AutoOpen.ToString().ToLower()%>,
modal: <%=Modal.ToString().ToLower()%>,
buttons: {
"Done": function (){
//Populate input parameters
var data = {};
data.ps = $('#<%=UserTextBox.ClientID%>').val();
$('#<%=ResultTextBox.ClientID%>').val(data.ps);
$(this).dialog('close');
},
"Cancel": function (){
$(this).dialog('close');
}
}
});
<asp:TextBox ID="ResultTextBox" runat="server" AutoPostBack="true" OnTextChanged="ResultTextBox_TextChanged"></asp:TextBox>
My problem is, the ResultTextBox gets the value but ResultTextBox_TextChanged never fires.
The textchanged event is fired the moment you take the focus out of the textbox, so let us say your dialog box fills in the textbox the moment you
press tab the event will be fired.
And I'd suggest you use jquery/ajax to interact with data from code behind and the client side, since the auto post back property actually refreshes the page.
Hope this helps or let me know your exact requirement , for more info on calling code behind from client side refer this:
I have a JQuery dialog where the user fills out the data, then clicks "Done" to close it. I want to capture the data that the user entered, pass it to the code behind, and have the code behind reload the page using this data. I'm struggling because by the
time I can't seem to get the parent to reload with this data. I've tried several scenarios, but here's one of the latest:
According to your description, I suggest you could use an asp button to close the dialog.
In this button click event, you could get the textbox value in code-behind and show this data in the page.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Thanks for all the good suggestions. I have found my own way to resolve the issue, although perhaps not as elegant. I suppose there really are multiple ways to solve this problem.
I solved it using AjaxPost and an HTML query string to pass the variables, thus eliminating the need for the hidden field altogether.
var dlg = $("#dialog").dialog({
//Init the dialog from server side properties
autoOpen: <%=AutoOpen.ToString().ToLower()%>,
modal: <%=Modal.ToString().ToLower()%>,
buttons: {
"Done": function () {
//Populate input parameters
var data = {};
data.ps = $('#<%=UserTextBox.ClientID%>').val();
AjaxPost(data);
$(this).dialog('close');
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
//Post data to the server
function AjaxPost3(data){
var dataps = JSON.stringify(data);
$.ajax({
type: "POST",
url: "MyPage.aspx/ProcessData",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: dataps,
success: function (r) {
location = 'TrainingUnits.aspx?p1=' + r.d; // HERE reloads page w/ html query string
}
})
.done(function (data) {
console.log(data.d);
});
}
Then on the load of the C# code behind, I just get the query string using:
string p1 = Request.QueryString["p1"];
I haven't been able to test the other suggestions here, but I will try them and mark multiple answers if possible.
Member
3 Points
11 Posts
Passing dialog data to parent and reloading with it
Nov 11, 2016 12:09 AM|robertportercs|LINK
Hi all,
First of all, thanks for all the help here! You have been tremendous.
I have a JQuery dialog where the user fills out the data, then clicks "Done" to close it. I want to capture the data that the user entered, pass it to the code behind, and have the code behind reload the page using this data. I'm struggling because by the time I can't seem to get the parent to reload with this data. I've tried several scenarios, but here's one of the latest:
JavaScript and html is
var dlg = $("#dialog").dialog({ //Init the dialog from server side properties autoOpen: <%=AutoOpen.ToString().ToLower()%>, modal: <%=Modal.ToString().ToLower()%>, buttons: { "Done": function (){ //Populate input parameters var data = {}; data.ps = $('#<%=UserTextBox.ClientID%>').val(); $('#<%=ResultTextBox.ClientID%>').val(data.ps); $(this).dialog('close'); }, "Cancel": function (){ $(this).dialog('close'); } } }); <asp:TextBox ID="ResultTextBox" runat="server" AutoPostBack="true" OnTextChanged="ResultTextBox_TextChanged"></asp:TextBox>My problem is, the ResultTextBox gets the value but ResultTextBox_TextChanged never fires.
Any help is greatly appreciated.
Robert
Participant
1222 Points
371 Posts
Re: Passing dialog data to parent and reloading with it
Nov 11, 2016 07:22 AM|shivigupta31web|LINK
Hi robertportercs,
The textchanged event is fired the moment you take the focus out of the textbox, so let us say your dialog box fills in the textbox the moment you press tab the event will be fired.
And I'd suggest you use jquery/ajax to interact with data from code behind and the client side, since the auto post back property actually refreshes the page.
Hope this helps or let me know your exact requirement , for more info on calling code behind from client side refer this:
http://www.codeproject.com/Tips/825261/How-to-Call-Code-Behind-Method-From-Client-Side
Stay humble.
Star
9831 Points
3120 Posts
Re: Passing dialog data to parent and reloading with it
Nov 12, 2016 02:54 AM|Brando ZWZ|LINK
Hi robertportercs,
According to your description, I suggest you could use an asp button to close the dialog.
In this button click event, you could get the textbox value in code-behind and show this data in the page.
More details, you could refer to follow codes:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style> /*this will hidden default dialog button*/ .ui-dialog-titlebar-close { visibility: hidden; } </style> <script src="scripts/jquery-1.12.4.min.js"></script> <script src="scripts/jquery-ui-1.12.1.min.js"></script> <script> $(document).ready(function(){ var dlg = $("#dialog-model").dialog({ create: function (event, ui) { $('.ui-dialog-titlebar').css({ 'background': 'none', 'border': 'none' }); $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' }); }, width: 250, height: 150, modal: true, resizable: false, autoOpen: false, }); //open the dialog $("#Button2").click(function () { $("#dialog-model").dialog("open"); }); //close the dialog $("#Button1").click(function () { $("#dialog-model").dialog("close"); }); //add this into dialog to fire the button onclick event post back dlg.parent().appendTo(jQuery('form:first')); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input id="Button2" type="button" value="button" /> <div id="dialog-model" title="Basic dialog"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Close" OnClick="Button1_Click" /> <hr/> </div> Result: <asp:Label ID="Label1" runat="server" Text=" "></asp:Label> <asp:Label ID="Label2" runat="server" Text=" "></asp:Label> </div> </form> </body> </html>Result:
Best Regards,
Brando
All-Star
15186 Points
3888 Posts
Re: Passing dialog data to parent and reloading with it
Nov 14, 2016 12:58 PM|raju dasa|LINK
HI,
You have to explicitly trigger the change event using jquery:
$(selector).trigger("change");http://stackoverflow.com/questions/4247264/how-to-trigger-jquery-change-event-in-code
rajudasa.blogspot.com || rajudasa-tech
Member
3 Points
11 Posts
Re: Passing dialog data to parent and reloading with it
Nov 14, 2016 03:37 PM|robertportercs|LINK
Hi again,
Thanks for all the good suggestions. I have found my own way to resolve the issue, although perhaps not as elegant. I suppose there really are multiple ways to solve this problem.
I solved it using AjaxPost and an HTML query string to pass the variables, thus eliminating the need for the hidden field altogether.
var dlg = $("#dialog").dialog({ //Init the dialog from server side properties autoOpen: <%=AutoOpen.ToString().ToLower()%>, modal: <%=Modal.ToString().ToLower()%>, buttons: { "Done": function () { //Populate input parameters var data = {}; data.ps = $('#<%=UserTextBox.ClientID%>').val(); AjaxPost(data); $(this).dialog('close'); }, "Cancel": function () { $(this).dialog('close'); } } }); //Post data to the server function AjaxPost3(data){ var dataps = JSON.stringify(data); $.ajax({ type: "POST", url: "MyPage.aspx/ProcessData", dataType: "json", contentType: "application/json; charset=utf-8", data: dataps, success: function (r) { location = 'TrainingUnits.aspx?p1=' + r.d; // HERE reloads page w/ html query string } }) .done(function (data) { console.log(data.d); }); }Then on the load of the C# code behind, I just get the query string using:
I haven't been able to test the other suggestions here, but I will try them and mark multiple answers if possible.
Thanks again.
Robert