CODEWITHSUNDEEP
javascriptjquery
BumbleBee
BumbleBee

Reputation: 10799

Insert a form field into a popup page using jquery

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>

Upvotes: 1

Views: 2101

Answers (3)

user13500
user13500

Reputation: 3856

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";
}

Upvotes: 1

Jon P
Jon P

Reputation: 19787

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);

        });      
} });

Upvotes: 1

aebabis
aebabis

Reputation: 3715

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);

Upvotes: 1

Related Questions