JQuery + Coffeescript

rubyonrails-talk
1

Hi..I would be happy to get some support.

What I want is: 1. a query field #type in some letters looking for a name 2. a dynamic updated list according to the typed-in letters

What I have:

#view <%= text_field_tag :query%>

<ul id='results'>   <%@clients.each do |client|%>       <li><%= client.name%></li>   <%end%> </ul>

#controller def search     @clients = Client.where("name like ?", "%#{params[:query]} %").limit(5) end

#coffee jQuery ($) ->   $("#query").change ->     $.get "search", (data) ->       $("#results").html data

What is happing now is that it lists all names..and if I type in some letters and click return ..the whole page is getting rendered again..in the list

How code it right? Thanks

2

What I have:

#view <%= text_field_tag :query%>

<ul id='results'> <%...@clients.each do |client|%> <li><%= client.name%></li> <%end%> </ul>

#controller def search @clients = Client.where("name like ?", "%#{params[:query]} %").limit(5) end

#coffee jQuery ($) -> $("#query").change -> $.get "search", (data) -> $("#results").html data

What is happing now is that it lists all names..and if I type in some letters and click return ..the whole page is getting rendered again..in the list

Your javascript is not actually doing anything with the value of the query text field (take a look at the params received by your code). The get method takes as its optional 2nd argument a map or string of data, ie in your case {query: $(this).val()} (since this is in that event handler, 'this' will be the text field. You also want to ask rails to render without a layout. You can either do this with render :layout => false or you can set the layout at the controller level

Fred

3

Hi Fred thanks…

What I have:

#view <%= text_field_tag :query%>

    <%...@clients.each do |client|%>
  • <%= client.name%>
    • <%end%>

#controller def search @clients = Client.where(“name like ?”, “%#{params[:query]} %”).limit(5) end

#coffee jQuery ($) → $(“#query”).change → $.get “search”, (data) → $(“#results”).html data

Your javascript is not actually doing anything with the value of the query text field (take a look at the params received by your code).

SELECT clients.* FROM clients WHERE (name like ‘%%’)

=> true… :frowning:

Can you please tell me some more about… as I am not really familiar with js/coffee

$.get “search”, (data) →

As I understand it in (data) should be the value of :query giving it to the action search

@clients = Client.where(“name like ?”, “%#{params[:query]}%”)

But this is not happening

The get method takes as its optional 2nd argument a map or string of data, ie in your case {query: $(this).val()} (since this is in that event handler, ‘this’ will be the text field.

This is a little unclear to me.

You also want to ask rails to render without a layout. You can either do this with render :layout => false or you can set the layout at the controller level

Thanks for your patience.

Werner Laude

webagentur.laude@gmail.com

4

Here is what you need to do (there are multiple ways of doing it, I am showing you an easy one, definitely not the best one).

You actually have 2 different views, one that renders the search page and another one that renders only the list content, which is invoked through jquery. The behavior you see now is because you use just one view.

#view <%= text_field_tag :query%>

<%…@clients.each do |client|%>

  • <%= client.name%>
    • <%end%>

    needs to become

    #view <%= text_field_tag :query%>

    #view - results

    <%…@clients.each do |client|%>

      <li><%=  [client.name](http://client.name/)%></li>

    <%end%>

    Your controller needs to become

    controller def search end

    def results @clients = Client.where(“name like ?”, “%#{params[:query]} %”).limit(5) render :layout => false end

    and your coffeescript

    #coffee jQuery ($) → $(“#query”).change → searchText = $(“#query”).val() # Need to uriEncode searchText here, there should be a good jquery way to do so.

    $.get “/path to your route/results?query=#{searchText}”, (data) →

    $(“#results”).html data

    Please keep in mind that I haven’t done anything in rails for quite some time, so the above code is not perfect and probably contains bugs. But it should show the general idea.

    5

    >> #coffee >> jQuery ($) -> >> $("#query").change -> >> $.get "search", (data) -> >> $("#results").html data

    > Your javascript is not actually doing anything with the value of the > query text field (take a look at the params received by your code).

    SELECT `clients`.* FROM `clients` WHERE (name like '%%') => true.. :frowning:

    Can you please tell me some more about.. as I am not really familiar with js/coffee

    >> $.get "search", (data) ->

    As I understand it in (data) should be the value of :query giving it to the action search

    actually, no, here data is the parameter that is passed to your ajax callback function (which contains the response from the server).

    @clients = Client.where("name like ?", "%#{params[:query]}%")

    But this is not happening

    When you make an ajax request like that, you need to actually set the parameters that you want to pass. Right now you're passing no parameters, so params[:query] is nil

    $.get 'search', {query: 'foo'}, (data) ->   ...

    would result in params[:query] being foo

    and

    $.get 'search', {query: $('#query').val() }, (data) ->   ...

    would pass the value of the field with id query (and since this code is being called from the change event handler attached to the text field, you can shorten that slightly to $(this).val() instead of $ ('#query').val()

    Fred

    6

    Thanks Fred…

    great…

    $.get ‘search’, {query: $(‘#query’).val() }, (data) → …

    would pass the value of the field with id query (and since this code is being called from the change event handler attached to the text field, you can shorten that slightly to $(this).val() instead of $ (‘#query’).val()

    Werner Laude

    webagentur.laude@gmail.com