Как заменить кампании индивидуальным результатом в jQuery

#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'); 
});
  

http://api.jquery.com/load#urldatacallback

Комментарии:

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, поскольку ему, похоже, это нужно больше, чем мне 😉