Question

我＆＃39;对客户的请求，其中页面中有表单，我可以从（例如）作业列表中选择，而其他字段对于此示例无用。如果作业不在列表中，我需要单击添加另一个以打开新页面，我可以插入新页面。

parent.php：

<select>
  <option value="1">job 1</option>
  <option value="2">job 2</option>
  <option value="3">job 3</option>
</select>
<a id="btn-add-new" target="_blank" href="newjob.php">Add another one</a>

<submit>SEND FORM</submit>

我的目标是，在newjob.php中，在新插入之后，关闭页面（因为它用_blank打开），然后返回插入的新ID并在我的parent.php中使用新ID预选select返回。

newjob.php：

<input type="text" name="job_name" value="">
...
...
others fields ( a lot..)
...
...
<submit>Save job</submit>

我知道我可以打开一个模态并使用ajax来简化它 ..但我需要使用已经完成的newjob.php页面因为它有很多其他字段而且我不喜欢＃39; t想要为parent.php中的模态复制它

是否有解决方案或者我必须使用modal和ajax，当然，复制newjob.php的HTML / PHP以将其插入模态？！

Answer 1

您必须在同一页面上执行此操作。没有其他办法。但您可以使用已经正常工作的newjob.php。

只需对newjob.php进行ajax调用，然后将其附加到模态。

修改

如果你只想追加<div id="primaryContentPage"...>而不是ajax那么做。

$.ajax({ //your parameters... success: function (data) { $("yourModalId").append($(data).find("#primaryContentPage")); } });

yourModalId id模式的newjob.php，您要添加页面内容{{1}}

Answer 2

我找到了这个有用的教程：https://www.techcoil.com/blog/how-to-use-jquery-to-access-the-dom-structure-of-parent-html-webpage-from-within-the-child-html-window/

父母页面：

$(document).ready(
        function () {
            $('#linkToSpawnChildWebPage').click(

                function (event) {
                    event.preventDefault();
                    window.open('child.php','_blank','height=600,width=1024, status=yes,toolbar=no,menubar=no,location=no'); 
                }
            );
        }
    );

<a id="linkToSpawnChildWebPage" class="actionLink">Spawn child web page</a>

<div id="messagesArea"></div>

child.php

var parentWindow = window.opener;

function addMessageToWebPage(msg) {

    $messageArea = parentWindow.$('#messagesArea');
    $messageArea.html("MESSAGE TO RETURN TO PARENT");

}

$(document).ready(
    function() {

        if (!parentWindow) {    
            //alert('Unable to get a reference to parent window.');       
        } 
        else {
            $('#messageForm').submit(               
                function(event) {
                    addMessageToWebPage($('#messageTextField').val());
                    //event.preventDefault();
                }

            );
        }       
    }
);

将数据传递回父页面而不使用模态

2 个答案: