Monday, 15 April 2013

php - use ajax call in new pop up window -



php - use ajax call in new pop up window -

i have auto-complete textbox user can insert actor name , works fine. there button "browse movies" should populate dynamic dropdown showing list of movies actor user has inserted in text-box. also, there button "add list" if user click on it, selected options of dropdown (movies) whould added dropdown shows selected movies user.

problem

i populate dropdown dynamically when user clicked button, move selected options new dropdown (selecteditems), problem want show dropdown in new pop-up window (not in same page user insert in text-box). don't know how it.. should create ajax phone call in target.html (the new pop window)? appreciate if can allow me know how can this.

this tried:

<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 selected value autocomplete // here goes 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 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 actor/actress name here" /> <input type=button onclick="javascript:openwindow()" value="browse movies actor"> <select id="moviename" name="moviename[]" multiple="multiple" width="200px" size="10px" style=display:none;> <input type="button" value=">> add together selected list >>" id="btnright" style="display:none;" /> <select id="selecteditems" name="selecteditems[]" multiple="multiple" style="width:200px; size:10px;"> </select> </select> </body> </html>

you seek this. sorry mistakes or if it's rubbish

target.html

// 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 selected value autocomplete // here goes ajax call. // here's magic. using window.opener allows // access variables , functions defined in parent window. window.opener.getmovies(selectedval); }).change(); } });

page.html

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

php jquery ajax popup window.open

No comments:

Post a Comment