javascript - Cant Get jQuery hide working -
i running search @ starts displays image , title etc when more info button clicked title , plot of selected movie shows
when button clicked want hide other results using jquery hide function none of attepmts have worked
i have inclued code , sample image u can see coming
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 more button click runs search using title of movie next $('.search-btn').live('click', '.search-btn', function() { getimdbinfo( $(this).closest('tr').find('.results-title').text()); }); //the function below takes entered title , searchs imdb match displays 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 have tried
//the button hides original search displaying info selected movie $('.search-btn').live('click', '.search-btn', function() { $("#searchresult").hide(); });
if that's code you're using have refer searchresult "#". , if you're using live event handler twice should trigger events in same handle:
$('.search-btn').on('click', function() { getimdbinfo( $(this).closest('tr').find('.results-title').text()); $("#searchresult").hide(); }); you can rid of class parameter, there no need it.
edit: , i'm agree using 'on' instead of live. browser handle not in way can expect.
Comments
Post a Comment