загрузить результаты поиска в div jquery и rails

Question

В моем приложении rails есть панель поиска, где пользователи могут искать других пользователей.В настоящее время, когда пользователь отправляет запрос на поиск, он перенаправляется на страницу «результатов».Я хочу загрузить эти результаты в div на той же странице ... Я смог сделать это с помощью навигационных ссылок на моих сайтах, но я довольно новичок в jQuery и rails и не могу понять это ...

мой jQuery, соответствующий моим ссылкам навигации:

$(function() {
    $('#links a').live('click', function() {
        $('#pages').load(this.href).fadeIn('slow');
        return false;
    });
});

моя попытка сделать то же самое с моей функцией поиска ...

$(function() {
  $("input#search").parents("form").submit(function() {
    $('#pages').slideUp('slow').load(this.href).slideDown('slow');
    return false;
  });
});

любая помощь будет высоко ценится ~вместе с некоторыми полезными jQuery учебниками для новичка !!

моя форма:

<div id="search_bar">
  <form action="/search" method="get">
    <input class="tb10" id="search" name="search" onclick="this.select();" type="text" value="Find Users" />
  </form>
</div>

Answer 1

попробуйте return false; также в функции поиска. возвращение false отменяет событие по умолчанию, вызванное на элементе.

Answer 2

Я не могу дать вам пример RoR здесь, но я думаю, что ответ весь о JQuery.

В основном я вижу, что это сделано с помощью ajax-запроса, чтобы получить результат поиска и показать его с помощью системы шаблонов, такой как jquery Templates или Mustache.

Этот подход облегчит вам создание html вместо того, чтобы пытаться закачать веб-страницу в div

Шаблоны JQuery: http://api.jquery.com/category/plugins/templates/ Усы для рельсов: https://github.com/adamsalter/mustache-rails

Answer 3

В первом примере вы привязываете событие к якору, у которого есть элемент href, который читает его, чтобы узнать, откуда взять ваши ссылки.

Во втором случае похоже, что вы скопировали и вставили то, что сработало для ваших ссылок. Вам нужно знать, где обрабатывается ваша форма (действие вашей формы) и что передается ей в виде данных формы. В jquery это делается следующим образом: (я предполагаю, что #search - это идентификатор вашей формы поиска)

$(function(){
     $("#search").submit(function(){
         var queryString = $(this).serialize(); //gets the values in your form
         var url = $(this).attr("action"); //your action url
         $("#pages").load(url+"?"+queryString).fadeIn('slow');
         return false; //this prevents your form from doing its default behavior.
     });
});

Я не очень знаком с RoR, но JQuery должен быть твердым:)

Надеюсь, это поможет!