How to convert this observe_field to jquery

Question

I would like to use jquery instead of prototype and I am a bit lost to convert this observe_field in jquery.

<%=text_field_tag :section %>
<%= observe_field(:section, 
                  :frequency => 0.1, 
                  :update => "article_list",
                  :with => 'section', 
                  :url =>{ :action => :get_article_list }) %>

Here is my start:

$(document).ready(function() {
  $("#section").bind("keyup", function() {
    var url = '/catalogs/get_article_list';
    $.get(url, function(html) {
      $("#article_list").html(html);
    });
  });
});

I read this post but I think I'm missing something.

Would appreciate any explanations.

Thanks.

score 2 · Accepted Answer · answered Mar 27 '11 at 07:21

2

An observer, observers an event on any input element, when the event occurs it send a request to given url using ajax and update response on page in given element.

Here you got the event observing very well, so you have written the code to bind the keyup event of section element.

Now when the keyup event triggers you need to make an ajax request to server.

 $(document).ready(function() {
   $("#section").bind("keyup", function() {
   data = {this.name: this.val()}; // the value of input that need to send to server
   $.get(url, data, // make ajax request
     function(html) { // function to handle the response
      $("#article_list").html(html); // change the inner html of update div
     });
   });
 });

Hope this helps you to understand it.

answered Mar 27 '11 at 07:21

Naren Sisodiya

7,158
2
24
35

Thanks Naren, this is really clear, it almost works but not yet :) How data = {this.name: this.val()}; knows that is the "section" value which should be send to the server? – benoitr Mar 27 '11 at 07:36
1

Got it! var data = {section:$(this).val()}; Thanks again for your kind help! – benoitr Mar 27 '11 at 07:49
@naren, if I do it then in my webpage the form is not rendering but the whole raw html is rendering, how to fix that? thanks :) – Clone Nov 15 '13 at 16:44

score 0 · Answer 2 · answered Jul 17 '12 at 03:44

0

This is also a good solution: https://github.com/splendeo/jquery.observe_field

answered Jul 17 '12 at 03:44

Brian Armstrong

19,707
17
115
144

score 0 · Answer 3 · answered Jul 23 '13 at 07:08

0

$(function() {
    // Executes a callback detecting changes
    $("#section"").change(function(){
    jQuery.ajax({data:'name=' + this.value, success:function(request){jQuery('#article_list').html(request);}, url:'/catalogs/get_article_list'
  })});});

answered Jul 23 '13 at 07:08

Marcelo Austria

861
8
16

How to convert this observe_field to jquery

3 Answers3

Linked