JQuery + Coffeescript

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

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

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

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.

    >> #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

    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