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

我有一个自动完成的文本框，用户可以在其中插入参与者名称，它运行良好。有一个"浏览电影"按钮，它应该填充一个动态下拉列表，显示用户在文本框中插入的演员的电影列表。此外，还有另一个按钮"添加到列表"，如果用户点击它，该下拉列表（电影）的选定选项将被添加到另一个下拉列表中，该下拉菜单按用户显示所有选定的电影。

问题

我可以在用户单击按钮时动态填充下拉列表，也可以将所选选项移动到新的下拉列表（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>

您可以尝试这样的方法。抱歉有任何错误或是垃圾

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

问题

相关内容

最新更新

热门标签：