I am running a search that at the starts just displays the image and the title etc when the more info button is clicked the title and the plot of the selected movie shows up
When that button is clicked i want to hide all the other results using a jquery hide function but none of my attepmts have worked
I have inclued my code and a sample image so u can see were i am coming from
code here
<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var url = 'http://api.themoviedb.org/3/',
mode = 'search/movie',
input,
movieName,
key = '?api_key=API KEY HERE';
$('#search').click(function() {
var input = $('#movie').val(),
movieName = encodeURI(input);
$.ajax({
url: url + mode + key + '&query='+movieName ,
dataType: 'jsonp',
success: function(data) {
var table = '<table>';
$.each( data.results, function( key, value ) {
table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="150" height="200"></td><td class="results-title">' + value.original_title + '</td><td class="results-date">' + value.release_date +
'</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
});
$('#searchresult').html(table);
}
});
});
});
</script>
<script text="text/javascript">
// When the more button is click this runs a search using the title of the movie it is next to
$('.search-btn').live('click', '.search-btn', function() {
getImdbInfo( $(this).closest('tr').find('.results-title').text());
});
//The function below takes the entered title and searchs imdb for a match then it displays as followed
function getImdbInfo(Title) {
var url = "http://www.omdbapi.com/?t=" + Title + "&plot=full";
$.ajax({
url: url,
cache: false,
dataType: "jsonp",
success: function(data) {
var str = "";
str += "<h2>Title :" +data.Title+ "</h2>";
str += "<p>Plot :" +data.Plot+ "</p>";
$("#chosenresult").html(str);
},
error: function (request, status, error) { alert(status + ", " + error); }
});
}
</script>
</head>
<body>
<center>
<h1>Movie Search</h1>
<input id="movie" type="text" /><button id="search">Search</button>
</center>
<div id="chosenresult"></div>
<div id="searchresult"></div>
</body>
</html>
the hide function i have tried
//The button also hides the original search just displaying the info for the selected movie
$('.search-btn').live('click', '.search-btn', function() {
$("#searchresult").hide();
});