CODEWITHSUNDEEP
phpjqueryajaxdrop-down-menuautocomplete
mOna
mOna

Reputation: 2459

dynamic dropdown displays nothing

I am trying to enable user select movies by title or by Actors (e.g in case that he forgot the movie name but remembered an actor/actress in that movie, he would be able to find movie by typing the actor name). I used jQuery auto-comlete to get movie names or actor names.

Below is what I have tried. The auto-complete parts works fine (i.e, when user choose moviebyTitle and start writing the title, the autocomplete suggestion works, also for actor names.

Problem:

When user write the actor name, autocomplete works fine, Also a dynamic dropdown menu will be appeared, but the problem is that this dropdown displays nothing :| Could someone kindly help me find what is the problem with this code? Thanks,

<select id="selectType" name="source">
  <option value="">MoviesBy</option>
  <option value="byTitle">byTitle</option>
  <option value="byActor">byActor</option>
</select>

<input type="textbox" name= "tag" id="tags">

<select id="movieImdbId" name="movieImdbId[]" multiple="multiple" width="200px" size="10px" style="display: none;">  
</select>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
           //Create widget with default data source
           $("#tags").autocomplete({
               source: "actorsauto.php",
               minLength: 2
           });

           $("#selectType").change(function () {
               // Assign new data source like that :

               if ($(this).val() == "byTitle")
                   $("#tags").autocomplete("option", "source", "filmsauto.php");
               else 
                if ($(this).val() == "byActor"){

                  $("#tags").autocomplete({
                  source: "actorsauto.php",
                  minLength: 2,
                  select: function (event, ui){
                    var selectedVal = $(this).val(); //this will be your selected value from autocom plete
                 // Here goes the ajax call.

                   $('#movieImdbId').show();
                   $.post("actions.php", {q: selectedVal, q2: $("#selectType").val()}, function (response){
                // response variable above will contain the option tags. Simply put in the dropdown.

                $("#movieImdbId").html(response);
              });
          }
        });
      }
    });
});

</script>

and here is the actions.php:

<?php

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

$q = $_GET['q'];
$q2 = $_GET['q2'];

include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieImdbId FROM movie_roleNames WHERE castName = :q");
$sql->execute(array(':q' => $q));

// Initialize a variable that you will send back to your ajax call, its still waiting for this script to be completed.
$html = "";

$results = $sql->fetchAll(PDO::FETCH_OBJ);

while($results as $row){

   $option = '<option value="' . $row['movieImdbId'] . '">' . $row['movieImdbId'] . '</option>';

$html .= $option;
}
echo $html; 
exit;
}

?>

UPDATE:

This is what I see:

enter image description here

Upvotes: 0

Views: 111

Answers (1)

Ram Sharma
Ram Sharma

Reputation: 8819

You are mixing mysql and PDO so try to use PDO instead of mysql. You also need to add value in $html variable instead of overwrite value again and again. change lower part of code like this because you are 

$results = $sql->fetchAll(PDO::FETCH_OBJ);
while($results as $row){

   $option = '<option value="' . $row->movieImdbId . '">' . $row->movieImdbId . '</option>';

$html.= $option;
}
echo $html;
exit;

Upvotes: 1

Related Questions