Return value from simplemodal iframe popup to textbox on parent

Question

I've have created a simpleModal popup. I want to return a value from a text input on the popup to a asp textbox on the parent page.

I have read all of the examples that are similar to this one, but none have answered my question.

My popup is a simple aspx page with a text input. Here is the code:

JavaScript

  $(document).ready(function() {
    $("a#lookup").click(function () {
      //Load the Lookup page as a modal popup..
      $.modal('<iframe src="TestPopup.aspx" height="200" width="450" style="border:5">', {
        onOpen: function (dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.container.slideDown('100', function () {
                    dialog.data.fadeIn('fast');
            }); 
          }); 
        },
        preventDefault: true,
        containerCss: {
          backgroundColor: "#fff",
          borderColor: "#aaa",
          height: 530,
          padding: 5,
          width: 880,
          escClose: false
        },
        closeHTML: "<a href='#'>Close</a>",
        appendTo: 'form',
        persist: true,
        overlayClose: true,
        onClose: function (dialog) {
          var result = dialog.data.find("#msgText").val();
          $('#txtLookupReturn').attr('value', result);
          dialog.data.fadeOut('200', function () {
            dialog.container.slideUp('200', function () {
              dialog.overlay.fadeOut('200', function () {
                $.modal.close();
              }); 
            });
          });
        }
      }); 
    });    
  });

TestPopup.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPopup.aspx.cs" Inherits="WebServicesTest.TestPopup" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; 
<html xmlns="w3.org/1999/xhtml">; 
<head runat="server"> 
  <title></title> 
</head> 
<body> 
  <form id="form1" runat="server"> 
  <div> 
    <input id="msgText" type="text" value="I love jQuery!" /> 
  </div> 
  </form> 
</body> 
</html>

This is the line of code that is not working:

var result = dialog.data.find("#msgText").val();

$('#txtLookupReturn').attr('value', result);

When I try to grab the value of #msgText, I get no error and no value. Appreciate any help!

Since your dialog is created as an iFrame with `TestPopup.aspx` as the URL, we can't tell what HTML is contained in your dialog, so we can't really debug your problem. Same for the variable `dialog`; you don't have the code that declares a `dialog` variable. You need to post an example that is simple and self-contained so that we can help you. — RustyTheBoyRobot, Jun 04 '12 at 14:15
You also need to tell us what 'not working' means here: is it giving you an error in your console? (post the error message) Is it silently failing? Is it giving you garbage values? — RustyTheBoyRobot, Jun 04 '12 at 14:17

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

I think that your selection code should be this:

$("iframe[src='TestPopup.aspx']").contents().find("#msgText").val();

Selecting elements inside of iframes has some complexities which are addressed in this question and this blog post. This question talks about permissions with JavaScript and iframes. I can't tell how your pages are organized, so I don't know if you will have problems with the same origin policy, but it's a good thing to read up on anyways.

Update

The more I look at your popup HTML, the more I think that you don't need to use an iframe. When I've used SimpleModal, I usually put my dialog HTML in an invisible <div>. The iframe will be unnecessarily slow and increase your server traffic. If you need to load values from the server, you might want to keep it as an iframe. If, however, you just need the user to provide values, include the dialog form as HTML on your page.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 05 '12 at 14:16

RustyTheBoyRobot

5,790
4
35
54

var result now returns as undefined. – Stephen Lerch Jun 05 '12 at 17:02
@StephenLerch - Try `$("iframe[src='TestPopup.aspx']").contents().find("#msgText").val();` – RustyTheBoyRobot Jun 05 '12 at 17:17
That is the answer. Thank you so much! – Stephen Lerch Jun 06 '12 at 13:00
@StephenLerch If this fixed your problem, please [accept my answer](http://stackoverflow.com/faq#howtoask). – RustyTheBoyRobot Jun 06 '12 at 14:04

Return value from simplemodal iframe popup to textbox on parent

JavaScript

TestPopup.aspx

1 Answers1

Update