CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
mOna
mOna

Reputation: 2459

ajax html response custom show

I have a PHP survey form in which one of the question is "What are your favourite movies?" For this question, there is a radio button with values "By Title" and "By actor". If user select "By actor", a textbox appears where he can write an actor name (with jQuery auto-complete feature). Then, if click a button "Movies by this actor", a new window appears where he/she will see list of movies by that actor inserted in the textbox. Below is the image to explain better:

enter image description here

My question:

How can I show this list of movies as selectable links or icons with a small image beside them? (like amazon search, that when we write an actor name in the textbox, by clicking "Go" button, it shows list of movies with link and image).

This is my code:

<html>
<body>
<div id="m_scents2" class="field2" style="display:none;">
    <input type="textbox" name= "tag" id="tags" placeholder="Enter an actor/actress name here" />
    <input type="button" value="Movies by this actor" id="btnRight" />
</div>

<script type="text/javascript">
var selectedVal;

$(document).ready(function () {
//....
//...
if ($(this).val() == "byActor"){
        $("#m_scents").hide();  
        $("#m_scents2").show();
        $("#tags").focus();
        $("#tags").autocomplete({
                     source: "actorsauto.php",
                     minLength: 2,
                     focus: function( event, ui ){
                        event.preventDefault(); 
                        return false;
                     },
                     select: function (event, ui){ 
                        window.selectedVal = ui.item.value;
                     }
                  });  
 });
</script>
</body>
</html>

$('#btnRight').on('click', function (e) {
           popupCenter("movieByactor.php","_blank","400","400");
  });

and here is a child code(movieByactor.php):

<html>
<body>
<div id= "field"
</div>

 <script type="text/javascript">
  var selectedVal = parent.window.opener.selectedVal; 

 $.ajax({
         url: 'childfilm.php',  //THIS IS A PHP FILE CONTAIN QUERY TO SELECT MOVIES BY THE INSERTED ACTOR IN THE TEXTBOX
         datatype: "json",
         data:{q:selectedVal},
         success: function(response) {     
                     $("#field").html(response);
                   }
        });
</script>
</body>
</html>

UPDATE_1:

this is childfilm.php:

if(isset($_GET['q']) && !empty($_GET['q'])){
try{ 

    include('imdbConnection.php');
    $sql = $conn->prepare("SELECT DISTINCT movieName FROM cast_movie WHERE castName = :q");
    $sql->execute(array(':q' => $_GET['q']));

    while($rows = $sql->fetch(PDO::FETCH_ASSOC)){
       $option = '<option value="' . $rows['movieName'] . '">' . $rows['movieName'] . '</option>';
       $html .= $option;
       }

    } catch(PDOException $e){
           echo 'ERROR: ' . $e->getMessage();
       }
   echo $html; 
   exit;

Upvotes: 2

Views: 246

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34406

You just need changes to your output to suit your situation. For instance, changing this line - 

$option = '<option value="' . $rows['movieName'] . '">' . $rows['movieName'] . '</option>';

to something like -

$option = '<a href=movie.php?title="' . $rows['movieName'] . '">' . $rows['movieName'] . '</a><br />';

will output a link to a page called movie.php which references the title of the movie in the query string, for example - 

http://www.example.com/movie.php?title=Big

You can add pictures, icons or any markup that you desire for each of the returned items.

Upvotes: 1

Related Questions