使用jquery将表单域插入弹出页面

时间:2014-02-19 23:35:27

标签: javascript jquery

我正在尝试将表单字段插入弹出页面。由于某种原因,表单字段未插入。任何指针。粘贴如下是代码:

$(".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:

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

3 个答案:

答案 0 :(得分:1)

我认为AJAX回调中的选择器无法在弹出窗口中获取DOM元素。试试这个:

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

答案 1 :(得分:1)

opener 文档中,你可以做更多这样的事情。

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

     ...

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

这样你就可以通过jQuery附加到弹出的加载事件。

查看附加部分.clone()。如果没有克隆,它将从主文档“ripped”并放入弹出窗口。


旧答案:

...

Here is a fiddle(使用固定的拼写错误/格式化)。

下一个问题出现在你的脚本中:

$(".ddlAddListinTo li").click

但是,DOM中没有类ddlAddListinTo


好的,评论:

window.open(urlstring);之后,您仍处于打开窗口的文档的DOM中。就这样:

$("#divfrmInfo")

将在原始文档中查找具有该ID的元素,而不是在弹出窗口中。


如果您在 弹出文档 * 中添加类似内容:

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

这是在 开启者文档

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

答案 2 :(得分:1)

问题是你在生成页面的DOM之前是否要使用它。窗口已加载,但在您尝试访问时仍在加载HTML。您需要更改父页面和弹出页面。在父页面上,您将需要一个函数来返回您想要填充弹出窗口的内容。在弹出页面上,您将要在DOM准备好时调用父页面上的函数。

类似的东西:

父页面

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

<强>弹出

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

Alos确保删除您在成功功能中尝试瞳孔的位置。另请参阅:How to get element and html from window.open js function with jquery

以下无用的答案

请参阅this answer以帮助您入门。

您需要的实例如下:

$(".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);

        });      
} });