検索結果をdiv jquery and railsにロード

Question

私のレールアプリでは、ユーザーが他のユーザーを検索できる検索バーがあります。現在ユーザーが検索結果を送信すると、結果ページにリダイレクトされます。私は同じページのdivにこれらの結果をロードしたいと思います。私は自分のウェブサイトのナビゲーションリンクでこれを行うことができましたが、私はjQueryとレールを使い慣れていないので、これを理解することはできません...

私の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

あなたの最初の例では、あなたのリンクを取得する場所を知るためのhref要素を持つアンカーにイベントをバインドします。

あなたのリンクに適したものをコピーして貼り付けたようです。フォームが処理されている場所（フォームの動作）と、フォームデータとして渡されているものを知る必要があります。 jqueryの中で次のようにこれが行われます。私はRoRのに非常に精通していないよ

$(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. 
    }); 
}); 

（私は#searchを仮定していることはあなたの検索フォームのIDである）が、jqueryのは固体でなければなりません:)

希望に役立ちます！

Answer 3

現時点ではRoRの例はありませんが、その答えはJQueryに関するものだと思います。

基本的には、検索結果を取得し、その結果をjquery TemplatesやMustacheのようなテンプレートシステムで表示するためのajaxリクエストがあります。 、私はちょうどテストをしたhttps://github.com/adamsalter/mustache-rails