将图像与链接集成

时间:2014-11-12 12:33:46

标签: javascript php jquery html mysql

嗯,我认为通过下面的图片解释我的问题可能更容易:

enter image description here

从图中可以看出,如果用户选择"按标题",将出现一个文本框,用户可以在其中编写电影标题(我也使用jQuery自动完成此文本框)。然后,如果用户点击按钮"电影按此标题",将会显示一个新窗口,其中包含文本框中包含该术语的电影列表。

我的问题:

我想将这些电影的一个小图片整合在一起(可能还有其他一些信息,如电影年,类型......),就像亚马逊所做的那样(Please see here)。我使用renderitem作为自动完成部分并且它工作正常,但实际上我不知道如何在新窗口中执行相同操作..如果有人可以帮助我,我将非常感激。

这是我的代码:

<div id="m_scents" class="field">
   <label style="margin-bottom:10px;" for="m_scnts"></label>
   <input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
   <input type="button" value="Movies by this title" id="btnMove" style="display:none;"/> 
</div>

<script type="text/javascript">
var selected;
$(document).ready(function () {
    $("input[id='selectType']").change(function(){
         if ($(this).val() == "byTitle") {
              $("#m_scents2").hide();
              $("#btnMove").show();
              $("#m_scents").show();
              $("#q").focus();
              $("#q").autocomplete({
                   minLength: 0,
                   delay:5,
                   source: "query.php",
                   focus: function( event, ui ){
                             event.preventDefault();
                             return false;
                        },
                    select: function( event, ui ) {
                             window.selected = ui.item.movieName;
                             return false;
                        }
              }).data("uiAutocomplete")._renderItem = function( ul, item ) {
                return $("<li></li>")
                    .data( "item.autocomplete", item )
                    .append( "<a>" + (item.posterLink?"<img class='imdbImage' src='imdbImage.php?url=" + item.posterLink + "' />":"") + "<span class='imdbTitle'>" + item.movieName + "</span>" + "<div class='clear'></div></a>" )
                    .appendTo( ul );
                };
        }
  });

$('#btnMove').on('click', function (e) {
      popupCenter("movieBytitle.php","_blank","400","400");
});
</script>

这是movieBytitle.php:

<body>
<div id= "field"
</div>
 <script type="text/javascript">
  var selected = parent.window.opener.selected; 
 $.ajax({
   url: 'childfilm.php',
   datatype: "json",
   data:{p:selected},
   success: function(response) {     
         $("#field").html(response);
     }
  });
</script>
</body>

这是childfilm.php:

<?php
 if(isset($_GET['p']) && !empty($_GET['p'])){
  try{ 
    include('imdbConnection.php');
    $sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));

    while($row = $sql->fetch(PDO::FETCH_ASSOC)){
       $option = '<a href=movie.php?title="' . $row['movieName'] . '">' . $row['movieName'] . '</a><br />';
       $html .= $option;

       }

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

更新:

这是新的childfilm.php(感谢@ghost帮助):

if(isset($_GET['p']) && !empty($_GET['p'])){
    include('imdbConnection.php');
    $sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));
}
?>

<table>
    <tr>
        <th></th>
        <th>Title</th>
        <th>Year</th>
        <th>Genre</th>
    </tr>
    <?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
    <tr>
        <td><img class='imdbImage' src='imdbImage.php?url="<?php echo $row['posterLink'];?>'</td>
        <td><a href="movie.php?title=<?php echo urlencode($row['movieName']); ?>"><?php echo $row['movieName']; ?></a></td>

    </tr>
    <?php endwhile; ?>
</table>

这是imdbImage.php:

<?php
header("Content-type: image/jpeg");
$url = rawurldecode($_REQUEST['url']);
echo file_get_contents($url);
?>

新问题:

这是结果(仍然,图像没有正确显示): enter image description here

1 个答案:

答案 0 :(得分:1)

如果您已经在表格中获得了这些信息,那么只需将其包含在提取中并以表格形式显示:

<?php
if(isset($_GET['p']) && !empty($_GET['p'])){

    include('imdbConnection.php');

    $sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));

}

?>

<table>
    <tr>
        <th></th>
        <th>Title</th>
        <th>Year</th>
        <th>Genre</th>
    </tr>
    <?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
    <tr>
        <td><img src="path/to/images/<?php echo $row['filename']; ?>" alt="" /></td>
        <td><a href="movie.php?title=<?php echo urlencode($row['movieName']); ?>"><?php echo $row['movieName']; ?></a></td>
        <td><?php echo $row['year']; ?></td>
        <td><?php echo $row['genre']; ?></td>
    </tr>
    <?php endwhile; ?>
</table>