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.
我有一个搜索结果列表,其中包含嵌入式链接,可以将您带到单个结果详细信息。但是,细节很小,我想用结果细节对链接的para进行原位替换。因此,用户搜索,获取结果列表,点击其中一个结果的链接,结果详细信息在该项目下方淡入淡出。
The result list is already the result of an ajax call:
结果列表已经是ajax调用的结果:
$.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!
我想用它来获取内联替换。我的一半问题是了解如何让细节淡入!
2 个解决方案
#1
1
Use .load()
. It does the equivalent of .html()
and .ajax()
combined together.
使用.load()。它相当于将.html()和.ajax()组合在一起。
Short Example:
简短示例:
$.ajaxSetup({
cache:false,
type: "GET"
});
$("#results a").click(function(){
$("#results").hide(0).load('search.php', terms).fadeIn('slow');
});
http://api.jquery.com/load#urldatacallback
http://api.jquery.com/load#urldatacallback
#2
0
For the sake of completeness, the code I ended up using was:
为了完整起见,我最终使用的代码是:
$('a',"#results").click(function(e) {
e.preventDefault();
var link = this;
var para = $(link).parent();
var my_id = $(link).attr("href").match(/\d+/);
$('<div id="results_'+my_id+'">').insertAfter(para);
$('#results_'+my_id).hide().load("search.php #results > table", {id:my_id}).fadeIn('slow').slideDown('slow');
$(link).unbind('click').click(function(e) {
e.preventDefault();
$('#results_'+my_id).toggle();
});
});
However, for for the sake of fairness, and despite not really answering the question, I've given the vote to conqenator as he seems to need it more than me ;-)
然而,为了公平起见,尽管没有真正回答这个问题,我还是给了conqenator投票,因为他似乎比我更需要它;-)
#1
1
Use .load()
. It does the equivalent of .html()
and .ajax()
combined together.
使用.load()。它相当于将.html()和.ajax()组合在一起。
Short Example:
简短示例:
$.ajaxSetup({
cache:false,
type: "GET"
});
$("#results a").click(function(){
$("#results").hide(0).load('search.php', terms).fadeIn('slow');
});
http://api.jquery.com/load#urldatacallback
http://api.jquery.com/load#urldatacallback
#2
0
For the sake of completeness, the code I ended up using was:
为了完整起见,我最终使用的代码是:
$('a',"#results").click(function(e) {
e.preventDefault();
var link = this;
var para = $(link).parent();
var my_id = $(link).attr("href").match(/\d+/);
$('<div id="results_'+my_id+'">').insertAfter(para);
$('#results_'+my_id).hide().load("search.php #results > table", {id:my_id}).fadeIn('slow').slideDown('slow');
$(link).unbind('click').click(function(e) {
e.preventDefault();
$('#results_'+my_id).toggle();
});
});
However, for for the sake of fairness, and despite not really answering the question, I've given the vote to conqenator as he seems to need it more than me ;-)
然而,为了公平起见,尽管没有真正回答这个问题,我还是给了conqenator投票,因为他似乎比我更需要它;-)