CODEWITHSUNDEEP
javascriptjqueryhtmlcsshide
Jamiex304
Jamiex304

Reputation: 242

Cant Get jQuery hide working

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

enter image description here

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();
  });

Upvotes: 0

Views: 108

Answers (1)

nach
nach

Reputation: 369

If that's the code you're using you have to refer to searchresult with a "#". And if you're using the live event handler twice you should trigger all the events in the same handle:

$('.search-btn').on('click', function() {
getImdbInfo( $(this).closest('tr').find('.results-title').text());
$("#searchresult").hide();
});

You can also get rid of the class parameter, there is no need for it.

edit: And I'm agree with using 'on' instead of live. The browser will handle it but not always in the way we can expect.

Upvotes: 4

Related Questions