locked
How to return value back to parent page from window.ShowModelDialog RRS feed

  • Question

  • Hi guys, I'm facing some issue with returning value back to the parent page.
    Please kindly help.

    I have a gridview that allow users to add new record at the <footertemplate> row, but users also can click on the Search button on the row, and I will show a pop up with the below code.

                TextBox txtCarNo = gvLookup.FooterRow.FindControl("txtNo") as TextBox;           
                System.Text.StringBuilder s = new System.Text.StringBuilder();
                s.Append("<script language='javascript' id='SearchResult'> " );
                s.Append("var WinSettings = 'dialogHeight:400px ; dialogWidth: 550px ;center: Yes ;resizable: No;status: no'; ");
                s.Append("javascript: window.showModalDialog('Search.aspx?no=" + txtNo.Text.Trim().ToUpper() + "','',WinSettings); ");
                s.Append("</script > ");        
    
                if ((!ClientScript.IsStartupScriptRegistered("SearchResult")))
                {
                    ClientScript.RegisterStartupScript(this.GetType(), "SearchResult", s.ToString());
                }




    At the child page, there will be another gridview that shows the search result, and users can click on one of the row to return the number back to the parent page.
    I thought of using Session to pass the value back, but when showing the ShowModalDialog, the code at the parent page already went through, meaning Session won't work on this scenario. 

    Please advise how do I return a value to the parent page.
    Appreciate very much.
    • Moved by Bob Shen Wednesday, May 29, 2013 9:05 AM
    Monday, May 27, 2013 7:18 AM

Answers

  • try this

    s.Append("javascript: var retVal = window.showModalDialog('Search.aspx?no=" + txtNo.Text.Trim().ToUpper() + "','',WinSettings).returnValue;");

    http://jqueryui.com/dialog/#modal-form

    <!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Dialog - Modal form</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <style>
        body { font-size: 62.5%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin- }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
      </style>
      <script>
      $(function() {
        var name = $( "#name" ),
          email = $( "#email" ),
          password = $( "#password" ),
          allFields = $( [] ).add( name ).add( email ).add( password ),
          tips = $( ".validateTips" );
     
        function updateTips( t ) {
          tips
            .text( t )
            .addClass( "ui-state-highlight" );
          setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
          }, 500 );
        }
     
        function checkLength( o, n, min, max ) {
          if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
              min + " and " + max + "." );
            return false;
          } else {
            return true;
          }
        }
     
        function checkRegexp( o, regexp, n ) {
          if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
          } else {
            return true;
          }
        }
     
        $( "#dialog-form" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
            "Create an account": function() {
              var bValid = true;
              allFields.removeClass( "ui-state-error" );
     
              bValid = bValid && checkLength( name, "username", 3, 16 );
              bValid = bValid && checkLength( email, "email", 6, 80 );
              bValid = bValid && checkLength( password, "password", 5, 16 );
     
              bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
              // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
              bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
              bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
     
              if ( bValid ) {
                $( "#users tbody" ).append( "<tr>" +
                  "<td>" + name.val() + "</td>" +
                  "<td>" + email.val() + "</td>" +
                  "<td>" + password.val() + "</td>" +
                "</tr>" );
                $( this ).dialog( "close" );
              }
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          },
          close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
          }
        });
     
        $( "#create-user" )
          .button()
          .click(function() {
            $( "#dialog-form" ).dialog( "open" );
          });
      });
      </script>
    </head>
    <body>
     
    <div id="dialog-form" title="Create new user">
      <p class="validateTips">All form fields are required.</p>
     
      <form>
      <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>
      </form>
    </div>
     
     
    <div id="users-contain" class="ui-widget">
      <h1>Existing Users:</h1>
      <table id="users" class="ui-widget ui-widget-content">
        <thead>
          <tr class="ui-widget-header ">
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
            <td>johndoe1</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button id="create-user">Create new user</button>
     
     
    </body>
    </html>



    Faisal Ahmed Farooqui —————————— If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Monday, May 27, 2013 8:06 AM
  • Hi engloon,

    You are more likely to get more efficient responses to ASP.NET issues at http://forums.asp.net where you can contact ASP.NET experts.

     

    Bob Shen
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Just Karl Thursday, October 3, 2013 3:09 PM
    Wednesday, May 29, 2013 9:04 AM

All replies

  • try this

    s.Append("javascript: var retVal = window.showModalDialog('Search.aspx?no=" + txtNo.Text.Trim().ToUpper() + "','',WinSettings).returnValue;");

    http://jqueryui.com/dialog/#modal-form

    <!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Dialog - Modal form</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <style>
        body { font-size: 62.5%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin- }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
      </style>
      <script>
      $(function() {
        var name = $( "#name" ),
          email = $( "#email" ),
          password = $( "#password" ),
          allFields = $( [] ).add( name ).add( email ).add( password ),
          tips = $( ".validateTips" );
     
        function updateTips( t ) {
          tips
            .text( t )
            .addClass( "ui-state-highlight" );
          setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
          }, 500 );
        }
     
        function checkLength( o, n, min, max ) {
          if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
              min + " and " + max + "." );
            return false;
          } else {
            return true;
          }
        }
     
        function checkRegexp( o, regexp, n ) {
          if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
          } else {
            return true;
          }
        }
     
        $( "#dialog-form" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
            "Create an account": function() {
              var bValid = true;
              allFields.removeClass( "ui-state-error" );
     
              bValid = bValid && checkLength( name, "username", 3, 16 );
              bValid = bValid && checkLength( email, "email", 6, 80 );
              bValid = bValid && checkLength( password, "password", 5, 16 );
     
              bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
              // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
              bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
              bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
     
              if ( bValid ) {
                $( "#users tbody" ).append( "<tr>" +
                  "<td>" + name.val() + "</td>" +
                  "<td>" + email.val() + "</td>" +
                  "<td>" + password.val() + "</td>" +
                "</tr>" );
                $( this ).dialog( "close" );
              }
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          },
          close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
          }
        });
     
        $( "#create-user" )
          .button()
          .click(function() {
            $( "#dialog-form" ).dialog( "open" );
          });
      });
      </script>
    </head>
    <body>
     
    <div id="dialog-form" title="Create new user">
      <p class="validateTips">All form fields are required.</p>
     
      <form>
      <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>
      </form>
    </div>
     
     
    <div id="users-contain" class="ui-widget">
      <h1>Existing Users:</h1>
      <table id="users" class="ui-widget ui-widget-content">
        <thead>
          <tr class="ui-widget-header ">
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
            <td>johndoe1</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button id="create-user">Create new user</button>
     
     
    </body>
    </html>



    Faisal Ahmed Farooqui —————————— If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Monday, May 27, 2013 8:06 AM
  • You can access parent page values using

    window.parent.window.YourVar = YourValue;

    // or

    window.parent.CallSomeJavascriptFunction();



    Please Mark as Answer and Vote as Helpful if I helped.

    Also please visit my blog http://msguy.me/


    Monday, May 27, 2013 8:54 AM
  • Hi engloon,

    You are more likely to get more efficient responses to ASP.NET issues at http://forums.asp.net where you can contact ASP.NET experts.

     

    Bob Shen
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Just Karl Thursday, October 3, 2013 3:09 PM
    Wednesday, May 29, 2013 9:04 AM