#jquery #ajax #fadein
#jquery #ajax #fadein
Вопрос:
У меня есть список результатов поиска со встроенными ссылками, которые приводят вас к подробному описанию отдельного результата. Однако детали невелики, и я хотел бы выполнить замену связанного пункта на месте подробным описанием результата. Итак, пользователь выполняет поиск, получает список результатов, нажимает на ссылку для одного из результатов, и подробная информация о результате исчезает под этим элементом.
Список результатов уже является результатом вызова 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 */
});
}
});
с <a>
тегом, уже настроенным для поиска результата:
<a href="search.php?id=1409">
который я хотел бы использовать для извлечения встроенной замены. Половина моей проблемы заключается в понимании того, как добиться того, чтобы детали исчезали!
Ответ №1:
Используйте .load()
. Он выполняет эквивалент .html()
и .ajax()
, объединенных вместе.
Короткий пример:
$.ajaxSetup({
cache:false,
type: "GET"
});
$("#results a").click(function(){
$("#results").hide(0).load('search.php', terms).fadeIn('slow');
});
Комментарии:
1. но для поиска требуются параметры из ссылки?
2. Итак, понижение? Вы, конечно, можете передать параметры в
data
параметр. Вы пробовали читать документацию?3. $(‘answer’).patronise().whine().rtfm() ? Да, голосуем против — я не нашел это полезным.
4. @Dycey: Вам не нужно явно передавать
dataType
иtype
. Они используются по умолчанию. Иcache
свойство может быть установлено через глобальные настройки ajax.5. Надеюсь, теперь я ответил на ваш вопрос.
Ответ №2:
Для полноты картины код, который я в итоге использовал, был:
$('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();
});
});
Однако, справедливости ради, и несмотря на то, что на самом деле я не ответил на вопрос, я отдал голос conqenator, поскольку ему, похоже, это нужно больше, чем мне 😉