использовать вызов ajax в новом всплывающем окне

Question

использовать вызов ajax в новом всплывающем окне

У меня есть автозаполнение текстового поля, где пользователь может вставить имя актера, и он работает нормально. Есть кнопка «просмотреть фильмы», которая должна заполнять динамический выпадающий список, показывающий список фильмов по актеру, который пользователь вставил в текстовое поле. Кроме того, есть еще одна кнопка «Добавить в список», которая, если пользователь щелкнет по ней, выбранные параметры этого раскрывающегося списка (фильмы) будут добавлены в другое раскрывающееся меню, в котором отображаются все выбранные пользователем фильмы.

проблема

Я мог заполнить раскрывающийся список динамически, когда пользователь нажал кнопку, также я мог переместить выбранные параметры в новый раскрывающийся список (selecteditems), но проблема в том, что я хочу показать этот выпадающий список в новом всплывающем окне (не на той же странице, где пользователь вставил текстовое поле). Я действительно не знаю, как это сделать .. я должен сделать ajax-вызов в target.html (новое всплывающее окно)? Я ценю, если кто-то может дать мне знать, как я могу это сделать.

Вот что я попробовал:

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

0

ajax jquery php popup window.open

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете попробовать что-то вроде этого. Извините за любые ошибки или если это мусор

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

0