在新的弹出窗口中使用 ajax 调用答案

【问题标题】：use ajax call in new pop up window在新的弹出窗口中使用 ajax 调用
【发布时间】：2014-10-31 15:42:31
【问题描述】：

我有一个自动完成的文本框，用户可以在其中插入演员姓名，并且工作正常。有一个“浏览电影”按钮，它应该填充一个动态下拉列表，显示用户在文本框中插入的演员的电影列表。此外，还有另一个“添加到列表”按钮，如果用户单击它，则此下拉列表（电影）的选定选项将添加到另一个下拉列表中，该下拉列表显示用户选择的所有电影。

问题

我可以在用户单击按钮时动态填充下拉列表，也可以将所选选项移动到新下拉列表 (selecteditems)，但问题是我想 在新的弹出窗口中显示此下拉列表（不在用户在文本框中插入的同一页面中）。我真的不知道该怎么做.. 我应该在 target.html （新的弹出窗口）中进行 ajax 调用吗？如果有人能告诉我如何做到这一点，我将不胜感激。

这是我尝试过的：

<script type="text/javascript">
$(document).ready(function () {
  $("#tags").autocomplete({
           source: "actorsauto.php",
           minLength: 2,
           select: function (event, ui){
                    $("#tags").on('autocompletechange change', function (){
                         var selectedVal = $(this).val(); //this will be your selected value from autocomplete
                 // Here goes your ajax call.      
                       $.post("actions.php", {q: selectedVal}, function (response){
                               console.log(response);
                               $("#movieName").html(response).show();
                        });
                    }).change();
             }
 });

$('#btnRight').on('click', function (e) {
         var selectedOpts = $('#movieName option:selected');
         if (selectedOpts.length == 0) {
             alert("Nothing to move.");
             e.preventDefault();
         }

         $('#selectedItems').append($(selectedOpts).clone());
         $(selectedOpts).remove();
         $("#movieName").hide();
         $("#tags").val("");
        e.preventDefault();
 });

     function openWindow() { 
        window.open("target.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); 
     } 
  </script>

<html>
<body>
<input type="textbox" name= "tag" id="tags" style="display:none;" placeholder="Enter an actor/actress name here" />
<input type=button onclick="javascript:openWindow()" value="Browse movies by this actor">
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style=display:none;>
<input type="button" value=">> Add to selected list >>" id="btnRight" style="display:none;" />
<select id="selectedItems" name="selectedItems[]" multiple="multiple" style="width:200px; size:10px;">
</select>
</select>
</body>
</html>

【问题讨论】：

您希望结果显示在新的浏览器窗口/选项卡中还是在同一页面中显示弹出对话框？
@jwnace：我只是不想在同一页面中填充下拉列表，因为稍后我将隐藏此下拉列表并且我遇到了一些空间问题（我的意思是它在界面），所以我决定在新窗口中显示它......

标签： php jquery ajax popup window.open

【解决方案1】：

你可以试试这样的。如有错误或垃圾请见谅

target.html

// this goes in target.html
$('#tags').autocomplete({
    source: "actorsauto.php",
    minLength: 2,
    select: function (event, ui) {
        $("#tags").on('autocompletechange change', function () {
            var selectedVal = $(this).val(); //this will be your selected value from autocomplete
            // Here goes your ajax call.
            // here's some magic. using window.opener allows you 
            // to access variables and functions defined in the parent window.      
            window.opener.getMovies(selectedVal);
        }).change();
    }
});

page.html

// this stays in your parent window
function getMovies(value) {
    $.post("actions.php", { q: value}, function (response) {
        console.log(response);
        $("#movieName").html(response).show();
    });
}

【讨论】：

感谢您的回答，如果我迟到了，很抱歉，但您能告诉我我必须在哪里打电话给 target.hmtl 吗？另外，我更喜欢将自动完成功能保留在主页中，并且只有动态下拉菜单应在新窗口中打开（目标，html）