Insert a form field into a popup page using jquery

Question

I'm trying to insert a form field into a popup page. For some reason the form field doesn't get inserted. Any pointers. Pasted below is the code:

$(".ddlAddListinTo li").click(function () {

        var urlstring = "../ActionTypes";
        var ddlselectedVal  = $(this).attr('id');
        var $form = $("#frmPostToEmailReports");


        var AgentId = $form.find("#AgentId").val();
        var ReportName = $form.find("#ReportName").val();
        var Params = $form.find("#Params").val();


        if (ddlselectedVal != "None" && ddlselectedVal != "select") {

          $.post(urlstring, { AgentId: AgentId, ReportName: ReportName, Params: Params  },
 function (data) {
     window.open(urlstring);
    $("#divfrmInfo").append($form);

            });      
   } });

HTML for my popup window :

   <html>
<head></head>
<body>
<h2>AddToCart</h2>


     <form name="frmContact">
    <div>
        <div class="CartHeader">
            <ul>
                <li>
                    <span class="CartImage"></span>
                    <span class="Title">To Add Listing(s) to Cart</span>
                    <span class="SubTitle">Select your personal cart or add listings to a contact</span>
                </li>

            </ul>
        </div>

        **<div id="divfrmInfo"></div>**
    </div>
    </form>
    </body></html>

frmPostToEmailReports is the form element in the parent page. — BumbleBee, Feb 19 '14 at 23:42
Here is the jsfiddle for your code : http://jsfiddle.net/UNyF6/ — z atef, Feb 19 '14 at 23:59
hi could you check if the event is triggered correctly when clicking .ddlAddListinTo li? and also if (ddlselectedVal != "None" && ddlselectedVal != "select") is true? — Capitaine, Feb 20 '14 at 00:02
could you try putting $("#divfrmInfo").append($("#frmPostToEmailReports")); instead of $("#divfrmInfo").append($form); it may be about the variable scope — Capitaine, Feb 20 '14 at 00:09
are you sure only one
in DOM? as it may be placed in other
else — Capitaine, Feb 20 '14 at 00:16
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47906/discussion-between-capitaine-and-bumblebee) — Capitaine, Feb 20 '14 at 00:18
I tried var win = window.open(urlstring); win.document.$("#divfrmInfo").replaceWith(''); this also didn't work. So it seems the code after the window.open doesn't seem to be working. — BumbleBee, Feb 20 '14 at 00:48

score 1 · Answer 1 · answered Feb 19 '14 at 23:51

1

I think the selector in your AJAX callback is unable to get DOM elements in the popup. Try this:

var tmpWin = window.open(urlstring);
$(tmpWin.document).find("#divfrmInfo").append($form);

answered Feb 19 '14 at 23:51

aebabis

3,657
3
22
40

user13500 · Accepted Answer · 2014-02-20T02:05:14.523

1

Looking at it some more you could do something like this, in opener document.

$(".ddlAddListinTo li").click(function () {

     ...

        function (data) {
            $(window.open(urlstring)).load ( function() {
                // Here "this" will be the window.
                $(this.document).find("#divfrmInfo").append($form.clone())
            });
        }

This way you attach to load event for popup by jQuery.

Have a look at .clone() for the append part. If it is not cloned it will be "ripped" from your main document and placed inside the popup.

Old answer:

...

Here is a fiddle (With fixed typo/formatting).

Next problem is in your script you say:

$(".ddlAddListinTo li").click

However, there are no elements in DOM with class ddlAddListinTo.

OK, by comment:

after window.open(urlstring); you are still in DOM of document from where you opened the window. As such:

$("#divfrmInfo")

will look for an element in original document with that ID, not in the popup.

If you add something like this in the popup document*:

$(window).load(function() {
    // Call function "fill()" in opener.
    window.opener.fill(document);
});

And this in your opener document:

function fill(what) {
    // Here "what" is document of popup.
    what.getElementById("divfrmInfo").innerHTML = "TEST";
}

edited Feb 20 '14 at 02:05

answered Feb 19 '14 at 23:54

user13500

3,817
2
26
33

Corrected. it's a typo. – BumbleBee Feb 19 '14 at 23:57
.ddlAddListinTo is a class in the parent page, which i didn't paste in the question. – BumbleBee Feb 20 '14 at 00:03
Thank u. It works fine only the first time. The second time on wards the div is not getting filled. What i mean by second time is i close the popup which has been opened previously and again try to open the popup. – BumbleBee Feb 20 '14 at 01:54
@BumbleBee: That is because you move the `$form` from your main document to the popup. After you have done it once `frmPostToEmailReports` no longer exists in your main doc, and on popup-close it is destroyed all together. – user13500 Feb 20 '14 at 02:02
I think this defeats the purpose. I want have the $form in the parent window at all times. – BumbleBee Feb 20 '14 at 02:05

score 1 · Answer 3 · edited May 23 '17 at 12:20

THe problem is you are tring to aceess the DOM of the spawned page before it is there. The window is loaded but the HTML is still being loaded at the time you are trying to access it. You will need to change the parent and popup page. On the parent page you will need a function to return what you want to populate the pop up with. On the popup page you will want to call the function on the parent page when the DOM is ready.

Something like:

Parent Page

//Add this OUTSIDE your document ready
function getContent(){
    return $("#frmPostToEmailReports");
}

Popup

//Include Jquery in your prefered way   
<script>
    $(document).ready(function () {
        $("#divfrmInfo").append(window.opener.getContent());
    });
</script>

Alos make sure to remove where you attempt to pupulate in the success function. Also see: How to get element and html from window.open js function with jquery

Previous Useless Answer Below

See this answer to get you started.

Instance you will want something like:

$(".ddlAddListinTo li").click(function () {

    var urlstring = "../ActionTypes";
    var ddlselectedVal  = $(this).attr('id');
    var $form = $("#frmPostToEmailReports");


    var AgentId = $form.find("#AgentId").val();
    var ReportName = $form.find("#ReportName").val();
    var Params = $form.find("#Params").val();


    if (ddlselectedVal != "None" && ddlselectedVal != "select") {

      $.post(urlstring, { AgentId: AgentId, ReportName: ReportName, Params: Params  },
         function (data) {
           var popup = window.open(urlstring);
           popup.document.$("#divfrmInfo").append($form);

        });      
} });

He could also use `popup.onload` to avoid having to modify his popup code. — aebabis, Feb 20 '14 at 01:53

Insert a form field into a popup page using jquery

3 Answers3

Old answer: