locked
Passing dialog data to parent and reloading with it RRS feed

  • Question

  • User225854192 posted

    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

    Friday, November 11, 2016 12:09 AM

Answers

  • User283571144 posted

    Hi robertportercs,

    robertportercs

    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.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 12, 2016 2:54 AM
  • User527778624 posted

    HI,

    My problem is, the ResultTextBox gets the value but ResultTextBox_TextChanged never fires.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 14, 2016 12:58 PM
  • User225854192 posted

    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:

    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.

    Thanks again.

    Robert

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 14, 2016 3:37 PM

All replies

  • User2009744128 posted

    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 

    Friday, November 11, 2016 7:22 AM
  • User283571144 posted

    Hi robertportercs,

    robertportercs

    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.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 12, 2016 2:54 AM
  • User527778624 posted

    HI,

    My problem is, the ResultTextBox gets the value but ResultTextBox_TextChanged never fires.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 14, 2016 12:58 PM
  • User225854192 posted

    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:

    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.

    Thanks again.

    Robert

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 14, 2016 3:37 PM