Rendering a ruby object through jQuery from a returned JSON object

Question

I don't know if this is the right approach, but I want to do exactly what the title says. I'm missing some jQuery concepts, as I'm new to it.

I am using jQuery.rest: https://github.com/lyconic/jquery.rest

This script periodically checks to see if the online and offline users have been updated:

<!-- Online checker -->
<script type="text/javascript">
  $(function(){
    setInterval (checkTrackings, 5000);
    var js = '<checkTrackings> ';
    function checkTrackings(){     
      $.read(
        '/users/{id}/check',
        { id: <%= @user.id.to_json %> },
        function (response) {
          $("ul#online").empty();
          $("ul#offline").empty();

          // Code to add users back to list
          $("ul#online").html('<%= escape_javascript(render(@online_users)).html_safe %>')
          $("ul#offline").html('<%= escape_javascript(render(@offline_users)).html_safe %>')


          console.log(js + 'Check trackings');
        }
      );
    }
  });
</script>

However, instead of @online_users and @offline_users, I need the returned JSON objects and need to convert them to said variables. The method that this script calls is here:

  # Updates contacts
  def check
    @online_users = Array.new
    @offline_users = Array.new

    @user = User.find(params[:id])
    @followed_users = @user.followed_users

    @followed_users.each do |followed_user|
      @online_users.push(followed_user) if followed_user.state.online
    end

    @offline_users = @followed_users - @online_users

    respond_to do |format|
      format.js { render :json => { :online_users => @online_users, :offline_users => @offline_users } }
    end
  end

Any other tips would be nice, too. I'm very new to web dev. Thanks for the help!

chaseadamsio · Accepted Answer · 2012-11-27 01:05:23Z

1

have you tried logging the response in

function (response) {...}

your response should have response.online_users and response.offline_users objects respectively, so log as:

function (response) {
  console.log(response.online_users, response.offline_users);
  ...
}

and see if your response contains your json objects?

So if you have response.online_users, you'll want to do this in your javascript:

// Code to add users back to list
var online_users = response.online_users,
    online_users_len = online_users.length,
    buffer = [];

for(var i = 0; i < online_users_len;  i++) {
  buffer.push("<li>", online_users[i], "</li>");
}
          $("ul#online").html(buffer.join(""));
// Put the offline user count in ul#offline
          $("ul#offline").html(response.offline_users);

edited Nov 27, 2012 at 1:05

answered Nov 27, 2012 at 0:44

chaseadamsio

8945 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Paul Funyun Over a year ago

Awesome, this is the test I just did. When no users are online 'response.online_users' is empty, when 1 user online it becomes [object Object]. So I am getting json back, but how do I convert them back into ruby? Thanks.

chaseadamsio Over a year ago

Are you wanting to convert it back into something that will be passed back to the action? What's the application of having them converted back to ruby from the front-end?

Paul Funyun Over a year ago

I already have a way to render ruby objects. So I want to use this code: $("ul#online").html('<%= escape_javascript(render(@online_users)).html_safe %>'), where @online_users becomes updated from response.online_users. This is a periodic update of a friends list and their online statuses.

chaseadamsio Over a year ago

Edited original posting, your javascript file should be putting those in when you refresh the page, but since you're wanting to work with data async, you have to pass the json in through javascript rather than ruby.

Paul Funyun Over a year ago

Thanks @realchaseadams , this was all I needed to know. lifesaver.

Collectives™ on Stack Overflow

Rendering a ruby object through jQuery from a returned JSON object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related