jquery - My Second search is not working using javascript -
i using 2 apis tmdb , omdb
the tmdb search runs , returns titles given search want run second search using 1 of titles clicking more info button beside it.
that search using omdb not running when click button nothing happens
i have include code u can run yourselfs better understand , me problem here screenshot of search far easyier understand mean
code below
<html> <head> <title>sample seach</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.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'; $('#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('td').prev('.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; $.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>
i believe in jquery 1.5.x don't have .on() since available in jquery 1.7 according specs. instead, if bound version 1.5 should use .delegate(). if jquery version not issue try jquery 1.10 changing version in cdn path use.
further more, delegate function relies on binding event parent node. since document not real node try using document.body in example:
$(document.body).on('click', 'search-btn', function(){}); or in jquery 1.5 it's little reversed:
$(document.body).delegate('search-btn', 'click', function(){}); for title issue try using this:
$(this).closest('tr').find('.results-title').text();
Comments
Post a Comment