I have a list of search results, with embedded links that take you to an individual result detail. However, the details are small, and I would like to do an in-place substitution of the linked para with the result detail. So user searches, gets a list of results, clicks on link for one of the results, and the result detail fades in below that item.
The result list is already the result of an ajax call:
$.ajax({
type: 'GET',
dataType: 'html',
cache: false,
url: 'search.php',
data: terms,
success: function(result) {
var details = $("#results",result).html();
$("#results").html(details).fadeIn('slow');
$('a',"#results").click(function(e) {
e.preventDefault();
alert('bingo!'); /* this where I need to set up the replacement I guess */
});
}
});
with the <a> tag already set up to find the result:
<a href="search.php?id=1409">
which I'd like to use to fetch the inline replacement. Half my problem is understanding how to get the detail to fade in!
Use .load() . It does the equivalent of .html() and .ajax() combined together.
Short Example:
$.ajaxSetup({
cache:false,
type: "GET"
});
$("#results a").click(function(){
$("#results").hide(0).load('search.php', terms).fadeIn('slow');
});